Inspiration pour intégrateurs #21 : Box-shadow et le pixel art
Vous souhaitez mettre votre solution en avant en haut de cet article ? Contactez-nous
La propriété box-shadow est une propriété CSS3 originellement prévu pour permettre de créer des ombres portées autour d'une boîte, d'une image ou d'un texte. Mais cette propriété est souvent détournée pour autre chose : le pixel art.
En effet, il est possible de préciser plusieurs box-shadow par élément. En utilisant cette technique, et en contrôlant avec précision le placement et la taille de chaque ombre, il est possible de "dessiner" une image en couleur à partir d'un simple élément.
Évidemment, cette technique a un gros inconvénient : elle demande beaucoup de répétitions et quelques calculs mathématiques assez fastidieux. C'est pourquoi beaucoup des exemples proposés reposent sur le Sass pour supprimer cette contrainte, en tirant profit des opérateurs mathématiques, des variables et des boucles.
Pour illustrer cette technique, je vous propose de découvrir 10 exemples de box-shadow pixel art simples à appréhender et à comprendre.
Box-Shadow Pixel Art
By
