Rien de surprenant dans le code CSS, c’est simplement astucieux.

Il n’y a en fait que quatre balises de lien hypertexte « <a> » qui englobent chacun des personnage grâce à un identifiant CSS distinct (id= »tom ») qui permet de positionner une image en CSS ainsi qu’une bordure.

Voici le bloc concernant Tom :

<a href="#tom" id="tom">
	<span class="name">Tom Colicchio</span><br />
	One of the culinary world's most celebrated figures, Tom Colicchio returns as head judge for Top Chef: New York.
	<img src="images/tom_1.jpg" alt="Tom Pic" />
</a>

Une façon intéressante de se passer d’outils tels que Flash ou Javascript qui alourdissent considérablement le poids d’une page web.

L’effet est simple, propre et professionnel tout en préservant un code source respectueux des standards et agréable pour celui qui viendra fouiner dans votre code source

Pour essayer par vous-même c’est par ici.

Merci à Michael

Article original écrit par Mr Xhark publié sur Blogmotion le 04/03/2009 | 3 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons