{ Webdesign } Les ombres en css avec box-shadow

Mar. 5 Mar. 2013

Apres vous avoir montrez les différents usages des bordures et coins arrondis en css, je me suis dit qu'une petite démonstration de l'élément box-shadow serait un parfait complément pour réaliser une mise en page avancée de votre site web.

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.

Ombre portée
.image {
box-shadow: 10px 9px 5px #282828;
-moz-box-shadow: 10px 9px 5px #282828;
-webkit-box-shadow: 10px 9px 5px #282828;
}
Ombre porté
.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;
}
Ombre porté
.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. */

Partagez sur les réseaux sociaux

Catégorie

Autres publications pouvant vous intéresser :

Commentaires :

Laisser un commentaire
Aucun commentaire n'a été laissé pour le moment... Soyez le premier !

Articles les plus consultés

OrdiTips - Un Ordi et des Tips

Sur OrdiTips je vous propose des astuces, des tutoriels et plein d'autres choses sur le monde du webdesign, de l'informatique et des appareils mobiles.
Si vous l'avez trouvé intérréssant, je vous invite à faire découvrir OrdiTips auprès de votre entourage :)

Annonces