Faire des ombres portées avec Box-shadow

— Publié le 16 novembre 2019 —

En 2013 est apparue l’ère du flat design. Depuis 2017, on est plutôt sur du semi-flat et donc les ombres portées sont de retour : elles adoucissent les contours, donnent du relief et de la nuance à nos images. Pour rendre cet effet sur votre site web, vous avez 2 solutions :

• soit vous faites vos ombres portées dans Photoshop,
• soit vous les intégrez en CSS3, directement dans le site.

Nous allons donc voir dans cet article comment faire et vous allez voir que les possibilités sont très nombreuses !

La propriété box-shadow

Aujourd’hui cette propriété fonctionne quasiment avec tous les navigateurs donc vous pouvez les utiliser sans soucis. Alors voyons d’abord comment la construire, puis nous illustrerons la théorie avec quelques exemples.

Tout d’abord, il faut comprendre comme se positionne une box-shadow. Par défaut, il s’agit d’une ombre qui va se trouver cachée derrière votre bloc. Et en ajoutant des valeurs, vous allez la faire dépasser plus ou moins de votre bloc, en haut, à droite, en bas, à l’intérieur… Il existe des générateurs de box-shadow, et jouant avec les curseurs, vous allez pouvoir visualiser ces comportements.

Une css3 de type box-shadow peut prendre les valeurs suivantes :

Pas de panique, nous allons vous expliquer à quoi cela correspond :

• inset : cela permet de préciser si vous voulez afficher l’ombre portée à l’intérieur ou à l’extérieur de votre bloc. Si vous ne précisez rien, l’ombre portée sera à l’extérieur ; si vous commencez par « inset », alors l’ombre portée sera à l’intérieur.
• position-x : le point de repère est le coin supérieur gauche de votre bloc. Position-x va permettre de définir le décalage horizontal de votre ombre portée. Si vous indiquez une valeur positive, l’ombre portée se fait sur la droite ; une valeur négative affiche l’ombre sur la gauche ; une valeur nulle équilibre l’ombre de la même manière à droite et à gauche. Les valeurs peuvent être indiquées en px, em.
• position-y : en partant du même point de repère, vous vous en doutez, position-y concerne le décalage vertical de votre ombre portée. Si vous indiquez une valeur positive, l’ombre portée en bas ; une valeur négative affiche l’ombre en haut ; une valeur nulle équilibre l’ombre de la même manière en haut et en bas. Les valeurs peuvent être indiquées en px, em.
• flou : appelé en anglais blur radius, cette valeur permet de rendre notre ombre floue en lui appliquant un flou gaussien. Plus la valeur est grande, plus le flou de l’ombre sera diffus et l’ombre étalée.
• diffusion : appelé en anglais spread radius, cette valeur est une longueur qui permet d’étendre ou de rétrécir la taille de l’ombre. Cette valeur est optionnelle. Une valeur positive augmente d’autant la taille de l’ombre ; une valeur négative la rétrécit d’autant.
• couleur : il s’agit de la couleur de votre ombre portée. En ce moment, on voit pas mal d’ombres portées de couleur. Vous pouvez l’exprimer en hexadécimal ou en rgba si vous voulez y ajouter de la transparence. Si vous ne précisez rien, la couleur sera celle du texte.

A noter que si vous avez appliqué un border-radius à votre élément, la box-shadow en tiendra compte. Allez, passons à la pratique !!

Exemples

Une fois que vous avez compris le fonctionnement, techniquement, vous pouvez multiplier les possibilités à l’infini mais bon, gardons les limites du bon goût 😉
Nous vous avons parlé de générateurs de box-shadow, en voici un : générateur.

Sachez qu’il est également possible de combiner des box-shadow avec des pseudo éléments pour avoir des effets non continus, des courbes au milieu d’un côté… C’est plus technique donc nous n’allons pas voir ça aujourd’hui mais si cela vous intéresse, notifiez-le nous en commentaires et nous ferons un article sur le sujet.