Ajouter une ombre grâce à CSS
Posté le Friday 16 September 2011 | Catégories : CSS
Depuis l'avènement de la version 3, il est possible d'ajouter une ombre à une boite en utilisant uniquement du code CSS. La syntaxe de base est la suivante :
div.ombre {
box-shadow: déplacement_horizontal déplacement_vertical taille_du_flou couleur;
}
Le code à utiliser varie malheureusement d'un navigateur à l'autre. Pour que l'effet soit visible pour un maximum d'utilisateurs, il faut donc utiliser le code suivant:
div.ombre {
-moz-box-shadow: 5px 5px 4px #444;
-webkit-box-shadow: 5px 5px 4px #444;
box-shadow: 5px 5px 4px #444;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
}
