WEB-d Développement Web

PHP, SQL, HTML5, CSS3, Javascript, Mootools, Référencement, SEO, CMS, e-commerce, Apache, Linux, Ubuntu, ...

Ajouter une ombre grâce à 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');
}
 

CSS Shadow

Articles similaires