Focus sur la propriété CSS3 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.

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

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.

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 êtes fait avec un seul élément HTML, et sans utiliser de before ou after.

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 des fantaisies 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 élément, comme vous pouvez le voir avec l'exemple suivant.

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. 

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 tête 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'opacité 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.