Box-shadow.

Introduction.

Box-shadow peut accepter cinq valeurs comme suit: La première valeur définit le décalage sur l'axe des X, soit l'axe horizontale. La deuxième définit le décalage sur l'axe des Y, soit l'axe vertivcale. Ces deux valeurs peuvent être soient positives, soient négatives. Si les deux sont définies à '0', alors l'ombre se place derrière l'élément comme dans la Box 03. La troisième valeur génère un effet de flou (diffusion) sur l'ombre, si cette dernière est à '0', l'ombre aura un tracé net. La quatrième valeur correspond à la taille de l'ombre ou son étalement. Si elle est définie à '0', elle aura la même taille que l'élément, voir la Box 02. La cinquième valeur correspond à la couleur.

Box 01

Box 02

Box 03

Box 04

.box-01 {
box-shadow: 8px 8px 15px 10px #55A0FF;
}
	
.box-02 {
box-shadow: 8px 8px 0 0 #55A0FF;
}	

.box-03 {
box-shadow: 0 0  8px 8px #55A0FF;
}

.box-04 {
box-shadow: -8px -8px  0 12px #55A0FF;
}
								

Il est possible de rajouter la valeur 'inset' à la proprité 'Box-shadow'. Mais au lieu d'une ombre porté, l'ombre est interne à l'élément. Même code que précédement mais avec la valeur 'inset'.

Box 05

Box 06

Box 07

Box 08

.box-05 {
box-shadow: inset 8px 8px 15px 10px #55A0FF;
}
	
.box-06 {
box-shadow: inset 8px 8px 0 0 #55A0FF;
}	

.box-07 {
box-shadow: inset 0 0  8px 8px #55A0FF;
}

.box-08 {
box-shadow: inset -8px -8px  0 12px #55A0FF;
}
								

En résumé:

.box {
box-shadow: decalX decalY Blur étalement couleur;
}
								

En détail.

il est possible de n'utiliser que deux, trois ou quatre valeurs. Avec deux valeurs, seuls le offset-x et offset-y sont définis. Avec la troisième, se sera le blur et la quatrième, le spread. Soit dans cet ordre:

.box {
box-shadow: decalX | decalY | Blur | spread | color;
}
								

Attention cependant, si color n'est pas définie, certains navigateurs mettront la valeur à transparent !

Quelques effets interressants.

Box 09

Box 10

Box 11

.box-09 {
box-shadow: 0 10px 10px -5px black; 
}

.box-10 {
border-radius: 50%;
box-shadow: inset 0 10px 8px -1px #23001B, 0 20px 15px -5px #23001B;
}

.box-11 {
box-shadow: 0 0 20px black, /* spread  0 */
  20px  15px 30px yellow,
 -20px  15px 30px lime,
 -20px -15px 30px blue,
  20px -15px 30px red;

}
								

Articles connexes:

Bouton et design responsiv (CSS).[ GO! ]

Les bordures (CSS).[ GO! ]

Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 30/10/2020

Tests effectués sous Firefox 61.0.1 et Midori 0.5.11