Fonctionnement de la syntaxe box-shadow
Le fonctionnement de la box-shadow est simple, pour comprendre sa syntaxe, prenons un exemple :
Notre code comporte 5 parties importantes à comprendre :
- Le décalage horizontal X-Offset) : 1px dans l'exemple ci-dessus.
Il indique la distance horitale de l'ombre sera de la carte horizontalement
Une valeur positive signifie à droite, négative signifie à gauche. - Le décalage vertical (Y-Offset) : 2px dans l'exemple ci-dessus.
Il indique la distance horitale de l'ombre sera de la carte verticalement.
Une valeur positive signifie vers le bas, négative signifie vers le haut. - Le flou (Blur) : 3px dans l'exemple ci-dessus.
Il indique à quel point l'ombre sera floue.
Un rayon plus élevé signifie plus de flou. - La propagation (Blur-Offset) : 4px dans l'exemple ci-dessus.
Elle indique dans quelle mesure l'ombre s'étendra dans toutes les directions. - La couleur (Color) : rgba (76,76,76,0.5) dans l'exemple ci-dessus.
Elle détermine la couleur de l'ombre.
Si elle n'est pas indiquée, la couleur du texte par défaut sera utilisée.
Les valeurs de couleur peuvent être en Hex, RVB ou HSL.
Cette technique simple permet de mettre en valeur un élément de votre design facilement.
Comment utiliser plusieurs couches d'ombre
Ici encore, la méthode est très simple : séparer vos différentes syntaxes box-shadow par des virgules (,).
Vous obtiendrez une succession d'ombres de plus en plus opaques comme dans notre caroussel.
Box-shadow inset
L'ajout de la valeur inset dans la définition de votre ombre permet de déclarer une ombre interne et non le comportement par défaut qui est vers l'extérieur (outer shadow).
Box-shadow hover
Pour faire un effet hover avec une box-shadow sur votre élément, il suffit d'ajouter une classe à ce même élément avec un effet hover.
Voici un exemple sympa de box-shadow sur des boutons : https://codepen.io/giana/pen/BZaGyP
Quelques exemples de box-shadow
Vous trouverez ces exemples en image dans le caroussel en début de page
Exemple 1 :
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
Exemple 2 :
Exemple 3 :
Exemple 4 :
Il existe de nombreux générateurs de box-shadow en ligne qui pourront vous aider :
- https://html-css-js.com/css/generator/box-shadow/
- https://cssgenerator.org/box-shadow-css-generator....
Vous avez un projet Web ?
Profitez de l'expérience d'un expert du
WEB
Je vous accompagne de la création à la stratégie de positionnement de votre site web.