La Joconde recréée entièrement en CSS !

Le full-CSS se développe de plus en plus ces dernières années. Cette technique consiste (dans l’idéal) à remplacer toutes les images d’un webdesign par du CSS pur (en stylisant les bons éléments). Ça peut paraître un peu inutile comme ça, mais un webdesign full-CSS est normalement beaucoup plus léger (et donc rapide à charger) que son équivalent utilisant des images.

On avait donc déjà vu pas mal de créations en full-CSS, comme certains logos recréés, mais là, c’est une première : la Joconde, en pur CSS ! Il ne s’agit pas là d’une recréation classique car cette Joconde n’utilise qu’un seul élément, un seul div. L’image du célèbre portrait de Léonard de Vinci est en fait représentée par des « ombres » placées au bon endroit grâce à de multiples propriétés box-shadow (propriété qui a fait son apparition dans CSS3).

Bon, l’auteur ne s’est pas amusé à redessiner la Joconde elle-même en fait… En effet, il a utilisé une classe PHP qu’il a programmé lui-même et cette dernière lui permet d’obtenir le bon CSS à partir de n’importe quelle image. Cette classe, si elle vous intéresse, vous pouvez la retrouver sur GitHub mais vos pensées sont probablement les mêmes que celles du créateur de la classe en question : oui c’est totalement inutile.

Inutile car extrêmement lourd : tout le flou utilisé consomme énormément de ressources (forcément). Le résultat est sympa mais inutilisable dans un site quelconque. Enfin on saluera quand même le travail accompli et on notera que, comme le dit le tweet de Framasoft, le sourire de la Joconde est encore plus flou que d’habitude !