Ombre portée en CSS3 (drop shadow)

14 12 2010

L’une des nouvelles fonctionnalités bien cool apportées par CSS3 sont les ombres portées.

Ça a toujours son petit effet quand c’est utilisé à bon escient (c’est à dire discret, pas de gros Pâté à la Smogogo (oui, souvenez vous, c’est loin tout ça).

.shadow {
	-moz-box-shadow:	0 0 4px #555;
	-webkit-box-shadow:	0 0 4px #555;
	box-shadow:		0 0 4px #555;
}

Les paramètres sont : position-x position-y taille couleur.

Un petit exemple :

Une div de malade avec une ombre portée dessus, full CSS3 mon gars !
Prends en de la graine…

Sauf que bien entendu ça ne fonctionne pas sous IE, sinon ça serait pas drôle (si t’as du CSS3 qui marche chez Microsoft, fait tourner, c’est de la bonne), alors :

/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#555555')";
/* IE 5.5 - 6 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#555555');

Partager :

Ces icônes sont des liens vers des sites de partage de signet sociaux où les lecteurs peuvent partager et découvrir de nouveaux liens.