Aller au contenu
Forge

Ruban promo qui brille

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

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

Description

Un ruban rouge posé en diagonale dans le coin de la carte annonce la remise, et un reflet lumineux le traverse trois fois après l’affichage pour attirer l’œil, puis s’arrête pour ne pas distraire la lecture. Le prix barré et le nouveau prix restent du vrai texte. Idéal pour une promotion, des soldes, un produit du moment ou une offre limitée. Seule la position du reflet est animée, sans image ni script, contraste AA en clair comme en sombre. Avec prefers-reduced-motion, le ruban est affiché sans reflet.

Code

Chargement du code…

Contenu de l'archive

effet-ruban-promo-brillant-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

  • 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

  • Badge « en direct »

    Gratuit

    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
    Composant