Par défaut, l'ombre est à voir comme un bloc derrière l'élément qui s'y superpose parfaitement. En agissant sur ses paramètres, l'objectif est de modifier la position de ce bloc pour qu'il dépasse afin de donner l'impression d'une ombre.
Inset : Définit ou s'affiche l'ombre. Par défaut, elle s'applique sur les bordures extérieures de l'élément. Si Inset est coché, elle s'appliquera à l'intérieur.
Shadow color : couleur de l'ombre
Shadow Horizontal Offset : Une valeur positive décalera l'ombre vers la droite. Une valeur négative le décalera vers la gauche.
Shadow Vertical Offset : Une valeur positive décalera l'ombre vers le bas. Une valeur négative le décalera vers le haut
Shadow Blur : Rajoute un effet de flou progressif au bout de l'ombre pour qu'elle paraissent plus naturelle.
L'effet de flou vient agrandir l'ombre. Par exemple, si vous ajoutez un Blur de 100px, un effet de flou progressif d'une taille de 100px viendra se rajouter à l'ombre horizontale ET verticale.
Shadow spread : Agrandit l'ombre plutôt que de simplement la décaler. Rarement utilisé.
La Box-shadow nécessite un peu de prise en main pour être bien comprise. Testez plusieurs configurations jusqu'à en trouver une qui vous convienne.
Voici un exemple concret de box shadow sur l'élément off canvas (le fond noir derrière la barre à droite). Notez que la couleur noire a été réduite en opacité (en utilisant la barre sur 100 lors du choix de la couleur) pour donner un côté pour naturel.
Besoin de quelque chose ?
Nous sommes toujours prêts à améliorer notre formation. N'hésitez pas à nous signaler un problème ou un cours manquant.
Afin d'offrir la meilleure expérience possible, nous utilisons des technologies telles que les cookies pour stocker et/ou accéder aux informations des appareils. Le fait de ne pas consentir ou de retirer son consentement peut avoir un effet négatif sur certaines caractéristiques et fonctions.
