Carte sombre à fines rayures sur laquelle un reflet arc-en-ciel apparaît et glisse en boucle au survol, au focus ou au toucher. CSS seul.
Mis à jour le
Cet effet est gratuit — la catégorie Distorsion en contient 31 au total, dont 5 gratuits. Effect.Labs regroupe 840 effets vanilla. Découvrir la catégorie →
Carte étudiante 2026-2027
Inès Morvan
Licence 2 · Géographie
Survolez ou touchez la carte : le reflet qui bouge montre au personnel qu'elle est active, pas une capture d'écran.
Prêts à la bibliothèque3 sur 10
Solde restaurant12,40 €
Accès aux salles7 h – 22 h
Livre-jeu · Tome I
Les Chroniques d'Ombrevaine
Édition collector
Édition collector numérotée
400 paragraphes numérotés, une carte de la ville à déplier et deux dés en métal. Couverture en film holographique, tirée une seule fois.
Plus que 37 exemplaires sur 500
Commande · étape 2 sur 3
La carte .hlc-card (280 × 180 px) a un fond en dégradé bleu nuit et deux calques posés par-dessus son contenu. Le pseudo-élément ::after trace des rayures horizontales très légères (blanc à 3 %, une ligne sur deux de 2 px). Le pseudo-élément ::before porte un dégradé à 125° rose, cyan, jaune, vert et violet, deux fois plus grand que la carte, invisible au repos.
Au survol, ou quand la carte (ou un élément à l'intérieur) reçoit le focus, ce calque apparaît en 0,3 s et l'animation hlcShift le fait glisser en diagonale en 3 secondes, en boucle. Il est mélangé en mix-blend-mode: color-dodge : les couleurs éclaircissent ce qui est dessous, comme un film holographique qui accroche la lumière.
Tout ce que vous mettez dans la carte passe sous le reflet, à condition de ne pas lui donner de position : un enfant positionné passerait au-dessus des calques et ne serait pas irisé.
tabindex="0" ; le focus allume le reflet et affiche un contour (--hlc-ring) quand il vient du clavier. Si la carte contient un lien ou un bouton, retirez le tabindex : le reflet s'allume aussi quand cet élément a le focus (:focus-within).prefers-reduced-motion: reduce, le reflet apparaît toujours mais reste immobile, au milieu de son dégradé.color-dodge éclaircit fortement le texte et le fond quand le reflet est allumé, plus encore dans Safari (mesuré dans WebKit). Gardez un texte blanc et gras sur la carte, et vérifiez sa lisibilité reflet allumé.CSS seul, aucun JavaScript. Mesuré dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : 0 erreur, deux copies indépendantes, survol, Tab, toucher, 390 px et mouvement réduit. Dans WebKit, le color-dodge donne des couleurs nettement plus vives et saturées que dans Chromium et Firefox. Versions minimales d'après @mdn/browser-compat-data : la propriété inset des calques fixe le plancher (Chrome 87, Firefox 66, Safari 14.1).
Sans inset, remplacez-le par top:0; right:0; bottom:0; left:0 sur les deux pseudo-éléments. Sans :focus-visible (avant Safari 15.4), le contour de focus ne s'affiche pas mais le reflet s'allume quand même au focus.
Copiez les deux blocs (HTML et CSS) dans votre page. Aucun JavaScript, aucune dépendance.
<div class="fx-0261-root">
<div class="hlc-card" tabindex="0">HOLO CARD</div>
</div>.fx-0261-root,.fx-0261-root *,.fx-0261-root *::before,.fx-0261-root *::after{box-sizing:border-box}
.fx-0261-root{--hlc-w:280px;--hlc-h:180px;--hlc-radius:16px;--hlc-c1:#1a1a2e;--hlc-c2:#16213e;--hlc-font:1.25rem;--hlc-speed:3s;--hlc-ring:#0ff;--hlc-bg:#0a0a0f;--hlc-min-h:280px;display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--hlc-min-h);position:relative;background:var(--hlc-bg);color:#fff;font-family:sans-serif}
.fx-0261-root .hlc-card{width:var(--hlc-w);max-width:100%;height:var(--hlc-h);background:linear-gradient(135deg,var(--hlc-c1) 0%,var(--hlc-c2) 100%);background-color:var(--hlc-c1);border-radius:var(--hlc-radius);position:relative;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--hlc-font);outline:none}
.fx-0261-root .hlc-card::before{content:'';position:absolute;inset:0;background:linear-gradient(125deg,transparent 0%,rgba(255,0,128,.3) 15%,rgba(0,255,255,.3) 30%,rgba(255,255,0,.3) 45%,rgba(0,255,128,.3) 60%,rgba(128,0,255,.3) 75%,transparent 100%);background-size:200% 200%;opacity:0;transition:opacity .3s;mix-blend-mode:color-dodge;pointer-events:none}
.fx-0261-root .hlc-card::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.03) 2px,rgba(255,255,255,.03) 4px);pointer-events:none}
.fx-0261-root .hlc-card:hover::before,.fx-0261-root .hlc-card:focus::before,.fx-0261-root .hlc-card:focus-within::before{opacity:1;animation:hlcShift var(--hlc-speed) linear infinite}
.fx-0261-root .hlc-card:focus-visible{outline:2px solid var(--hlc-ring);outline-offset:3px}
@keyframes hlcShift{0%{background-position:0% 0%}100%{background-position:200% 200%}}
@media (prefers-reduced-motion:reduce){.fx-0261-root .hlc-card:hover::before,.fx-0261-root .hlc-card:focus::before,.fx-0261-root .hlc-card:focus-within::before{animation:none;background-position:50% 50%}}CSS pur — aucun JavaScript requis.
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
--hlc-w et --hlc-h |
280px et 180px |
Taille de la carte ; la largeur ne dépasse jamais celle du conteneur. |
--hlc-c1 et --hlc-c2 |
#1a1a2e et #16213e |
Les deux couleurs du fond en dégradé (la première sert aussi de couleur unie de secours). Sur un fond clair, le color-dodge blanchit presque tout : gardez des teintes sombres. |
--hlc-speed |
3s |
Durée d'un passage du reflet. |
--hlc-radius |
16px |
Arrondi des coins ; accepte quatre valeurs (par exemple un dos de livre). |
--hlc-font |
1.25rem |
Taille du texte de la carte. |
--hlc-ring |
#0ff |
Couleur du contour au focus clavier. |
--hlc-bg et --hlc-min-h |
#0a0a0f et 280px |
Fond et hauteur minimale de la racine ; transparent et 0 pour poser la carte dans votre page. |
Il a sans doute une position (relative, absolute) : un enfant positionné passe au-dessus des pseudo-éléments. Retirez-la, ou acceptez que ce bouton reste hors du reflet, ce qui peut aussi aider à le lire.
Non : il glisse toujours en diagonale, au même rythme, quelle que soit la position du pointeur. Suivre la souris demanderait du JavaScript, que cet effet n'utilise pas.
Ajoutez une classe à la carte et reprenez pour elle la règle d'état actif : .fx-0261-root .hlc-card.is-on::before { opacity: 1; animation: hlcShift var(--hlc-speed) linear infinite }.
