Focus sur la propriété CSS3 Box-Shadow

Aujourd'hui, le BlogDuWebdesign vous propose de faire un point sur la propriete CSS box-shadow : son role, ses usages, le tout a travers quelques exemples simples.

Qu'est-ce que Box-shadow

Pour ceux qui ne connaissent pas encore cette propriété CSS, Box-Shadow sont un moyen en CSS de créer des ombres portées et internes. Vous en avez tous déjà vu, c'est une propriété centrale du "material design" qui fleurit partout depuis quelques années, et c'est aussi ce qui est utilisé pour créer cet effet d'ombrage sur les bords du site du BlogDuWebdesign.

See the Pen 3D Paper button effects by Ashley Nolan (@ashleynolan) on CodePen.

Si vous voulez en apprendre plus sur son utilisation "standard", je vous conseille la page suivante du site W3School.

Support navigateur

Commençons tout de suite avec ce sujet histoire de l'expédier, le support de Box-Shadow.

Comme vous pouvez le voir, la propriété est supportée à plus de 97% en France et 93% dans le monde, il n'y a guère qu'Opéra mini pour ne pas le gérer. De plus, étant un effet purement graphique, votre site devrait s'en passer sans soucis.

Cet excellent support le rend utilisable dans tous vos projets sans vraiment de risques, et ce même dans sa version sans préfixes.

Box-shadow et l'illustration CSS

Nous en venons maintenant à la partie intéressante de l'article, les choses non conventionnelles qu'il est possible de faire avec cette propriété. Regardez les deux exemples suivant, et gardez à l'esprit qu'ils ont etes fait avec un seul element HTML, et sans utiliser de before ou after.

See the Pen Box-shadow : exemples by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

L'exemple avec les carrés utilise une ombre portée, et l'exemple avec les cercles une ombre interne (qu'il est possible de définir en mettant "inset" avant de mettre les valeurs en pixels. Surtout, vous pouvez voir qu'il est possible de déclarer plusieurs ombres en même temps ! Cela peut permettre beaucoup de fantasiés dans les créations

Enfin, notez qu'il est tout à fait possible de déclarer en même temps des ombres internes et des ombres portées sur un seul et même element, comme vous pouvez le voir avec l'exemple suivant.

See the Pen Une lune en box-shadow by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Enfin, notez qu'il est possible de pousser le concept au plus loin, et de créer de véritables oeuvres pixel-art avec uniquement cette propriété CSS. Si ce sujet vous intéresse, un article lui est dédié : Découvrez le Pixel-art en CSS3 avec PICSSEL ART

Les limites de box-shadow pour l'illustration

Présenté comme ça, box-shadow pourrait sembler parfait, même mieux que les pseudos-éléments before et after. Malheureusement, cette technique a de nombreuses limitations qu'il est important de garder en tete avant de decider de l'utiliser.

Tout d'abord, il n'est pas possible de faire une autre forme que la forme de l'objet "principal" il n'est pas non plus possible de faire effectuer une rotation a cette forme, c'est un des points les plus contraignants de cette technique. Nous ne pouvons que changer sa taille.

Ensuite, il n'est pas possible de changer l'opacite ou le z-index des "ombres" séparément de celles de l'objet principal. Tout est forcément lié.

Enfin, l'animation poussée de ce genre d'éléments est un CALVAIRE. Ce mot n'est pas en majuscules pour rien, sachez que ce sera une des taches les moins agréables de votre vie si vous vous retrouvez à devoir créer des animations de mouvements complexes sur divers éléments.