28172 sujets

CSS et mise en forme, CSS3

Transparence et coin arrondi

Bonjour à tous,

Y-a-t-il un moyen d'avoir un bloc avec un coin arrondi (un seul me suffit !) et une couleur de fond de bloc avec transparence... compatible IE ?

J'utilise une classe (trouvée sur ce site !) avec rgb, rgba, et une condition pour IE qui fonctionne parfaitement pour gérer la transparence :


.opacite {
	background-color: rgb(255, 255, 255); /* alternative solide */
	background-color: rgba(255, 255, 255, 0.7);
	border:1px solid #B0C4DE;
  } 
 
</style> 
<!--[if IE lte IE 8]> 
  <style type="text/css"> 
    .opacite { 
      background:transparent; 
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C0ffffff,endColorstr=#C0ffffff); 
      zoom: 1; 
    }  
  </style> 
<![endif]-->


Pour le coin pas de problème sous mozilla, safari et chrome avec
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;

mais comment faire pour IE (sachant que j'ai une image de fond générale qui donc ne permet pas l'utilisation d'un png de coin, car il faudrait que le coin soit une portion de l'image de fond générale)?
Merci de votre aide
Modifié par whynote (11 Aug 2010 - 10:33)
Bonjour,
J'ai le même soucis Smiley cligne
je ne donne pas la réponse mais une piste sur laquelle je travaille.

Pour les arrondis il faut voir du coté de fichiers .htc à mettre sur ton serveur.

http://css3pie.com/

(edit : j'ai vu la réponse de Mikachu et la solution roundies me plait bien)

(re edit : roundies ne semble pas gérer la transparence, il ne reste donc que la solution .htc, par contre je ne trouve pas de .htc qui gère et le radius et la transparence.)
Modifié par albtr (11 Aug 2010 - 10:55)
a écrit :
roundies ne semble pas gérer la transparence, il ne reste donc que la solution .htc, par contre je ne trouve pas de .htc qui gère et le radius et la transparence


pour la transparence pourquoi pas une propriété opacity et un petit filtre pour IE ? 


opacity: 0.5;
filter: alpha(opacity = 50);


Sinon j'ai testé css3pie effectivement, tu peux avoir qu'un seul coin arrondis Smiley smile
Alors après quelques heures de test: PIE.htc gère très bien les coins arrondis mais pas la transparence. Si on utilise un filtre gradient microsoft avec htc pour gérer la transparence il apparait sur tout le bloc, coin compris.
Je crois que je vais oublier l'idée d'avoir quelques blocs avec transparence et coins arrondis sous IE...
j'ai moi aussi fait des tests avec PIE.htc et ie-css3.htc, la transparence ne fonctionne pas. que ce soit avec un .png (tant pis pour IE6) ou avec "filter".
La css3 attendra encore un peu pour moi, dommage Smiley decu
Modifié par albtr (12 Aug 2010 - 15:30)
Hello Smiley smile

Effectivement j'avais pas testé le combo PIE.htc + filtre transparent, il semble que vous ayez tous les deux raison, à partir du moment où on applique le PIE.htc la transparence IE disparait : ARGGHH

Bah si quelqu'un a une idée du coup ça m'intéresse aussi ^^
Sujet clos
Aller à