Blog inspirant depuis 2008
  • Pin It

Ambiance Geek : 20 CSS qui vous donneront le sourire !

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 !

2-1

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.

3-1

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.

5951d7d6be882ac2ae3b2e68d482bb57

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…

8487446074_74b53af084

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.

css_puns_08-768x384

« Width » signifie « largeur » et le « overflow : visible » veut dire que l’on affiche tout ce qui dépasse…

css-pun-2-china-wall2

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.

css-puns-768x571

« 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 !

css-puns-funny-jokes-15

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…

css-puns-hulk

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)

Css-Puns-image-humour_2

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

css-puns-jokes-07-768x382

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.

css-puns-web-design-funny-jokes-4

Le ninja est habillé en noir (color :black), il est caché (visibility :hidden) et agit hyper rapidement (animation-duration : 0,00001 seconde !!!)

css-puns-web-design-funny-jokes-10

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.

css-puns-web-design-funny-jokes-14

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

css_puns_09-768x384

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 !!!

css-puns-web-design-funny-jokes-18

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

css-puns-web-design-funny-jokes-27

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.

Screen-Shot-2016-05-19-at-2.18.38-PM

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.

css-pun-leprechaun

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…

Screen-Shot-2016-05-19-at-2.21.15-PM

« 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

Laisser un commentaire