Aller au contenu

Tampon qui se pose

Un suivi de dossier en trois étapes où un tampon « Validé » vient se poser sur chaque carte quand elle arrive à l’écran.

  • Tailwind
  • React
  • CSS
  • WordPress
Ouvrir dans un nouvel onglet

Description

Chaque étape du suivi est une carte ; quand elle entre à l’écran, un tampon encreur (« Reçu », « Vérifié », « Validé ») descend en tournant et se pose de biais, comme sur un vrai dossier. Idéal pour un suivi de commande ou de démarche, une page de garanties, un parcours d’adhésion ou un récapitulatif de certifications. L’effet suit le défilement grâce aux animations CSS liées à la vue (animation-timeline), avec un court script de relais dans les navigateurs qui ne les connaissent pas encore (Firefox), et le tampon apparaît d’un coup, jamais à moitié transparent. Le statut est écrit en toutes lettres dans chaque carte, si bien que le tampon décoratif est masqué aux lecteurs d’écran. Contraste AA en clair comme en sombre. Avec prefers-reduced-motion, les tampons sont posés d’emblée.

Code

Chargement du code…

Contenu de l'archive

effet-tampon-apparition-html-tailwind.zip3 fichiers · 5 Ko

  • index.html8 Ko
  • README.md3 Ko
  • LICENSE.md1 Ko

Mots-clés

Mis à jour le 18 octobre 2026.

Dans le même esprit

  • Un paysage de montagnes en plusieurs plans qui glissent à des vitesses différentes pendant le défilement.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Un ciel de lever du jour où des nuages dérivent lentement derrière le titre et le texte d’accroche.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Un bandeau de fête où des confettis de couleur tombent en tournoyant derrière l’annonce.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Un article de blog surmonté d’une fine barre qui se remplit à mesure que l’on avance dans la lecture.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant