Un fantôme d’arcade, une borne miniature ou une enseigne aux couleurs électriques peuvent prendre forme dans un navigateur sans charger le moindre fichier graphique. Le pixel art avec HTML et CSS repose sur une idée simple : assembler des carrés, leur attribuer des couleurs et organiser leurs positions jusqu’à faire apparaître une silhouette reconnaissable. Cette technique transforme la feuille de styles en atelier d’art numérique, avec une précision qui rappelle les sprites des jeux rétro.
Pour une création web, l’intérêt dépasse le clin d’œil nostalgique. Une illustration sans image peut partager les couleurs d’une interface, changer d’échelle ou recevoir une animation directement dans le navigateur. Le projet présenté ici suit une petite salle d’arcade fictive, « Quartier Bonus », qui souhaite afficher un fantôme original sur son site : un personnage compact, lisible sur mobile et facile à personnaliser. La démarche passe par une grille de pixels, deux méthodes de construction et quelques règles de finition. Le résultat ne cherche pas à remplacer toutes les images du Web : il montre comment un dessin en CSS devient un composant graphique maîtrisé, plutôt qu’une accumulation de carrés difficile à maintenir.
🎮 En bref : réaliser un pixel art avec HTML et CSS
- 🎨 Préparer une silhouette sur une petite matrice permet de choisir les bonnes proportions avant de toucher au code. Une palette courte rend le personnage plus lisible.
- 🧱 Une grille CSS associe chaque case à un élément HTML : cette méthode facilite les corrections, mais augmente rapidement le nombre de nœuds dans la page.
- ✨ La propriété box-shadow dessine plusieurs carrés depuis un seul élément. Sans flou ni étalement, les ombres deviennent des pixels colorés aux positions précises.
- 📐 Adapter directement la taille des cellules préserve généralement mieux les contours qu’un agrandissement fractionnaire. Le conteneur doit réserver toute la place du dessin.
- ♿ Une animation discrète, une alternative textuelle adaptée et un contrôle sur mobile rendent l’illustration utilisable au-delà de son effet rétro.
Comment préparer une grille de pixels pour une illustration sans image ?
Le premier outil n’est pas une propriété de style, mais une décision graphique : quelle silhouette doit rester reconnaissable avec très peu de détails ? Pour Quartier Bonus, un fantôme constitue un bon point de départ, car son sommet arrondi, ses deux yeux et sa base découpée suffisent à évoquer un personnage.
Une petite résolution impose des choix francs. Sur une matrice de cinq colonnes et cinq lignes, chaque cellule occupe une part visible du dessin ; une modification isolée peut changer son expression ou déséquilibrer sa forme.
Choisir la résolution du pixel art avant les couleurs
Une matrice de huit cases sur huit contient 64 emplacements, tandis qu’un format de neuf sur huit en contient 72. Ces nombres décrivent des positions disponibles, pas nécessairement des carrés visibles : les espaces transparents participent eux aussi à la composition.
Pour un éclair de douze colonnes sur treize lignes, il faut prévoir 156 emplacements si chaque case possède son propre élément. Avec des cellules de dix pixels CSS, la surface correspondante mesure 120 pixels de large sur 130 de haut.
Cette cohérence évite un piège courant : déclarer un conteneur trop court pour les rangées réellement dessinées. Le navigateur peut laisser déborder le motif, mais les éléments voisins ne disposent alors pas de l’espace attendu.
Le fantôme de Quartier Bonus utilise une matrice plus modeste, de cinq sur cinq. Son corps occupe trois cases au sommet, toute la largeur dans la partie centrale et trois positions alternées sur la dernière rangée.
Construire une silhouette avec des formes géométriques simples
Le travail commence en noir et blanc, sans effets de lumière. Un motif qui fonctionne dans cette version possède déjà une structure solide ; les couleurs pourront enrichir son caractère plutôt que masquer une silhouette confuse.
Les formes géométriques deviennent ici un vocabulaire visuel : une bande horizontale élargit le personnage, deux carrés sombres créent un regard, une alternance de vides et de pleins suggère un drapé. Aucun arrondi réel n’est nécessaire pour produire une impression de courbe.
Pourquoi limiter volontairement les nuances ? Parce qu’un petit sprite doit être compris rapidement, parfois au milieu d’une interface chargée. Un corps clair, des yeux presque noirs et un fond violet offrent déjà une identité expressive.
La palette peut comporter une couleur principale, une couleur de détail et un accent facultatif. Pour une borne miniature, cet accent servirait à distinguer l’écran ; pour le fantôme, il pourrait signaler un état actif sans modifier le dessin entier.
Noter les coordonnées pour rendre le dessin reproductible
Chaque emplacement reçoit deux coordonnées : une colonne horizontale et une rangée verticale, comptées depuis zéro. La première case se trouve donc en position (0, 0), tandis que la dernière d’une matrice de cinq sur cinq correspond à (4, 4).
Avec une unité de dix pixels, la position (3, 2) devient un déplacement de trente pixels vers la droite et vingt vers le bas. Cette convention prépare directement l’écriture des ombres multiples, sans conversions improvisées pendant le développement.
Pixelorama, LibreSprite ou Piskel peuvent servir de brouillon visuel, même lorsque le résultat final n’utilise aucun fichier exporté. Une feuille quadrillée fonctionne également : l’objectif consiste à disposer d’un modèle clair, pas à multiplier les outils.
Pour distinguer dimensions d’affichage et dimensions physiques, le guide sur les relations entre pixels et centimètres apporte un repère complémentaire. Sur le Web, le pixel CSS reste une unité de référence : il ne correspond pas systématiquement à un point matériel de l’écran.
Une matrice préparée avec soin transforme les étapes suivantes en traduction technique, plutôt qu’en recherche graphique à l’aveugle.
Créer un dessin en CSS avec une grille et des éléments HTML
La méthode la plus directe consiste à représenter chaque emplacement par un élément. Le conteneur définit l’organisation, les enfants représentent les cellules, et leurs couleurs composent le personnage ; cette séparation rend la construction facile à comprendre dans les outils de développement.
Pour le petit fantôme, le balisage comporte un conteneur nommé « grille » et 25 éléments enfants portant la classe « cellule ». Les cases transparentes restent présentes, car leur absence déplacerait toutes les positions suivantes dans le placement automatique.
Définir une grille CSS régulière sans espacement
Le principe du balisage est le suivant : <div class= »grille »> contient exactement 25 occurrences de <div class= »cellule »></div>, puis se termine par </div>. Chaque occurrence représente une position, même lorsqu’elle n’a pas de couleur visible.
La feuille de styles peut commencer avec ces deux règles, à copier dans un fichier CSS :
.grille { –unite: 10px; display: grid; grid-template-columns: repeat(5, var(–unite)); grid-template-rows: repeat(5, var(–unite)); width: calc(5 * var(–unite)); height: calc(5 * var(–unite)); gap: 0; }
.cellule { width: var(–unite); height: var(–unite); background: transparent; }
Les cinq colonnes et les cinq rangées utilisent la même dimension. L’absence d’espacement empêche l’apparition de lignes entre les carrés, tandis que les dimensions explicites réservent la place exacte du motif.
CSS Grid remplace avantageusement un assemblage fondé sur des éléments flottants. Il exprime directement la structure recherchée et évite de dépendre d’un retour à la ligne provoqué uniquement par la largeur du conteneur.
Colorer les cellules avec le sélecteur nth-child
Le sélecteur :nth-child() utilise une numérotation commençant à un, contrairement aux coordonnées du brouillon. Pour une grille de cinq colonnes, la case située en colonne x et en rangée y correspond à l’enfant de numéro y × 5 + x + 1.
Le sommet du fantôme occupe donc les enfants 2, 3 et 4. Les trois rangées centrales couvrent les positions 6 à 20, et les pieds correspondent aux enfants 21, 23 et 25.
Les règles suivantes attribuent une teinte claire au corps, puis une couleur sombre aux deux yeux :
.cellule:nth-child(2), .cellule:nth-child(3), .cellule:nth-child(4), .cellule:nth-child(n+6):nth-child(-n+20), .cellule:nth-child(21), .cellule:nth-child(23), .cellule:nth-child(25) { background: #f8f4dc; }
.cellule:nth-child(12), .cellule:nth-child(14) { background: #181329; }
La dernière règle doit rester après celle du corps pour remplacer sa couleur aux emplacements des yeux. Les deux groupes possèdent ici une spécificité permettant à cette règle tardive de prendre le dessus sur les déclarations correspondantes.
Comprendre les avantages et les limites du HTML cellule par cellule
Dans l’inspecteur du navigateur, chaque carré peut être sélectionné séparément. Pour un atelier pédagogique ou un petit motif interactif piloté par des états CSS, cette visibilité facilite le diagnostic : une mauvaise couleur se corrige sans parcourir une longue liste de coordonnées.
La contrepartie apparaît lorsque la résolution augmente. Une composition de vingt cases sur vingt exige 400 enfants avec cette approche, même si une grande partie reste transparente ; plusieurs illustrations de ce type alourdissent alors le document.
La position des enfants fait aussi partie du dessin. Ajouter accidentellement un autre élément au milieu du conteneur décale les sélecteurs suivants et peut déplacer les yeux ou interrompre une bordure.
Pour Quartier Bonus, cette version sert surtout de prototype vérifiable. Les cellules ne portent ni texte ni interaction individuelle : elles sont des fragments visuels, pas 25 contrôles à présenter aux technologies d’assistance.
La grille explicite privilégie la lisibilité du montage ; lorsque seul le personnage complet compte, une construction plus compacte devient intéressante.
Le même modèle peut maintenant être conservé tout en supprimant les éléments correspondant aux cases. Les positions restent identiques, mais leur représentation passe du document à la feuille de styles.
Comment réaliser un pixel art avec box-shadow et un seul élément ?
La propriété box-shadow sert habituellement à créer une ombre autour d’un bloc. Avec un carré de départ, aucun flou et plusieurs valeurs séparées par des virgules, elle produit aussi une collection de carrés colorés disposés à des coordonnées choisies.
Le mécanisme ne déplace pas l’élément original. Chaque valeur ajoute une ombre dont la position dépend du décalage horizontal et du décalage vertical ; le bloc source reste exactement à son emplacement initial.
Transformer une ombre nette en pixel coloré
Une déclaration comme box-shadow: 10px 0 0 0 #f8f4dc; dessine une copie de la forme du bloc dix pixels à droite. Les deux zéros suivants définissent respectivement le rayon de flou et le rayon d’étalement.
Avec une largeur et une hauteur de dix pixels, cette ombre devient un carré de même taille. Un décalage horizontal positif va vers la droite, un décalage vertical positif descend ; les valeurs négatives produisent les mouvements opposés.
Le rayon d’étalement n’est pas une distance de placement : il agrandit ou réduit l’ombre. Pour un motif régulier, le conserver à zéro évite que les carrés se chevauchent ou laissent des interstices inattendus.
La couleur du bloc source peut rester transparente. Cette possibilité permet de placer le point d’origine dans une case vide, puis de dessiner uniquement les emplacements nécessaires à la silhouette.
Dessiner le fantôme complet avec des ombres multiples
Voici un balisage autonome pour la version compacte de Quartier Bonus. Le conteneur reçoit le rôle d’image et une description courte, tandis que le dessin lui-même sera porté par son pseudo-élément :
<div class= »sprite » role= »img » aria-label= »Petit fantôme rétro aux yeux sombres »></div>
La première règle réserve une surface de cinq unités sur cinq. Les variables regroupent la taille des cellules et les deux couleurs utilisées :
.sprite { –u: 10px; –corps: #f8f4dc; –yeux: #181329; position: relative; width: calc(5 * var(–u)); height: calc(5 * var(–u)); }
La règle suivante constitue le dessin complet. Chaque groupe de coordonnées représente une rangée, et chaque ombre conserve explicitement un flou et un étalement nuls :
.sprite::before { content: « »; position: absolute; top: 0; left: 0; width: var(–u); height: var(–u); background: transparent; box-shadow: var(–u) 0 0 0 var(–corps), calc(2 * var(–u)) 0 0 0 var(–corps), calc(3 * var(–u)) 0 0 0 var(–corps), 0 var(–u) 0 0 var(–corps), var(–u) var(–u) 0 0 var(–corps), calc(2 * var(–u)) var(–u) 0 0 var(–corps), calc(3 * var(–u)) var(–u) 0 0 var(–corps), calc(4 * var(–u)) var(–u) 0 0 var(–corps), 0 calc(2 * var(–u)) 0 0 var(–corps), var(–u) calc(2 * var(–u)) 0 0 var(–yeux), calc(2 * var(–u)) calc(2 * var(–u)) 0 0 var(–corps), calc(3 * var(–u)) calc(2 * var(–u)) 0 0 var(–yeux), calc(4 * var(–u)) calc(2 * var(–u)) 0 0 var(–corps), 0 calc(3 * var(–u)) 0 0 var(–corps), var(–u) calc(3 * var(–u)) 0 0 var(–corps), calc(2 * var(–u)) calc(3 * var(–u)) 0 0 var(–corps), calc(3 * var(–u)) calc(3 * var(–u)) 0 0 var(–corps), calc(4 * var(–u)) calc(3 * var(–u)) 0 0 var(–corps), 0 calc(4 * var(–u)) 0 0 var(–corps), calc(2 * var(–u)) calc(4 * var(–u)) 0 0 var(–corps), calc(4 * var(–u)) calc(4 * var(–u)) 0 0 var(–corps); }
Cette version contient 21 ombres : les quatre autres positions restent transparentes. Le sommet conserve ses deux coins vides, et la dernière ligne présente deux ouvertures qui suggèrent les plis du personnage.
Organiser les coordonnées pour garder une feuille de styles lisible
La longueur de la déclaration ne doit pas devenir un obstacle à la maintenance. Dans le fichier source, disposer une rangée par ligne et garder le même ordre de lecture que le brouillon permet de retrouver rapidement une erreur.
Les variables évitent aussi de remplacer chaque couleur séparément. Quartier Bonus peut créer une variante cyan en modifiant seulement –corps, sans réécrire les coordonnées ni toucher aux yeux.
Les ombres ne participent pas au calcul des dimensions du bloc. Sans le conteneur de cinq unités, le navigateur ne réserverait que l’espace du carré source, alors que l’illustration dépasserait largement cette surface.
Réduire le nombre d’éléments ne signifie pas supprimer tout coût de rendu. Le navigateur doit toujours peindre les formes : une centaine de personnages complexes peut demander davantage de travail qu’une petite image bien optimisée.
Les ombres multiples compactent le balisage, mais la clarté des coordonnées et la réservation de l’espace restent les véritables garanties d’un composant fiable.
Agrandir et animer le pixel art en CSS sans brouiller les contours
Une illustration terminée doit encore trouver sa place dans la page. Le fantôme peut sembler trop petit dans une bannière et trop imposant près d’un bouton ; sa dimension d’affichage doit donc rester réglable sans modifier sa structure.
Dans l’exemple précédent, –u commande simultanément la largeur d’un carré, ses déplacements et la surface réservée. Passer de dix à seize pixels agrandit le personnage de 50 à 80 pixels, tout en conservant exactement les mêmes proportions.
Choisir entre taille des cellules et transform scale
Modifier l’unité constitue une solution adaptée à un composant intégré dans une mise en page. Les dimensions du conteneur suivent automatiquement le changement, ce qui laisse aux textes et aux boutons voisins l’espace nécessaire.
La transformation transform: scale(2) double, elle, la taille visuelle sans doubler l’espace occupé dans le flux. Un dessin de 50 pixels paraît mesurer 100 pixels, mais sa boîte de mise en page reste inchangée.
Cette distinction explique certains chevauchements difficiles à comprendre. Pour utiliser une transformation, il faut prévoir un emballage suffisamment grand et choisir une origine de transformation cohérente, souvent le coin supérieur gauche.
Un facteur entier favorise généralement des contours nets lorsque les positions de départ sont elles-mêmes alignées. Des valeurs fractionnaires peuvent placer certaines limites entre les pixels physiques de l’écran et provoquer un adoucissement visible selon le rendu.
La propriété image-rendering: pixelated ne corrige pas ce problème sur des ombres CSS : elle concerne la mise à l’échelle des images, pas l’alignement de toutes les formes dessinées par le navigateur. Le bon réglage commence donc par les dimensions et les coordonnées.
Pour préparer aussi une déclinaison imprimée du personnage, consulter les repères de conversion entre dimensions numériques et format physique aide à distinguer taille à l’écran et résolution d’impression. Ces deux usages ne suivent pas les mêmes contraintes.
Créer un mouvement rétro avec des images-clés
Le fantôme de Quartier Bonus peut effectuer un petit flottement vertical. Une amplitude égale à une cellule respecte le langage graphique du dessin, tandis qu’une durée de deux secondes évite une agitation permanente.
La règle d’animation s’applique au pseudo-élément, ce qui laisse le conteneur immobile dans la mise en page :
@keyframes flottement { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(–u))); } }
.sprite::before { animation: flottement 2s ease-in-out infinite; }
Le déplacement continu produit un effet souple. Pour une cadence plus proche d’une animation d’arcade, remplacer ease-in-out par steps(2, end) donne un mouvement saccadé, réparti en paliers.
Un mouvement par paliers ne garantit toutefois pas, à lui seul, un alignement parfait. Avec deux étapes sur une amplitude de dix pixels, les déplacements intermédiaires restent entiers ; avec une amplitude impaire, un palier peut tomber sur une demi-unité.
Préserver le confort visuel et les transformations existantes
Une illustration en boucle doit tenir compte des préférences de mouvement réduit. Cette règle coupe le flottement tout en conservant le personnage et ses couleurs :
@media (prefers-reduced-motion: reduce) { .sprite::before { animation: none; } }
Si une transformation d’agrandissement est déjà appliquée sur le même élément, une animation définissant uniquement transform: translateY(…) peut la remplacer pendant sa lecture. Répartir le changement d’échelle et le déplacement sur deux niveaux différents évite ce conflit.
Il faut aussi prévoir une marge au-dessus du motif, car les transformations ne repoussent pas les éléments voisins. Un parent utilisant un débordement masqué pourrait couper le sommet pendant le flottement.
Une animation réussie respecte autant la grille graphique que l’espace disponible et le confort de lecture.
Une fois le mouvement réglé, le personnage peut être testé dans son contexte réel : fond de page, texte voisin, écran étroit et préférences d’affichage. C’est là que le petit exercice devient un véritable composant.
Intégrer une illustration sans image dans une création web accessible
Un sprite peut être techniquement réussi et mal fonctionner dans une interface. Le fantôme de Quartier Bonus doit rester identifiable sur le fond choisi, ne pas gêner la lecture et conserver un comportement cohérent quand la page change de taille.
La première question concerne son rôle : apporte-t-il une information ou seulement une ambiance ? La réponse détermine l’alternative textuelle, la place du composant et la manière de le présenter aux lecteurs d’écran.
Adapter l’accessibilité au rôle du dessin
Si le personnage représente l’identité de la salle d’arcade, une description courte sur le conteneur peut être pertinente. Le balisage fourni plus haut utilise un rôle d’image et un nom accessible pour présenter l’ensemble comme un seul objet.
S’il apparaît déjà à côté du texte « Quartier Bonus » et n’ajoute aucune information, le masquer aux technologies d’assistance avec aria-hidden= »true » évite une annonce redondante. Dans ce cas décoratif, le rôle d’image et la description ne sont pas nécessaires.
Les couleurs ne doivent pas porter seules un état fonctionnel. Un fantôme devenu vert ne suffit pas à annoncer une réservation confirmée : un texte explicite doit accompagner ce changement, avec une structure adaptée au message.
Le fond compte autant que la palette du personnage. Un corps crème disparaît sur une surface presque blanche ; une scène violette ou une bordure sombre redonne une séparation visible sans multiplier les détails internes.
Comparer les techniques selon le besoin réel
Le choix ne se résume pas au nombre de lignes de code. Une méthode doit correspondre à la fréquence des corrections, à la complexité du motif et à la quantité d’instances présentes sur la page.
| Technique | Atout principal | Point à surveiller | Usage adapté |
|---|---|---|---|
| 🧱 Grille et éléments enfants | Chaque case se repère facilement | Le nombre de nœuds augmente avec la résolution | Prototype, apprentissage, petit motif modifiable |
| ✨ Ombres multiples | Balisage compact et palette centralisée | Coordonnées longues et espace à réserver | Icône rétro, personnage décoratif, badge |
| 🎨 Dégradés à arrêts francs | Efficaces pour des bandes ou des motifs répétés | Lecture plus difficile pour une silhouette irrégulière | Damier, décor géométrique, arrière-plan |
Les dégradés constituent une troisième piste lorsque la composition repose sur des répétitions régulières. Des transitions placées au même point produisent des frontières nettes, mais un personnage asymétrique peut demander une superposition difficile à entretenir.
Pour une scène détaillée contenant de nombreux objets, une illustration CSS n’est pas automatiquement plus légère qu’un fichier graphique. Le poids du code, le travail de peinture et la facilité de correction doivent être évalués ensemble.
Tester le composant dans les conditions de navigation
Quartier Bonus peut utiliser une fiche de contrôle simple avant publication. Chaque vérification correspond à un problème concret : une coupure liée au débordement, un contour adouci par le zoom ou une animation conservée malgré une préférence de mouvement réduit.
- 🔍 Vérifier le dessin au zoom habituel et avec un agrandissement du navigateur, pour repérer les décalages ou les chevauchements.
- 📱 Examiner un écran étroit, avec les textes réellement utilisés et non un emplacement vide autour du motif.
- 🌗 Tester les fonds clairs et sombres prévus par le site, car une palette ne reste pas lisible dans tous les contextes.
- ♿ Activer la réduction des animations et vérifier que le personnage demeure visible, sans mouvement.
- ⚙️ Observer plusieurs instances simultanées dans les outils de performance avant de déployer un décor animé dense.
La maintenance bénéficie d’une séparation entre structure, palette et mouvement. Les coordonnées définissent la silhouette, les propriétés personnalisées portent son identité visuelle et les règles d’animation restent indépendantes.
Cette organisation facilite une évolution saisonnière sans reconstruire le composant. Le site peut adopter un corps cyan pour un tournoi ou une teinte orangée pour une soirée spéciale, tout en conservant les proportions déjà testées.
Le bon dessin en CSS n’est pas celui qui accumule les effets : c’est celui qui reste lisible, ajustable et fiable dans la page où il vit.
Questions fréquentes sur le pixel art avec HTML et CSS
Peut-on créer une illustration sans image et sans JavaScript ?
Oui. Une grille d’éléments colorés, des ombres multiples ou des dégradés à arrêts francs permettent de dessiner uniquement avec HTML et CSS. Les animations simples peuvent également utiliser des images-clés CSS.
Quelle méthode choisir pour débuter en pixel art CSS ?
Une petite grille facilite l’apprentissage, car chaque case peut être inspectée séparément. Pour une silhouette fixe, box-shadow permet ensuite de conserver le même dessin avec un balisage plus compact.
Pourquoi le dessin devient-il flou après agrandissement ?
Une mise à l’échelle fractionnaire ou des coordonnées non alignées peuvent placer les contours entre les pixels physiques de l’écran. Ajuster directement la taille des cellules et utiliser des déplacements entiers limite ce phénomène ; image-rendering ne règle pas le rendu des ombres CSS.
Le pixel art en CSS est-il toujours plus performant qu’une image ?
Non. Il évite un fichier graphique séparé, mais ajoute du code et du travail de rendu. Pour des motifs nombreux ou complexes, il faut comparer le poids transféré, le coût de peinture et la maintenance avec une image optimisée.
Comment rendre un personnage CSS accessible ?
Une illustration informative peut recevoir un rôle d’image et une description courte sur son conteneur. Un motif purement décoratif doit plutôt être masqué aux technologies d’assistance. Les animations doivent respecter la préférence de mouvement réduit.
0 commentaire