Aller au contenu
Forge

Badge « en direct »

Une carte d’émission avec un badge « En direct » dont le point blanc émet une onde qui se propage en continu.

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

Description

Le badge rouge « En direct » porte un point blanc d’où part une onde qui grandit et s’efface à chaque seconde et demie, le signal familier d’une diffusion en cours. Idéal pour une radio, un direct vidéo, un match, une vente aux enchères ou un événement en ligne. Le libellé reste un vrai texte, seule l’onde est animée (taille et opacité), sans image ni script, et elle est masquée aux lecteurs d’écran. Contraste AA en clair comme en sombre. Avec prefers-reduced-motion, le point reste fixe, sans onde.

Code

Chargement du code…

Contenu de l'archive

effet-badge-en-direct-html-tailwind.zip3 fichiers · 4 Ko

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

Mots-clés

Mis à jour le 18 octobre 2026.

Dans le même esprit

  • Titre en contour qui se remplit

    Gratuit

    Un grand titre en lettres creuses dont chaque mot se remplit de couleur de gauche à droite, l’un après l’autre.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant

  • Ruban promo qui brille

    Gratuit

    Une fiche produit barrée en coin d’un ruban de réduction sur lequel passe un reflet lumineux.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant

  • Icônes en orbite autour d’un logo

    Gratuit

    Une présentation d’intégrations où sept icônes tournent lentement sur deux orbites autour d’un logo.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant

  • Nuancier qui s’ouvre en éventail

    Gratuit

    Une carte d’offre surmontée d’un paquet de nuances qui s’ouvre en éventail au survol ou au focus clavier.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant