Passer au contenu

Étonnant : des logos et images célèbres réalisés entièrement en CSS

A quoi bon encombrer ses pages web en y insérant des images au format JPG, GIF ou PNG quand on peut obtenir exactement le même résultat avec quelques lignes de code ?

A quoi bon encombrer ses pages web en y insérant des images au format JPG, GIF ou PNG quand on peut obtenir exactement le même résultat avec quelques lignes de code ?

C’est ce que proposent diverses démos réalisées par des virtuoses du CSS (Cascading Style Sheet – Feuilles de style en cascade), qui sont capables de reproduire logos et images célèbres en utilisant uniquement du code, sans aucun fichier graphique. Ainsi, l’image illustrant cet article est une capture au format JPG, mais l’original est en pure CSS. Étonnant, non ?

Une belle performance couplée à un exercice de style qui a aussi vocation à mettre en valeur le savoir-faire de certains créateurs et le côté artisanal (au sens noble) que peuvent avoir certains métiers du web. 

Cela étant, je doute que ce type de méthode soit adoptée par les masses et devienne mainstream, et ce pour deux raisons : il faut des centaines de ligne de code pour reproduire une image très simple, ce qui du point de vue de la productivité est simplement inenvisageable à l’échelle d’une agence web, et d’autre part je ne suis pas sûr que le poids et le temps de chargement de la page y gagne vraiment par rapport à un JPG de quelques kilooctets (mais je n’ai pas testé).

Pour voir ce que ça donne, quelques adresses :

Afin d’obtenir le meilleur rendu des images CSS contenues dans les liens ci-après, il est préférable d’utiliser Google Chrome.

(source)

📍 Pour ne manquer aucune actualité de Presse-citron, suivez-nous sur Google Actualités et WhatsApp.

Opera One - Navigateur web boosté à l’IA
Opera One - Navigateur web boosté à l’IA
Par : Opera
31 commentaires
31 commentaires
  1. Je ne suis pas sur qu’il soit plus léger d’utiliser du css qu’un image sachant qu’il faut énormément de code pour réaliser ca….en tout cas c’est une belle démonstration

  2. Pour avoir réalisé moi aussi ce genre de créations (logo twitter,chrome,Google+,…) j’peux t’affirmer que la différence de poids et de chargement est juste enormissime !
    Tu as raison sur le fait que cette technique ne pourrait pas etre utilisée par les sites grand public, mais tu n’utilise pas les bons arguments 😉 le plus grand soucis serait en fait la compatibilité,puisque il existe encore trop de navigateur incapable de comprendre css3 correctement :/

  3. En effet, générer des images en CSS reste lourd, et peut ralentir encore plus l’affichage de la page étant donné que les .css mettent du coup énormément de temps à se charger.
    Il faut bien faire attention à ne pas mettre le code générant ces images dans la feuille de style principale.

  4. Je précise que lorsque j’énonce la différence de poids c’est bien sur en faveur de CSS exemple :
    Un imac que j’ai réalisé en CSS pèse : 15ko pour n’importe quelle taille que je souhaite donc 15 ko pour du 2000 par 2000, par contre mon image de référence fait 275ko pour du 2000×2000.. et j’tiens a rappeler que le chargement des fichiers CSS se fait quasiment instantanément.. c’est les images appelées par celui ci qui sont longues a charger 😉

  5. Si ce n’est pas forcement utile pour le site de monsieur tout le monde, c’est une belle démonstration du savoir-faire de ces développeur (et un joli pied de nez à tous ceux qui galèrent à positionner un simple bloc de texte dans une page)

  6. Je crois que le svg est beaucoup plus à même d’être utilisé ici : il a réellement été conçu pour ça (cf les commentaires sur les perfs discutables du CSS), et des éditeurs d’images très puissants existent (inkscape).

  7. @mwea:
    Si l’affichage est quasi instantané chez toi, c’est bien parce que ton PC est puissant, et pas parce que le CSS est une “technologie” légère : il n’y a pas d’opération que peut faire plus rapidement une carte graphique que le plaquage d’un bitmap dans un contexte de rendu. Avec du CSS tu utilises les couches les plus hautes de ton navigateur pour le rendu (inspecteur dom, parser, validator, relative rendering …)
    C’est une belle performance, certes, mais ce n’est pas une “good practise” amha. (comme je disais, autant faire du svg, plus puissant, plus léger, et fait pour ça)

  8. @VisteurLambda Je ne pense pas que le facteur puissance influe énormément sachant que les tests sur mon smartphone vraiment pourri affiche extrêmement rapidement les créations CSS contrairement à leur modèle d’origine.
    De plus le second gros avantage de cette pratique est la diminution des requettes HTTP. J’avoue quand même que l’utilisation des SVG peut s’avérer utile. Pour moi il faut savoir combiner ces 3 technologies :
    – data URI
    – SVG
    – CSS
    Pour mettre fin aux images de plusieurs centaines de ko. 😉

  9. Utilisant du CSS3 a longueur de journée, je peux vous affirmer que des lignes de codes valent mieux qu’une insertion .jpg ou .gif !
    L’intérêt réel pour le moment, c’est pousser dans ses derniers retranchements le Css; mais même IE9, ayant intégré le css3; oublie les effets de dégradé etc… Comme le dit mwea le css3 n’est pas utilisable au sites grand public :/

  10. C’est joli oui, mais ça restera évidement dans le cadre de la démo. Comme ça a été précisé dans l’article, les “artisants du css” font cela pour exposer leurs compétences mais aussi pour montrer ce qu’il est possible de faire avec CSS3.

    @mwea, oui pour du 2000×2000 le css reste plus léger, mais dans la pratique les icônes ne pèsent que quelques ko. Et d’un point de vue sémantique, ça n’a aucun sens de remplacer une image par des dizaines de balises html vides.

    Les canvas html5 ou le svg ont plus de sens pour remplacer ce type d’images.

  11. Ce qui me fait quand même marrer, c’est que ce sont les aficionados des css qui critiquaient les tableaux imbriqués pour leur lourdeur. Mais, tout d’un coup, tiens, des centaines de lignes de code pour une icône, pas de problème de lourdeur.

    Donc, les tableaux imbriqués, ça ne devait pas être si lourd que ça finalement.

  12. Ce que je trouve bête dans tout cela, c’est qu’ils n’ont même pas pris la peine de mettre les balises en -moz- et en -o-

    Au final, on se retrouve avec un rendu niquel sur Chrome, et un désastre sur Firefox, sans aucune explication ni tentative de portage.

    Dans ce cas, il faudrait au moins indiqué “Made for Chrome” en plus visible, et bien précisé qu’il s’agit d’un partie prix, pas d’une contrainte technique.

    Je vois déjà la horde de troll disant que Firefox “n’est plus ce qu’il étais arriver”…

  13. @Khelios : très pmauvais rendu sous Opera, sans compter que cette animation bouffe 100% de CPU (chrome comme FF) sur un dual-core 1.8Ghz.

  14. Cette technique, lourde ou pas, présente un autre avantage, celui d’insérer une image dans un email sans pour autant être bloquée!

  15. @DuMe : j’insère déjà des images dans un e-mail sans être bloqué, c’est possible via une intégration sous forme de pièces-jointes directement dans l’e-mail.

  16. bluffant, en effet ! quant aux navigateurs sur Mac : Firefox en effet lit très mal ces images, alors que Google Chrome et Safari sont impeccables !

  17. @stephan

    il y a les balises et les fautes d’orthographe ! la technique et l’expression écrite… 😉

    Dans ce cas, il faudrait au moins indiquER « Made for Chrome » en plus visible, et bien précisER qu’il s’agit d’un partie prix (PARTI PRIX), pas d’une contrainte technique

  18. @faure
    Ce genre de service est inutile puisque le convertissage n’est absolument pas réfléchi, en effet, ils créent juste un tableau composée de cellule d’un pixel de largeur et de hauteur , et remplissent le background de la couleur de l’image. Donc la le code devient absolument illisible et monstrueusement lourd.

  19. Super impressionnant… C’est sûr que la rapidité ne doit pas y gagné beaucoup, mais c’est vraiment merveilleux ce que l’on peut faire actuellement avec le CSS.

  20. difficile travail d’adaptation : il faut passer de la tablette graphique au css3, ou alors faire des combos avec tout ça… ça évolue très vite en ce moment !

Laisser un commentaire

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