Box-shadow et le pixel art

Le 03/07/2014

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 7 exemples de box-shadow pixel art simples à appréhender et à comprendre.