Shine Effect
Reflet lumineux semi-transparent qui traverse la carte en diagonale au survol — pur CSS, pseudo-élément ::before et transition sur translateX, zéro JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Cartes comprend 41 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose entièrement sur le pseudo-élément ::before de .card-shine. Ce pseudo-élément est surdimensionné à 200 % × 200 % de la carte (top: -50%; left: -50%; width: 200%; height: 200%) et porte un linear-gradient(to right, transparent 0, rgba(255,255,255,.1) 50%, transparent 100%) — une bande blanche centrale qui s'estompe de part et d'autre. Pivoté à 45° par rotate(45deg), ce dégradé horizontal devient une bande diagonale qui traverse la carte de coin en coin quelle que soit sa taille.
overflow: hidden sur .card-shine sert de fenêtre de découpe : le pseudo-élément dépasse largement les bords de la carte, mais seule la portion dans ses limites est visible. À l'état de repos, transform: rotate(45deg) translateX(-100%) place le pseudo-élément hors champ à gauche — le translateX s'applique dans le repère pivoté, donc selon l'axe diagonal. Au survol, transform: rotate(45deg) translateX(100%) le déplace de l'autre côté ; transition: transform .6s anime ce décalage et produit le glissement lumineux.
Trois variables CSS (--bg-card, --border, --radius-xl) centralisent le thème de la carte. Aucune librairie externe, aucun script : ajouter la classe card-shine à n'importe quel élément avec position: relative et overflow: hidden active l'effet immédiatement, sans configuration.
Accessibilité
- prefers-reduced-motion absent : aucun bloc
@media (prefers-reduced-motion: reduce)n'est présent dans le code fourni — l'animation se déclenche même si l'OS signale une préférence pour réduire le mouvement. Pour la conformité WCAG 2.3, ajoutez@media (prefers-reduced-motion: reduce) { .card-shine::before { transition: none; } }. - L'effet est déclenché exclusivement par
:hover— sur écran tactile (iOS, Android) l'événement ne se produit pas au toucher, la carte s'affiche dans son état statique sans aucune erreur. - Le pseudo-élément
::beforeest purement décoratif : il est absent de l'arbre d'accessibilité et invisible aux lecteurs d'écran. - La structure de la carte ne définit aucun attribut ARIA par défaut — la sémantique (rôle, label, état) est portée par le contenu que vous placez à l'intérieur.
- Contraste : le reflet blanc à 10 % d'opacité est négligeable sur le texte sous-jacent. Si vous augmentez l'opacité au-delà de 25 %, vérifiez le ratio de contraste WCAG AA lors du passage du reflet.
Compatibilité navigateur
Requiert uniquement CSS Transitions et les pseudo-éléments — supportés partout depuis de nombreuses années. Zéro dépendance externe.
Sans support :hover (appareils tactiles) ou sans CSS Transitions, la carte s'affiche normalement dans son état statique — aucune erreur JS, aucun contenu masqué.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="card-demo card-shine">
<!-- Votre contenu : titre, prix, liste, image… -->
<h3>Titre</h3>
<p>Description courte</p>
<button>Action →</button>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| --bg-card | #12121a | Couleur de fond de la carte — remplacez par votre couleur brand ou un dégradé via la propriété background directement sur .card-shine. |
| --border | rgba(255,255,255,0.08) | Couleur et opacité du liseré de la carte — montez à rgba(255,255,255,0.20) pour un bord plus visible, passez à une couleur brand pour un encadrement coloré. |
| --radius-xl | 1rem | Rayon d'arrondi des coins — 0 pour des angles droits, 1.5rem pour des cartes très arrondies, 50% pour un rond (avec largeur = hauteur). |
| rgba(255,255,255,.1) dans ::before | 0.1 | Luminosité du reflet : .05 = très subtil, .2 = prononcé, .35 = vif. Vérifiez le contraste texte au-delà de 0.25. |
| rotate(45deg) dans transform | 45deg | Angle du reflet : 30deg pour plus horizontal (reflet doux plat), 60deg pour plus vertical, 0deg pour un balayage purement horizontal de gauche à droite. |
| transition: transform .6s | .6s | Durée du balayage : .3s = flash vif, 1s = glissement cinématique lent. Ajoutez ease-out pour un freinage naturel en fin de course. |
FAQ
card-demo et card-shine à votre élément et de copier le CSS. Aucune dépendance, aucun script. Compatible Angular, React, Vue, Svelte : appliquez simplement les classes sur l'élément conteneur dans votre template.:hover ne se déclenche pas au toucher sur iOS et Android. La carte s'affiche dans son état statique, sans aucune erreur. Pour un retour tactile, combinez avec un état :active ou une animation déclenchée au :focus.::before avec transform crée son propre contexte d'empilement et s'affiche au-dessus du contenu de flux. À 10 % d'opacité c'est visuellement négligeable. Pour le maintenir derrière le texte, ajoutez z-index: -1 sur .card-shine::before et un z-index non-auto sur .card-shine.
