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)
Voir tous les articles de Eric
Le Point
31 commentaires pour "Étonnant : des logos et images célèbres réalisés entièrement en CSS"
1
olivier le 27 octobre 2011 à 10:21
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
mwea le 27 octobre 2011 à 10:26
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 !
le plus grand soucis serait en fait la compatibilité,puisque il existe encore trop de navigateur incapable de comprendre css3 correctement :/
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
3
Hugo le 27 octobre 2011 à 10:29
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
mwea le 27 octobre 2011 à 10:36
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
Antoine | 1point2vue le 27 octobre 2011 à 10:47
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
VisiteurLambda le 27 octobre 2011 à 11:28
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
VisiteurLambda le 27 octobre 2011 à 11:51
@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
Mwea le 27 octobre 2011 à 12:14
@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
O Wild le 27 octobre 2011 à 13:14
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
Guillaume L. le 27 octobre 2011 à 14:16
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
Henri256 le 27 octobre 2011 à 14:17
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
Dodutils le 27 octobre 2011 à 15:16
Sauf que ça marche ni sur FireFox ni sur Opera ni sur IE, mais à part ça tout va bien.
13
Khelios le 27 octobre 2011 à 18:48
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 !!!!!
14
Stefan le 27 octobre 2011 à 23:42
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 »…
15
Dodutils le 27 octobre 2011 à 23:46
@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.
16
DuMe le 28 octobre 2011 à 00:39
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!
17
Dodutils le 28 octobre 2011 à 09:56
@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.
18
Patrick le 28 octobre 2011 à 13:55
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 !
19
Stefan le 28 octobre 2011 à 17:29
Et voila…
Qu’est ce que je disait
20
Patrick le 28 octobre 2011 à 18:21
@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
21
faure le 28 octobre 2011 à 21:03
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
22
Mwea le 29 octobre 2011 à 01:22
@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.
23
fishhareng le 29 octobre 2011 à 08:39
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.
24
Mwea le 29 octobre 2011 à 11:50
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/d.....e-en-css3/
25
iamvdo le 3 novembre 2011 à 11:22
@Khelios: Et en plus, ça provient de là : http://www.css3create.com/Menu-Slides-avec-CSS3 sans aucun backlink…
26
Bennnoit le 10 novembre 2011 à 01:25
Impressionnant tout de même !
27
graphistebordeaux le 24 février 2012 à 15:32
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 !