Créer des effets étonnants avec la propriété CSS3 box-shadow

La propriété box-shadow permet d'ajouter différentes ombres (interne ou externe) sur les éléments de type bloc. Pour cela, vous devez préciser certaines valeurs : color, size, blur et offset.

<shadow> = inset? && [ <length>{2,4} && <color>? ]

De la science occulte ?▲

Pas du tout, voici un exemple de base :

 

Sélectionnez

box-shadow: 3px 3px 10px 5px #000;

Cette déclaration va générer l'ombrage suivant :

Vous pouvez aussi déjà regarder un exemple concret.

• Une valeur positive pour le décalage horizontal décale l'ombre vers la droite, une valeur négative vers la gauche.
• Une valeur positive pour le décalage vertical décale l'ombre vers le bas, une valeur négative vers le haut.
• Vous ne pouvez pas donner une valeur négative pour l'étendue de flou. Plus la valeur est grande, plus le flou s'étale, comme vous pouvez le voir ci-dessus.
• Une distance de propagation positive entraine une expansion de la zone d'ombre dans toutes les directions, une valeur négative entraine une contraction.
• La couleur est celle de l'ombre.
• La propriété inset (non présente ci-dessus) indique une ombre interne plutôt qu'externe.

Mais cela n'est que de la théorie, si vous voulez aller plus loin, alors soyez les bienvenus et regardez les spécifications du W3C.

Voyons maintenant comment vous pouvez mettre en œuvre cette formidable fonctionnalité CSS3 de façon élégante. Je vais vous montrer comment améliorer votre design avec les meilleures techniques faisant appel à box-shadow.

Ajoutez de la profondeur au body▲

Exemple de référence.

 

Sélectionnez

body:before
{
   content: "";
   position: fixed;
   top: -10px;
   left: 0;
   width: 100%;
   height: 10px;
   z-index: 100;
   -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   }

Ombres portées▲

Voici deux des articles qui m'ont inspiré :

• Divya Manian - Ombres portées avec CSS3 ;
• Nicolas Gallagher - Ombres portées en CSS sans images.

 

Sélectionnez

#box
{
  position: relative;
  width: 60%;
  background: #ddd;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2em 1.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;
}

#box:before, #box:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

#box:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

Ajoutez un peu de piment à vos ombres en utilisant le format de couleurs RGBa. La propriété box-shadow peut être utilisée avec ce format et permet de créer des ombres avec différents niveaux d'opacité. Si votre navigateur reconnait la propriété box-shadow, alors il reconnaitra aussi les couleurs au format RGBa.

Définissez plusieurs ombres avec une déclaration CSS unique :

box-shadow: 3px 3px 10px 5px #000, 0 0 4px rgba(0, 0, 0, .5) inset;

• Internet Eplorer 9+ ;
• Firefox 3.5+ ;
• Safari / Chrome ;
• Opera 10.5+.

Vous pouvez voir un exemple de mise en œuvre.

Vous devriez commencer maintenant à utiliser ces techniques et je pense ce que je dis. Pourquoi ? Simplement parce que vous pouvez, car box-shadow ne risque pas de casser votre mise en page avec les anciens navigateurs.

Cet article a été publié avec l'aimable autorisation de Catalin Rosu. L'article original peut être lu sur le site de Red Team Design : How to create slick effects with CSS3 box-shadow.

Nous tenons aussi à remercier ClaudeLELOUP pour sa relecture attentive de cet article.