Comment faire du pixel art avec de la CSS ?

Si vous aimez le pixel art, je vous ai déjà présenté un tas d’éditeurs de pixels vraiment, vraiment cool. Je pense bien sûr à Pixelorama, LibreSprite ou encore Piskel.

Mais aujourd’hui, je vous propose d’aller encore plus loin en faisant du pixel art avec CSS. Alors bien sûr, vous pouvez le coder vous-même en précisant la couleur de chaque pixel, voire en l’animant comme dans l’exemple codepen ci-dessous.

Voir le Pen #divtober Bright Pumpkin par Ale (@pokecoder) sur CodePen.

Mais comme nous sommes gros paresseux développeurs, je vous suggère simplement de dessiner votre pixel art puis d’obtenir le code qui va bien. Pour ce faire, rendez-vous sur Pixel Art en CSS pour dessiner votre œuvre d’art. Vous pouvez choisir les couleurs, les pinceaux, revenir en arrière si besoin… etc. Rien de classique.

Mais ce qui est vraiment cool, c’est que vous pouvez également créer des animations avec plusieurs sprites. Ce qui donne un rendu très sympa comme ça :

Et oui, ce petit Père Noël a 2 caractéristiques uniques : Il est totalement en CSS et je l’ai conçu !

Le projet Pixel Art to CSS est développé à l’aide de React et vous pouvez trouver le code source ici.

A voir également  Avez-vous rencontré un endroit étrange sur votre peau? Voici les meilleures applications de dermatologie pour le diagnostic

Laisser un commentaire

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

Retour haut de page