{ Webdesign } Les ombres en css avec box-shadow

Présentation de box-shadow

box-shadow; permet d'ajouter une ombre portée à la plupart des éléments composant votre page web.

La déclaration ce réalise comme suit :

.image {
box-shadow: 9px 10px 5px #000;
}<br><br>
9px = décalage horizontal vers la droite
10px = décalage vertical vers le bas
5 px = la force du dégradé
#000 = la couleur de l'ombre

Il est également possible d'appliquer une valeur négative au décalage horizontal et verticale. Logiquement l'ombre horizontal ce trouvera à gauche et l'ombre vertical en haut ... Le seul frein à son utilisation concerne la compatibilité de cette élément avec d'anciens navigateurs. En outre, la compatibilté est asssuré qu'à partir d'Internet Explorer 9+, Firefox 4+, Chrome 10+, Safari 5.1+, Opera 10.5+, Opera Mobile 11+. Pour les autres navigateurs plus anciens, il sufit d'appliquer les mêmes valeurs en préfixant box-shadow; par -moz- pour Firefox < 4, ou -webkit- pour Chrome <10, Safari <5.1 et Android ce qui devient donc -moz-box-shadow; et -webkit-box-shadow;.

.image {
box-shadow: 10px 9px 5px #000;
-moz-box-shadow: 10px 9px 5px #000;
-webkit-box-shadow: 10px 9px 5px #000;
}

Pour les versions antérieures à internet explorer 9, les filtres shadow; et glow; ( spécifiques à microsoft ) permettent de réaliser un effet proche de box-shadow; avec un rendu plus ou moins bon ( décrit plus bas ) .

Application de box-shadow

Pour cette illustration, nous allons utiliser une image sur laquelle on va appliquer box-shadow; de différentes facons afin de bien comprendre son utilisation.

.image {
box-shadow: 10px 9px 5px #282828;
-moz-box-shadow: 10px 9px 5px #282828;
-webkit-box-shadow: 10px 9px 5px #282828;
}

.image {
box-shadow: -10px -9px 5px #282828; /* valeurs horizontal et vertical négatives */
-moz-box-shadow: -10px -9px 5px #282828;
-webkit-box-shadow: -10px -9px 5px #282828;
}

.image {
box-shadow: 0px 0px 5px #282828; /* mettre les valeurs horizontal et vertical à 0px ou 1px */
-moz-box-shadow: 0px 0px 5px #282828;
-webkit-box-shadow: 0px 0px 5px #282828;
}

Les filtres shadow et glow pour IE <9

Pour ne pas changer, internet explorer fait office de mauvais élève :p la propriété box-shadow n'est ainsi reconnue qu'à partir de la version 9. Cepandant il existe 2 alternatives propres à microsoft, avec un rendu plus ou moins bon. Il s'agit du filtre shadow, ressamblant plus à une ombre en perspéctive qu'à une ombre portée, et du filtre glow qui donne un effet "d'halo " autour de l'image.

Note : n'ayant pas à ma disposition d'anciennes versions d'internet explorer, aucune illustration n'est présenté.

Application du filtre shadow

Le filtre shadow; accepte 3 valeurs différentes : color ... pour la couleur, direction ... pour la direction ( en degrès ) et strength pour l'intensité du dégradé.

<!--[if lte IE 8]>
  <style type="text/css">
  .image {
    filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=110, Strength=10);
    zoom: 1;
  }
  </style>
<![endif]-->

/* Il est conseillé d'écrire un commentaire conditionnel spécifique pour les versions antérieures à IE 9. */

Application du filtre glow

Le filtre glow; accepte 2 valeurs différentes : color ... pour la couleur et strength pour l'intensité du dégradé.

<!--[if lte IE 8]>
<style type="text/css">
.image {
  filter:progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=10);
  zoom: 1;
}
</style>
<![endif]-->
/* Il est conseillé d'écrire un commentaire conditionnel spécifique pour les versions antérieures à IE 9. */

Christian Aslan