10 techniques CSS qui vont vous étonner

Quoi qu’il en soit, si beaucoup de développeurs web connaissent CSS, nombreux sont ceux qui ne maîtrisent pas l’emploi de fonctionnalités avancées de ce langage. Dans ce billet, je vous présente 10 astuces CSS qui risquent de vous étonner.

1. Les raccourcis CSS c’est le bien

En tant que développeur CSS, il vous est peut-être déjà arrivé par le passé de faire de la sorte :

font-family: verdana,sans-serif;
font-size: 1em;
font-weight: bold;
font-style: italic;
line-height: 1.5em;
font-variant: small-caps;

Et ben c’est pas cool du tout. Je dirais même que c’est nul. Les raccourcis CSS sont pourtant là dans le but vous évitez une homosexualité précoce ainsi que de perdre votre temps avec ces attributs. Il vous est tout à fait possible d’écrire :

font: bold italic small-caps 1em/1.5em verdana,sans-serif

ce qui aura exactement le même effet que le code précédent.

Petite note d’avertissement tout de même, pour que ce raccourci CSS fonctionne, il vous faut spécifier la valeur des attributs font-size et font-family à la fin de la ligne.

2. Combiner les classes

Nos politiciens l’ont rêvé, CSS l’a fait. Combiner les classes est tout à fait réalisable en CSS. Imaginez que vous possédiez dans votre feuille de style CSS deux classes, une nommée .rouge colorant le texte en rouge et une classe .centre qui aligne le texte au centre. Si vous voulez que le votre div appartienne aux deux classes, c’est-à-dire que le texte de votre div soit colorié en rouge et aligné au centre, vous faites comment ? Vous créez une nouvelle classe .centrerouge ? C’est nul.

Saviez-vous qu’il est tout à fait possible de faire ça :

<div class="centre rouge">texte de fou...</div>

Infiniment plus pratique, n’est-il pas ?

3. Les couleurs CSS

Celle-ci est un peu connue, mais je suis surpris que beaucoup ne l’emploient pas correctement. De nombreux développeurs sont amener à utiliser l’écriture hexadécimale pour afficher des couleurs spéciales. Pour le noir, on écrira #000000. Pour le blanc, #ffffff. C’est nul.
Saviez-vous qu’il était possible d’écrire, dans la plupart des cas, les formats des couleurs avec simplement trois caractères. Par exemple, #123 équivaut à #112233.
Attention cependant, pour que cela marche il est impératif d’être caucasien, autrement le système de reconnaissance facial de votre PC ne vous autorisera pas cette manipulation. Sans déconner, il faut que les deux caractères que vous factorisez en un seul soient identiques.

4. Imprimante et CSS

De nombreuses pages du web tentent de se rendre accessible à l’impression sur papier, via imprimantes tactiles. Honnêtement je trouve ça intéressant d’essayer de s’ouvrir à de nouveaux standards du web, mais là où ça blesse c’est dans l’exécution. Certains poussent l’infamie jusqu’à créer une seconde version de la page web simplement pour l’imprimante, en plaçant un lien vers cette page. C’est nul.

Il n’y a nul besoin de cela, vous pouvez très bien inclure deux feuilles de style CSS, une pour la navigation en browser l’autre pour l’impression.

<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" />
<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

Le fichier stylesheet.css sera ainsi pour la navigation et printstyle.css pour les imprimantes (ces salopes).

5. Les images et le CSS

Les images… ces salopes. De manière générale, je vous recommanderai de toujours utiliser l’affichage textuel et ses mises en formes, autant pour le SEO que pour l’accessibilité web. Ok, il y a l’attribut de texte alternatif présent lors de l’inclusion d’une image, mais de nombreuses études en référencement ont par le passé démontré que le texte alternatif d’une image était bien moins pris en compte que le texte traditionnel, notamment pour éviter le keyword stuffing.
Et malgré ça, il y a toujours des putain de sodomites qui s’amusent à présenter leurs titres… en images. C’est nul.

<h1><img src="bienvenue.png" alt="Bienvenue sur mon site tout pourri" /></h1>

C’est nul. Voici la bonne méthode, je ne vous détaille pas le code car j’ai confiance en vos capacités soit à le comprendre soit à vous satisfaire d’un résultat que vous ne saurez pas expliquer.

<h1>Bienvenue sur mon site trop bien</h1>
h1
{
background: url(bienvenue.png) no-repeat;
height: image height;
text-indent: -2000px
}

Et voilà pour cette fois… Un nouveau billet sera publié prochainement où je vous présenterai les 5 astuces restantes. Pour accélérer le procédé de rédaction, vous avez la possibilité de m’envoyer des photos de vous – EDIT : si vous le prenez au premier degré, faites au moins gaffe à respecter la consigne – via twitter (si vous êtes de sexe féminin). Autrement vous pouvez effectuer une donation.

Voici 18 pages d’erreur 404 personnalisées.

I. Carrés de gris

Si je vous disais que les lettres A et B étaient sur la même couleur, vous me croiriez ?
Sans doute pas, et je vous l’accorde c’est assez difficile à admettre. Aussi, pour vous le prouver, il vous suffit d’ouvrir Adobe Photoshop et d’utiliser la pipette sur les deux carrés. #a9ac96 chacun.
Cette illusion est appelée “Color Vision Demonstration” et a été proposée par Hans Irtel en 1998, largement inspirée par l’échiquier d’Adelson (1995), vous pouvez d’ailleurs en avoir l’explication ici.

II. Sphère tournante

Dans quelle direction tourne cette sphère ?
Je ne sais pas pour vous, mais les premières fois que je regardais cette image, je voyais toujours la face de face (haha), tourner de gauche à droite.
Quel que soit le sens dans lequel vous voyez tourner cette sphère à première vue, sachez qu’il est possible de l’inverser à tout moment. Attention, risques de migraines importants.
Commençons. Vous constaterez qu’on peut facilement voir à travers la sphère tournante, de ce fait on peut tout aussi bien regarder la face de face (haha), ou la face de dos.
Pour inverser le sens de la sphère, il suffit de faire passer mentalement les points du dos sur la face, c’est plus difficile qu’il n’y paraît. Remarquez-vous un changement ?
Bon, comment je le remets à l’endroit maintenant ?

Avec un peu d’entraînement, il devient assez simple de passer d’un sens à l’autre.

Dans le même genre :

Fixez le centre sans bouger les yeux pendant une dizaine, ou un peu plus, de secondes.
Remarquez-vous quelque chose ?

Et encore un autre :

Fixez la croix pendant une dizaine de secondes.
On constate la disparition des cercles roses, et l’apparition d’un disque vert faisant le tour de la croix en laissant des traces roses…

III. Dr. Jekyll et Mr. Hide

Vu depuis la chaise, sans doute en face de l’écran, on remarque tout de suite que le moche est à gauche (je me souviens plus des noms) et que le normal est à droite.
Maintenant reculez d’un bon mètre, voir un mètre cinquante. Quelque chose a changé ?

IV. Size Matters

Voyez-vous ces véhicules Ford Explorer de différentes tailles ?
Ben en fait elles ont toutes la même taille, cette image est basée sur l’illusion d’Ebbinghaus.

Illusion similaire.

Ces trois soldats ont tous la même taille, exactement la même.
Pour vous convaincre vous-mêmes, il vous suffit encore une fois d’ouvrir Photoshop et de les comparer.

Et voici l’originale :

V. Utilise la Force !

Le meilleur pour la fin, comme on dit.
À première vue, cette image n’a rien d’une illusion quelle qu’elle soit.
Mais fixez le point central, puis avancez et reculez votre tête. Vous voyez, c’est pas si difficile d’utiliser la force.

Au risque que l’on vous prenne pour un idiot, c’est un très bon moyen de faire passer le temps au boulot quand ils ont déjà bloqué Facebook, Twitter, les jeux en ligne, Youtube, MSN, Everest Poker, Wikia, Wikipedia, Grooveshark, Zlowtech (les enfoirés !), Yahoo, Google (à quand même), Bing, et tous les sites de pr0n.

Une grande partie de ces illusions d’optique furent trouvées sur un très bon site consacré aux illusions optiques, les autres sont le fruit de recherches personnelles.

I. Fond d’écran (@studio3k)

II. Fond d’écran

III. Fond d’écran

IV. Fond d’écran (gomedia.us / @Go_Media)

V. Fond d’écran (buzzmaven.com / @ scottclark)

VI. Fond d’écran (zlowtech.com / @Zlowtech)

VII. Fond d’écran (edwheeler.deviantart.com)

VIII. Fond d’écran (ronicasdesign.com / @ronicadesign)

IX. Fond d’écran (anousone.com / @anousone)

X. Fond d’écran

Et voici bien sûr le lien Mediafire pour le télécharger : télécharger les fonds d’écrans.
Bon, d’accord, c’était pas Mediafire.

Tous les fonds d’écrans sont dans les dimensions de l’écran de l’iPad, soit 1024×768 pixels. Cependant, pour ne pas faire de jaloux, certains fonds d’écrans seront adaptés à une utilisation verticale de la tablette tactile.

Voici le lien de téléchargement : télécharger les fonds d’écran iPad !
PS : J’utilise Uploading pour mes téléchargements, si vous voulez plus d’informations sur Uploading : comment gagner de l’argent avec Uploading.

Fonds d’écran Apple iPad

Une belle galerie pour enjoliver votre iPad, quand celui-ci sortira
Lequel préférez-vous ?

Avant même sa sortie officielle, je vous propose de découvrir 15 fonds d’écran du Windows Phone 7.
Les images sont simplement des aperçus, en taille réelle bien sûr. Pour tous les obtenir en format officiel, il vous suffit de télécharger l’archive qui se trouve tout en bas.

Et voici le lien pour tous les télécharger : Télécharger l’archive contenant les 15 fonds d’écran Windows Phone 7.
À savoir, ces fonds d’écran ont étés adaptés par ma main, et donc seront parfaitement compatibles avec les premières version du Windows Phone 7.