Box-shadow

La propriété CSS box-shadow est utilisée pour créer des ombres, souvent appelées ombres portées (drop shadows) comme dans dans Photoshop.

En voici un exemple, avec la meilleure compatibilité navigateurs possible ( NdT : Pour connaître la compatibilité navigateurs à l'heure où vous lirez cet article, consultez Can I Use. Aujourd'hui, elle est excellente.) :

//CSS
.shadow {
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

Les valeurs sont les suivantes :

//CSS
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];  
  1. Le décalage (offset) horizontal (requis) de l'ombre, une valeur positive signifie que l'ombre sera à droite de la boîte, une valeur négative positionnera l'ombre à gauche de la boîte.
  2. Le décalage vertical (requis) de l'ombre, une valeur positive signifie que l'ombre sera en bas de la boîte, une valeur négative positionnera l'ombre au-dessus de la boîte.
  3. Le rayon de flou (blur radius), (requis), une valeur de 0 signifie que l'ombre sera nette, et le flou augmentera à mesure que le nombre augmente. Par exemple, une ombre ayant un décalage horizontal de 5px et un rayon de flou de 5px également aura une étendue totale de 10px.
  4. Le rayon d'étendue (spread radius), (optionnel), les valeurs positives augmentent la taille de l'ombre, les valeurs négatives la diminuent. La valeur par défaut est 0 (l'ombre à la même taille que le flou).
  5. Couleur (requise). Accepte n'importe quelle valeur de couleur, hexadécimale, nommée, rgba ou hsl. Si la valeur est omise, les box-shadows ont la couleur du texte.

Il est assez courant d'utiliser des couleurs semi-transparentes comme rgba(0, 0, 0, 0.4) qui créent un bel effet.

Exemple simple de box-shadow :

Ombre interne

//CSS
.shadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

Exemple :

Sur un seul côté

On peut comprimer l'ombre en utilisant un spread radius négatif. En l'affichant sur un seul côté, on obtient un bel effet.

//CSS
.one-edge-shadow {
  -webkit-box-shadow: 0 8px 6px -6px black;
     -moz-box-shadow: 0 8px 6px -6px black;
          box-shadow: 0 8px 6px -6px black;
}

Bordures multiples

On peut donner autant de valeurs que l'on veut à box-shadow, séparées par une virgule. par exemple, ce code crée deux ombres de couleur différente et positionnées différemment.

//CSS
box-shadow:  
  inset 5px 5px 10px #000000, 
  inset -5px -5px 10px blue;

L'exemple qui suit, sur CodePen, montre comment utiliser cette option pour créer des bordures multiples :

See the Pen bCqia by Chris Coyier (@chriscoyier) on CodePen.

En appliquant les ombres à des pseudo-éléments que vous manipulez ensuite, vous pouvez obtenir des box shadows originales avec un aspect 3D :

See the Pen CSS3 Box Shadows Effects by Halil İbrahim Nuroğlu (@haibnu) on CodePen.


Exemples d’utilisation dans La Cascade :

Effets d'image CSS, 3 : les vignettes, par Una Kravets

Autres ressources à consulter sur ce sujet :

Autres articles intéressants :

articles en français :

Les ombrages en CSS3, par Raphaël (Alsacréations)
Générateur d'ombrages via box-shadow en CSS3, par Jérôme Debray

articles en anglais :

Box-shadow generator, par CSSmatic


Cet article est pour l’essentiel tiré de l’almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l’auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l’auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d’une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d’articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d'inspiration pour vos propres designs.