Présenter une histoire, une succession d’événements, bref toute une vie et pourquoi pas une navigation, telle est la raison d’être d’une timeline. Découvrez 7 astuces pour réaliser la votre en CSS.
Une timeline en CSS permet de se dispenser d’une image, difficilement évolutive dans un site web dynamique. En débutant avec le CSS, il n’est pas toujours aisé de « coder » sa propre timeline. Quelles balises HTML utiliser ? Quelles déclarations CSS à privilégier ? Utiliser ou non des images ? Quelques éléments de réponse avec les ressources suivantes :
Une timeline CSS basique, verticale
Pure CSS Timeline par MattBango
Une timeline CSS scrollable
Un exemple bien réalisé par Smashing Magazine
Un tutoriel bien complet par TutorialZine
Une timeline avec un tutoriel complet
Exemple et sources à télécharger par Eric Meyer
Un exemple avec le nouveau portfolio de Peter Cain, construit sur une timeline : petejcain.co.uk/