Astuce CSS : une seule image, plusieurs états possibles

Ce matin en relevant mon courrier, je tombe sur un mail de Puppygames m’annonçant la sortie de leur nouveau jeu, Droid Assault¹.

En allant sur leur site voir de quoi il retourne, je m’aperçois par hasard que les images formant les titres sont conçues étrangement. En effet, au lieu d’une image avec des lettres oranges sur fond transparent ou blanc, on a affaire à un masque blanc dans lequel les lettres sont découpées.

«Pourquoi faire simple quand on peut faire compliqué ?», me direz-vous. Eh bien, pour économiser de la bande passante.

En effet, l’idée consiste à définir la couleur du calque du dessous via CSS. On peut alors jouer sur les couleurs pour les différents états (:hover, :visited, etc) simplement en précisant un code hexadécimal différent.

Le fond orange est défini via CSS

L’approche est intéressante car elle évite d’utiliser une image supplémentaire pour le survol par exemple. Elle est toutefois limitée, puisque la transparence impose l’utilisation du format GIF ou PNG.

1. Je n’aime pas beaucoup le principe de transfert entre droïdes dans ce jeu. Je dois avouer que je m’attendais à quelque chose de plus prenant de la part des créateurs de Titan Attacks ! ↩