Aller au contenu

Carte à reflet holographique

Une carte qui se soulève au survol pendant qu’un reflet irisé la traverse en diagonale, comme une carte holographique.

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

Description

Au survol comme au focus clavier, la carte se soulève et pivote d’un degré, son ombre s’allonge et un reflet rose, cyan et doré glisse en diagonale sur sa surface. Idéal pour une carte de fidélité, un abonnement ou une offre à mettre en valeur. Le reflet est un simple dégradé en fondu, masqué aux lecteurs d’écran, et le texte blanc garde un contraste AA sur le fond indigo. Avec prefers-reduced-motion, la carte ne bouge pas et le reflet apparaît sans glisser.

Code

Chargement du code…

Contenu de l'archive

effet-carte-reflet-survol-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

  • Une carte translucide et floutée posée sur des formes colorées qui flottent lentement derrière elle.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Le bas d’une section colorée découpé par trois vagues transparentes qui ondulent à des vitesses différentes.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Un titre qui s’écrit lettre par lettre derrière un curseur clignotant, en CSS seul.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Des étapes qui apparaissent en fondu et en glissant à mesure qu’on fait défiler la page, sans script.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant