Box et text shadow

Niveau : Intermédiaire | Par : Basil Hawkins | Validé par : Basil Hawkins | En date du : 29/03/2010

Bonjour bonjour !

Aujourd'hui je vais vous montrer deux nouvelles propriétés : "box-shadow" et "text-shadow".

I. Box-Shadow ;

Box-Shadow est une propriété CSS qui permet d'ajouter une ombre à une image, une bordure, un tableau, ... (Le titre ci-dessus est un exemple)

Il marche comme ceci :

Code:

-moz-box-shadow: Xpx Ypx Apx #EEEEEE;
-webkit-box-shadow: Xpx Ypx Apx #EEEEEE;
box-shadow: Xpx Ypx Apx #EEEEEE;

X correspond au nombre de pixels dont l'ombre sera décalée vers la droite (si vous voulez déplacer l'ombre à gauche, il faut insérer un nombre négatif).
Y correspond au nombre de pixels dont l'ombre sera décalée vers le bas (si vous voulez déplacer l'ombre en haut, il faut également insérer un nombre négatif ).
A correspond au dispersement de l'ombre : plus le chiffre sera petit, plus l'ombre sera petite et concentrée, plus le chiffre sera grand, plus l'ombre sera grande et diluée. Je vous conseille donc de ne pas dépasser 25 pour qu'on puisse la voir un minimum.
EEEEEE correspond à la couleur de l'ombre ; si vous voulez qu'elle ait la même couleur que la bordure, effacez cette partie

Actuellement mon ombre sur le titre est comme ceci :

Code:

box-shadow: 2px 2px 3px #000000;

Ce code sert surtout à donner du relief aux éléments


II. Text-Shadow ;

Text-shadow fonctionne exactement de la même façon que box-shadow, seulement c'est pour le texte. Le code se présente sous cette forme :

Code:

text-shadow: Xpx Ypx Apx #EEEEEE;

Petite précision avant de clore ce tutoriel, ces codes ne marchent pas sous IE ! Il y a bien d'autres codes spéciaux qui peuvent s'y rapprocher mais je ne vous les ai pas montrés car je les considère comme trop différents (niveau graphique, il y a une sacrée différence). Cependant si vous tenez à les connaître, vous pouvez faire une recherche google