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

| Catalin Rosu (auteur) | Didier Mouronval (traducteur) |

Traducteur

Bovino

J'ai appris à utiliser les ombres portées et internes avec Photoshop. Mais désormais, avec CSS3, vous n'avez plus besoin de Photoshop pour ajouter ces ombrages à vos boîtes.

Cet article est la traduction de How to create slick effects with CSS3 box-shadow publié sur Red Team Design.

Commentez

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

- Auteurs : Catalin Rosu (auteur), Didier Mouronval (traducteur)

- Traducteur : Bovino

- Parution : 8 juin 2012

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2012 Catalin Rosu. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- La propriété box-shadow

- De la science occulte ?

- Assez de théorie, passons à la pratique !

- Ajoutez de la profondeur au body

- Ombres portées

- Quelques astuces

- Compatibilité des navigateurs

- Conclusion et remerciements

La propriété 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 :

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.

Assez de théorie, passons à la pratique !

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.

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.

#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;
}

Quelques astuces

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;

Compatibilité des navigateurs

- Internet Eplorer 9+ ;

- Firefox 3.5+ ;

- Safari / Chrome ;

- Opera 10.5+.

Vous pouvez voir un exemple de mise en œuvre.

Conclusion et remerciements

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.