Suivez-nous

Internet

É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 ?

Il y a

le

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)

31 Commentaires

31 Commentaires

  1. Pingback: Des logos et images célèbres réalisés entièrement en CSS | Réseaux Sociaux, Google Chrome | Scoop.it

  2. olivier

    27 octobre 2011 at 10 h 21 min

    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

  3. mwea

    27 octobre 2011 at 10 h 26 min

    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 :/

  4. Hugo

    27 octobre 2011 at 10 h 29 min

    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.

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

  6. mwea

    27 octobre 2011 at 10 h 36 min

    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 😉

  7. Antoine | 1point2vue

    27 octobre 2011 at 10 h 47 min

    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)

  8. VisiteurLambda

    27 octobre 2011 at 11 h 28 min

    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).

  9. VisiteurLambda

    27 octobre 2011 at 11 h 51 min

    @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)

  10. Titouan Chary

    27 octobre 2011 at 12 h 14 min

    @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. 😉

  11. O Wild

    27 octobre 2011 at 13 h 14 min

    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 :/

  12. Guillaume

    27 octobre 2011 at 14 h 16 min

    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.

  13. Henri256

    27 octobre 2011 at 14 h 17 min

    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.

  14. Dodutils

    27 octobre 2011 at 15 h 16 min

    Sauf que ça marche ni sur FireFox ni sur Opera ni sur IE, mais à part ça tout va bien.

  15. Khelios

    27 octobre 2011 at 18 h 48 min

    Bonjour à tous, Voici quelques création en CSS3 LOGO et interface

    http://css3xy.com/

    Please view it with « Modern browser » Fx4+ or S4+, C9+ (Nop with IE)

    …Kill IE !!!!!

  16. Stefan

    27 octobre 2011 at 23 h 42 min

    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 »…

  17. Dodutils

    27 octobre 2011 at 23 h 46 min

    @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.

  18. DuMe

    28 octobre 2011 at 0 h 39 min

    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!

  19. Dodutils

    28 octobre 2011 at 9 h 56 min

    @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.

  20. Patrick

    28 octobre 2011 at 13 h 55 min

    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 !

  21. Stefan

    28 octobre 2011 at 17 h 29 min

    Et voila…
    Qu’est ce que je disait 🙂

  22. Patrick

    28 octobre 2011 at 18 h 21 min

    @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

  23. faure

    28 octobre 2011 at 21 h 03 min

    il existe un site qui le fait automatiquement apres inscription on a des essais gratuits apres c’est payant evidement mais marrant à essayer.
    http://www.imgtocss.com/login

  24. Titouan Chary

    29 octobre 2011 at 1 h 22 min

    @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.

  25. fishhareng

    29 octobre 2011 at 8 h 39 min

    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.

  26. Mwea

    29 octobre 2011 at 11 h 50 min

    Pour ceux que ça peut intéresser, voici un tutoriel qui vient de sortir sur la réalisation de ce genre d’icônes et logo :
    http://www.fr.livingtuts.com/developpement-web/realiser-une-icone-en-css3/

  27. Pingback: #FollowFridayLinks S01E02 | AS_Blog

  28. Pingback: Outils, services, sites à (re)découvrir 2011 S43 | La Mare du Gof

  29. iamvdo

    3 novembre 2011 at 11 h 22 min

    @Khelios: Et en plus, ça provient de là: http://www.css3create.com/Menu-Slides-avec-CSS3 sans aucun backlink…

  30. Bennnoit

    10 novembre 2011 at 1 h 25 min

    Impressionnant tout de même !

  31. graphistebordeaux

    24 février 2012 at 15 h 32 min

    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 de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Dernières news

Les bons plans

Les tests