28172 sujets

CSS et mise en forme, CSS3

Bonjour!

Je continue à lire ici et là sur le css3, pour mon projet, j'ai utiliser la propriété de dégradé sur le background du body. Jusque là tout va bien.

J'ai tenter de pousser un peu plus loin, sur le conteneur2 se retrouve une image ayant un dégradé ET une transparence.
J'ai fait un dégradé en css3, mais impossible d'y appliquer une transparence sans affecter les div qui suivent.

La propriété rgba ne fonctionne évidement pas, puisqu'il s'agit d'un aplat de couleur.

Ma question est la suivante: Est-ce possible de mixer dégradé de couleur et transparence en CSS3? Le tout sans utiliser d'image biensûr!
Modifié par juliesunset (12 Apr 2010 - 20:42)
Hello,

Qu'entends-tu précisément par "mixer dégradé de couleur et transparence" ?

Apparemment, tu as utilisé "opacity" pour la transparence, vu que tu parles d'affectation des blocs imbriqués.
Tu peux utiliser rgba() dans les couleurs de dégradé, c'est tout à fait possible : ça te donne un dégradé de fond avec transparence variable.

Exemple de dégradé linéaire (pour Firefox), avec transparence, qui marche :
div#Foo{
background-image: -moz-linear-gradient(100% 100% 180deg, rgba(0,0,0,.25), rgba(0,0,0,.75)) !important;
}
ça te donne un dégradé linéaire partant d'un noir opaque à 25% vers un noir opaque à 75%, sans affecter l'opacité des blocs contenus.
Modifié par Ladytron (01 Apr 2010 - 22:19)
Oups!
J'avais oublié ce topic... d'autre priorité avaient pris le dessus!

Merci pour ta réponse Ladytron, ça m'éclaire un peu plus.
à la base j'avais eu un peu de mal à comprendre le fonctionnement du dégradé, surtout avec webkit. Là encore avec l'exemple que tu me donne, va probablement falloir que je décortique un peu aussi.

Aureance... qu'est-ce qu'elle a mon image?
Vu que Gecko et Webkit ont pas les mêmes implémentations de cette fonction, il est normal qu'on patauge avec ça (même moi, j'trouve ça un peu flou pour le moment, va falloir creuser la chose) Smiley smile
C'est une fonctionnalité que je n'utilise pas encore (au contraire des coins arrondis et transparences de fond) Smiley cligne
Smiley langue
C'est pour ça que j'ai utiliser le terme "pousser un peu plus loin"!

Mais ça fonctionne cela dit! Et en plus j'ai trouvé comment avec webkit.
ça donne quelque chose comme ça:
#contenant02 {
	background: url(../interface/background_02.png) repeat; /*iE*/
	background: -moz-linear-gradient(100% 100% 90deg, rgba(111,121,78,.70), rgba(182,198,127,.70), rgba(111,121,78,.70));/*Firefox*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(111,121,78,.70)), to(rgba(111,121,78,.70)), color-stop(0.0, rgba(111,121,78,.70)), color-stop(0.5, rgba(182,198,127,.70)), color-stop(1.0, rgba(111,121,78,.70))); /*Safari*/
}


J'ai tenté d'utiliser les pixels plutôt que les %, mais ça ne fonctionne pas. Rien de dramatique dans mon cas, ça aurait juste été intéressant.