Voici un top 20 de petits bouts de CSS drôles : des jeux de mots qui vous feront assurément sourire. Et pour les plus néophytes d’entre nous sur ce langage, une petite traduction pour ne pas passer à côté de ce petit moment de détente !
En CSS, display : none signifie qu’on n’affiche pas l’élément sélectionné. Ici, cela veut simplement dire que tout ce qui passe dans le triangle des Bermudes disparaît.
En anglais, badass peut se traduire par « dur à cuire » : ici, on joue sur les mots entre les couleurs définies en hexadecimal (6 chiffres et/ou lettres) et l’acteur Chuck Norris.
Le premier est un jeu de mot avec « right » qui signifie « droite » en CSS et « a raison » en anglais dans le langage courant, combiné à « margin » veut dire « la marge ». Autrement dit, la femme a raison sans marge d’erreur ! Pour le deuxième, le « float » signifie « élément flottant » et le « none » que l’élément ne flotte pas, d’où le nom Titanic…
Ici, le code signifie littéralement, tant qu’on n’atteint pas le succès, on continue d’essayer… si on meurt, on arrête.
« Width » signifie « largeur » et le « overflow : visible » veut dire que l’on affiche tout ce qui dépasse…
Le « border-style » donne le style de bordure d’un élément, « solid », signifiant un trait plein. « Border » en anglais signifie également « frontière ». Autrement dit, on peut traduire ici le code par la frontière de la Chine est infranchissable.
« Invisibility-cloak » se traduit par « la cape d’invisibilité » : quand Harry Potter la met, il devient donc invisible (visibility : hidden) mais Alastor Moody, dit « mad-eye-moody » peut voir à travers la cape et il ne faut pas l’oublier, d’où le !important !
Les « illuminati » sont des intégristes catholiques. La position « absolute » en CSS fait référence à un élément qui a un positionnement en dehors du flux des autres éléments et que son positionnement n’évolue pas. Le « visibility : hidden » signifie caché, comme les illuminati qui œuvrent dans le secret…
Bruce Banner est un humain qui a donc la peau rose (pink), mais en 10 secondes, sa peau peut devenir verte quand il devient Hulk (transition cumulé à la couleur green)
« Border » signifiant « frontière » en anglais avec un « dashed » qui veut dire ici « en pointillé », cela veut dire que la frontière entre les USA et le Mexique est poreuse.
RIP veut dire « Rest In Peace », soit « repose en paix ». Avec un « bottom » négatif, l’élément se positionne vers le bas et la valeur « -6912px » correspond à 6 pieds. Autrement dit, ici, en langage CSS, on vous met 6 pieds sous terre.
Le ninja est habillé en noir (color :black), il est caché (visibility :hidden) et agit hyper rapidement (animation-duration : 0,00001 seconde !!!)
Les autobots sont les fameux robots gentils de la saga des Transformers. En CSS, « transform : translate3d() » signifie que l’on déplace un objet dans un espace tridimensionnel.
« Tower-of-pisa » se traduit par « Tour de Pise » et le « font-style :italic », que l’on attribue à la police de caractère en italique signifie donc que l’on penche l’écriture…
Le « width » indique la largeur d’une page web : elle fait au grand maximum 1800px de large : autrement dit, ici, la « mama » est très très très large !!!
« Height : 50% » signifie qu’un hobbit fait la moitié de la hauteur d’un humain ; avec le « #foot » signifiant « pied » en anglais, et un « width : 200% », cela veut dire le pied du hobbit est 2 fois plus large que le nôtre.
En CSS, le « :before » signifie « ce qui est avant l’élément sélectionné » : ici, ce qui est avant le big bang. Or comme le « content : » (le contenu) est vide, cela signifie qu’il n’y avait rien avant.
Le « push-up-bra » est un soutien gorge qui remonte la poitrine : ici, « margin-top :-25% », signifie qu’on remonte artificiellement l’élément de 25% et le « overflow :visible », que l’on montre tout ce qui dépasse.
Le leprechaun, de couleur verte (color:green ; ») ne mesure que 20 % de la taille d’un humain et le fait qu’il soit en « display : none ; » fait qu’il est invisible…
« Padding-bottom » signifie en CSS, l’espace laissé libre vers le bas : ici, on joue sur le « bottom » qui veut dire « les fesses » en anglais, avec la taille de ces dernières. La valeur « 9999 px » étant une très grosse valeur… comme Kim Kardashian ?!
Source : Le site webdesignledger.com