Découvrez le Pixel-art en CSS3 avec PICSSEL ART

Saviez-vous qu'il est possible de dessiner du pixel-art en full CSS ? Cela est possible grâce à une propriété CSS3 que l'on peut détourner de son rôle d'origine: box-shadow.

Le pixel-art : La théorie avec Box-Shadow

Box-Shadow est une propriété Css3 qui permet de créer un effet d'ombrage a un élément. Ses attributs sont la couleur de l'ombre, la position x et y de l'ombre, sa dilution et sa taille par rapport a l'élément original (il existe aussi un autre attribut mais il ne sert pas pour le propos d'aujourd'hui).

Un élément carré aura donc un ombre carré qui lui sera exactement identique (à l'exception de sa couleur) si sa taille et sa dilution sont égales à 0.

Là ou la magie opère est qu'il est possible de déterminer plusieurs ombres par élément. Il est donc possible de créer autant de "pixels" pour notre élément carré que nous le souhaitons, chaque pixel ayant une position x/y et une couleur définie.

Passer de la théorie a la pratique avec Pixcssel art 

Box-shadow c'est bien joli mais nous allons tout de même pas dessiner en notant les coordonnées de nos dessins pixels par pixels !

Pour simplifier la tâche, je votre propose de découvrir Pixcssel-art, une petite application web qui vous permet de créer de manière graphique vos dessins et récupérer directement le résultat en Css, ou même immédiatement dans codepen !

Choisissez tout simplement vos couleurs et en avant ! Tout résultat intéressant proposé en commentaire (Insérez simplement le lien codepen et votre twitter pour mettre à cote de votre réalisation) sera inséré dans cet article.

Quelques exemples sympathiques

Vos créations

@Atelier_Betoux

@dr_piou