Du pixel art en CSS avec box-shadow

La propriété box-shadow

Cette propriété, introduite avec CSS3, permet habituellement d’ajouter une ombre portée facilement. Voici la syntaxe habituelle :

box-shadow <offset-x> <offset-y> <blur> <color>;

Il existe des paramètres supplémentaires, plus rarement utilisés et qui ne nous intéressent pas ici. Je vous invite à passer voir les spécifications du W3C pour tous les détails.

Le pixel art

Commençons par créer un pixel… ok, un gros pixel :

div {
  width: 50px;
  height: 50px;
  background: #00c3d4;
}

Ajoutons une petite ombre :

div {
  width: 50px;
  height: 50px;
  background: #00c3d4;
  box-shadow: 3px 3px 5px #656565;
}

Supprimons l’effet de flou en passant le paramètre blur à 0px :

div {
  width: 50px;
  height: 50px;
  background: #00c3d4;
  box-shadow: 3px 3px 0px #656565;
}

Il faut à présent décaler cette ombre pour qu’elle ne chevauche plus notre pixel :

div {
  width: 50px;
  height: 50px;
  background: #00c3d4;
  box-shadow: 50px 50px 0px #656565;
}

Et enfin, là ou l’astuce se fait… Nous pouvons cumuler les ombres. Chaque ombre ajoutée va donc nous permettre de dessiner un pixel supplémentaire :

div {
  width: 50px;
  height: 50px;
  background: #ffa87c;
  box-shadow:
    50px 0px 0px #ff6b42,
    0px 50px 0px #d44800,
    50px 50px 0px #c02600;
}

Pour la suite, un modèle et de la patience feront l’affaire ! Notez au passage que, même avec un background: none, vous ne pourrez pas afficher d’ombre aux coordonnées {0;0}. Pour éviter de faire un cas spécifique pour ce pixel, je démarre mon dessin en position {1;1}.

Le résultat

div {
  width: 10px;
  height: 10px;
  background: transparent;
  box-shadow:
    90px 10px 0 rgb(0, 52, 206),
    100px 10px 0 rgb(0, 52, 206),
    /* … */
    200px 390px 0 rgb(1, 0, 0),
    210px 390px 0 rgb(1, 0, 0);
}

Liens

Démonstration
Spécifications de la propriété box-shadow
Un générateur de box-shadow pour les fainéants