Timelines CSS – 7 astuces
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/
TP | Pearltrees
[…] Cet article est la traduction de CSS3 tooltips publié sur Red Team Design. 5 commentaires. Timelines CSS – 7 astuces. Présenter une histoire, une succession d’événements, bref toute une vie et pourquoi pas une […]
Développement | Pearltrees
[…] – CSS – PHP. Timelines CSS – 7 astuces. Présenter une histoire, une succession d’événements, bref toute une vie et pourquoi pas une […]
Ressources-dev | Pearltrees
[…] Link Effects. Timelines CSS – 7 astuces. Free HTML & CSS Code Snippets for Web Developers · CSSFlow. Best CSS Code Snippet Sites. 21 […]
CSS - Création Sites Web | Pearltrees
[…] Créer un menu vertical latéral en css II – Copier coller. Tutorial menu deroulant en css sans javascript. Menu déroulant – FrogWeb. Logos In Pure CSS. CSS Transitions. 16,.97,.82,.2) ✿ cubic-bezier.com. Image a gauche ou droite en alternatif visuel. CSS3 3D Transforms. Les transformations 3D en CSS3. Animations CSS. CSS3 Animations. Animation CSS et effet typographique 3D – Utiliser les transformations 3D CSS pour réaliser une animation sympa. 30 CSS Page Preload Animations. Timelines CSS – 7 astuces. […]