• inspiration

Inspiration pour intégrateurs #21 : Box-shadow et le pixel art

Publié le
Inspiration pour intégrateurs #21 : Box-shadow et le pixel art

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 Benjamin Sanchez

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *