### Ombre externe

La propriété box-shadow permet de définir une ou plusieurs ombres sous une boîte.

    h2 {
    	box-shadow: 10px 8px 5px 4px #044106;
    }

Une ombre est définie avec 4 valeurs de longueur et une valeur de couleur.

5 valeurs pour définir une ombre

Le décalage horizontal place l'ombre de la boîte à sa droite (valeur positive) ou à sa gauche (valeur négative).
Le décalage vertical place l'ombre de la boîte en bas (valeur positive) ou en haut (valeur négative).
La 3éme valeur permet d'adoucir le contour de l'ombre en le rendant flou. Plus la valeur est élevée et plus l'ombre est adoucie.
La 4éme valeur définit la taille de l'ombre de couleur unie avant le début du flou. Cette valeur peut être négative.
Pour avoir des ombres réalistes, l'utilisation des fonctions de couleur avec transparence (`rgba()` ou `hsla()`) donne les meilleurs résultats.

Tester les ombres de boîte

Les valeurs de décalage horizontal et vertical sont obligatoires. Les valeurs de flou, de renfort et de couleur sont facultatitves. Si la valeur de flou ou de renfort n'est pas précisée elle sera par défaut de 0. Si la couleur n'est pas précisée, c'est la couleur du texte qui sera utilisée (propriété color).

Exemple : plusieurs images de fond
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Véhicules à louer</h3> <figure> <img src="../exemples/img/vulture_droid.png"> <figcaption>1 - Vulture Droid</figcaption> </figure> <figure class="scotch"> <img src="../exemples/img/naboo_starfighter.png"> <figcaption>2 - Naboo Starfighter</figcaption> </figure> <figure> <img src="../exemples/img/v_wing.png"> <figcaption>3 - V-wing</figcaption> </figure> <figure class="scotch"> <img src="../exemples/img/mandalorian_fighter.png"> <figcaption>4 - Mandalorian Fighter</figcaption> </figure> </body> </html>
Fichier CSS : styles.css
body { background: url(../exemples/img/bois.jpg); } figure { float: left; border: 10px solid #fff; margin: 20px; background: white; } figure:first-of-type { box-shadow: 8px 8px 14px 5px rgb(0, 0, 0); } figure:nth-of-type(2) { /* identique précédent mais avec transparence */ box-shadow: 8px 8px 14px 5px rgba(0, 0, 0, 0.8); } figure:nth-of-type(3) { /* ombre sous un seul côté */ box-shadow: 0 20px 15px -8px black; } figure:last-of-type { /* ombre de tous les côtés */ box-shadow: 0 0 6px 2px rgb(0, 0, 0); } img { background: #000; padding: 5px;; }
Exemple : ombres externes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <nav> <h3>Choisissez un film</h3> <a id="s1"></a> <a id="s2"></a> <a id="s3"></a> <a id="s4"></a> </nav> </body> </html>
Fichier CSS : styles.css
body { background-image: url(../exemples/img/etoiles.jpg); color: white; } nav { margin: 10px auto; width: 300px; } nav a { background-image: url(../exemples/img/films.png); width: 128px; height: 102px; cursor: pointer; float: left; border-radius: 10px; margin: 10px; } nav a:hover { box-shadow: 0 0 15px cyan;} #s1 { background-position: 0 0; } #s1:hover { background-position: 0 -102px; } #s2 { background-position: -128px 0; } #s2:hover { background-position: -128px -102px; } #s3 { background-position: -256px 0;} #s3:hover { background-position: -256px -102px; } #s4 { background-position: -384px 0; } #s4:hover { background-position: -384px -102px; }

### Ombre interne

On peut créer des ombres internes avec le mot-clé `inset` comme valeur supplémentaire de la propriété box-shadow.

Tester les ombres de boîte

Exemple : ombres internes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <a class="bouton rouge">Click !</a> <a class="bouton vert">Click !</a> </body> </html>
Fichier CSS : styles.css
.bouton { box-shadow: .1em .2em .3em rgba(255, 255, 255, 0.8) inset; color: #FFFFFF; text-shadow: 0 -1px 1px rgba(0, 40, 50, 0.35); border-radius: 50px; border: 1px solid #D4D4D4; display: inline-block; font-family: Verdana, sans-serif; font-weight: bold; height: 2em; line-height: 2em; margin: 0; padding: 0.2em 0; text-align: center; text-decoration: none; cursor: pointer; width: 8em; } .rouge { background: linear-gradient(#E8543F, #D9331A); border-color: #C22D18; } .rouge:hover {background: linear-gradient(#FC7D6C, #D9331A);} .vert { background: linear-gradient(#8FCF00, #6B9C00); border-color: #5A8200; } .vert:hover {background: linear-gradient(#A0E800, #6B9C00);}

### Plusieurs ombres

On peut affecter plusieurs ombres (externes et/ou internes) à une boîte. Il suffit de séparer par une virgule les groupes de valeurs définissant chacune des ombres.

On reprend ici l'exemple précédent des boutons en ajoutant une ombre interne sombre en bas pour améliorer l'effet 3D et une ombre externe quand il y a survol avec la souris.

Exemple : plusieurs ombres
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <a class="bouton rouge">Click !</a> <a class="bouton vert">Click !</a> </body> </html>
Fichier CSS : styles.css
.bouton { box-shadow: .1em .2em .3em rgba(255, 255, 255, 0.8) inset, -.1em -.2em .3em rgba(0, 0, 0, 0.4) inset; color: #FFFFFF; text-shadow: 0 -1px 1px rgba(0, 40, 50, 0.35); border-radius: 50px; border: 1px solid #D4D4D4; display: inline-block; font-family: Verdana, sans-serif; font-weight: bold; height: 2em; line-height: 2em; margin: 0; padding: 0.2em 0; text-align: center; text-decoration: none; cursor: pointer; width: 8em; } .rouge { background: linear-gradient(#E8543F, #D9331A); border-color: #C22D18; } .rouge:hover { background: linear-gradient(#FC7D6C, #D9331A); box-shadow: .1em .2em .3em rgba(255, 255, 255, 0.8) inset, -.1em -.2em .3em rgba(0, 0, 0, 0.4) inset, 0 0 .3em #C22D18; } .vert { background: linear-gradient(#8FCF00, #6B9C00); border-color: #5A8200; } .vert:hover { background: linear-gradient(#A0E800, #6B9C00); box-shadow: .1em .2em .3em rgba(255, 255, 255, 0.8) inset, -.1em -.2em .3em rgba(0, 0, 0, 0.4) inset, 0 0 .3em #5A8200; }