28172 sujets

CSS et mise en forme, CSS3

Box-shadow et gradient?

Ben quand c'est comme ça tu testes... (et tu verras que ça marche).
Modifié par jb_gfx (13 Jul 2011 - 20:07)
jb_gfx a écrit :
Ben quand c'est comme ça tu testes... (et tu verras que ça marche).


J'ai fait l'essai hier, mais je n'ai pas réussi.
Un exemple de code est binvenu.
c'est possible mais il faut que tu fasse ton dégradé "à la main" en associant plusieurs ombres de couleurs différentes
Bonsoir,

je ne comprend pas bien, ton but c'est de faire une ombre qui va d'une couleur à une autre ? c'est ca ? ou c'est de mettre ton ombre à l'intérieur d'un div remplis par un gradient ?

exemple ? :


element.style {
    background-image: -moz-linear-gradient(center bottom , #FFFFFF 7%, #31E3FF 54%);
    box-shadow: 0 0 80px #000000 inset;
    height: 300px;
    width: 300px;
}

Modifié par ptitvincent (14 Jul 2011 - 01:18)
Je pense qu'il veut essayer de mixer

-webkit-box-shadow
-moz-box-shadow

et

-webkit-gradient
-moz-linear-gradient

en utilisant des rgba pour la transparence.

Maintenant, est-ce que cela conctionnerait???
ptitvincent a écrit :
Bonsoir,

je ne comprend pas bien, ton but c'est de faire une ombre qui va d'une couleur à une autre ? c'est ca ? ou c'est de mettre ton ombre à l'intérieur d'un div remplis par un gradient ?



Bonjour,

Effectivement, je veux faire une ombre qui va d'une couleur à une autre, si possible en utilisant rgba pour la transparence.


.shadow1{
box-shadow: 5px 5px #000000;
-webkit-box-shadow: 5px 5px #000000;
-moz-box-shadow: 5px 5px #000000;
}


Via le code si dessus, j'obtiens une ombre de couleur noire, sans effet de flou (blur).

Au lieu d'une ombre noire, je voudrais qu'elle aille du noir au blanc.
Modifié par Higure (14 Jul 2011 - 13:29)
c'est normal tu n'a pas mis de valeur pour le blur
rajoutes la valeur pour le blur ( 3 ème position avant la couleur)
Administrateur
Higure a écrit :

Effectivement, je veux faire une ombre qui va d'une couleur à une autre

Hello,

Par défaut, box-shadow accepte les valeurs suivantes ;
1- décalage à droite
2- décalage en bas
3- fondu
4- épaisseur
5- couleur
6- mot clé inset ou outset

Tu peux utiliser plusieurs valeurs en les séparant par des virgules.

Par exemple :
-webkit-box-shadow: 0 0 8px 20px red, 0 0 8px 40px green, 0 0 8px 60px  blue;


Mais je te conseille plus simplement d'utiliser une seule couleur en rgba :
-webkit-box-shadow: 0 0 30px rgba(0,0,0,.6);

Modifié par Raphael (14 Jul 2011 - 14:41)
kurten a écrit :
Je pense qu'il veut essayer de mixer

-webkit-box-shadow
-moz-box-shadow

et

-webkit-gradient
-moz-linear-gradient

en utilisant des rgba pour la transparence.

Maintenant, est-ce que cela conctionnerait???

oui , ça marche et pourquoi ça ne marcherait pas ? (a part user plus de ressources du navigateur) : http://yidille.free.fr/plux/valign/uploads/nanopodish.html#demo


j'ai fait mumuse avec en dec 2010 donc aucun test vis a vis de IE9 et avec des préfixes proprio pour les css. ça a probablement mal viellit Smiley smile .

GC
Sujet clos
Aller à