Rainbow Refraction
Une plaque de verre dépoli qui floute ce qu'il y a derrière, avec un arc-en-ciel conique qui tourne lentement à l'intérieur, comme la lumière dans un prisme.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Distorsion comprend 31 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La plaque .rfr-glass (250×150 px, coins de 20 px) a un fond blanc à 10 % et une bordure blanche à 20 %. La propriété backdrop-filter: blur(10px) floute tout ce qui se trouve derrière elle dans la page : photo, illustration, lumières.
À l'intérieur, un pseudo-élément ::before carré, deux fois plus large que la plaque et centré sur elle, porte un dégradé conique qui fait le tour du cercle chromatique (rouge, orange, jaune, vert, cyan, bleu, violet, rose). À 30 % d'opacité, il tourne d'un tour complet en 6 secondes (rfrSpin) ; la plaque coupe ce qui dépasse.
Ce disque est dessiné au-dessus du contenu, qui prend donc ses teintes. Pour garder un texte ou un bouton net, donnez à votre contenu position: relative et z-index: 1. Le disque laisse passer les clics. Réparation : il mesurait 150 % de la largeur et de la hauteur et laissait deux coins sombres en tournant ; il est désormais carré et couvre toute la plaque.
Accessibilité
- Texte réel : « REFRACT » et tout contenu placé dans la plaque restent du texte HTML lu normalement.
- Mouvement réduit : avec
prefers-reduced-motion: reduce, l'arc-en-ciel s'immobilise ; la plaque garde ses couleurs et son flou (mesuré : 2 animations en boucle → 0 pour deux copies). - Lisibilité : sous le disque à 30 %, un texte blanc gras reste lisible ; pour un texte courant ou une opacité plus forte, passez le contenu au-dessus du disque (
z-index: 1). - Aucune interaction propre : la plaque ne réagit ni au survol ni au clavier ; les liens et boutons placés dedans fonctionnent normalement, y compris au clavier.
Compatibilité navigateur
CSS seul, aucun JavaScript. Mesuré dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : 0 erreur, coins couverts, deux copies indépendantes, rien qui déborde à 390 px, disque arrêté en mouvement réduit. Versions minimales fixées par aspect-ratio (disque carré) et, pour Firefox, par backdrop-filter (le préfixe -webkit- est inclus pour Safari).
Sans backdrop-filter, ce qui est derrière la plaque reste net à travers son voile blanc ; l'arc-en-ciel tourne toujours.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0267-root">
<div class="rfr-glass">REFRACT</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
--rfr-w et --rfr-h |
250px et 150px |
Taille de la plaque ; 100% pour suivre le conteneur (jamais plus large que lui). Le disque couvre la plaque tant que sa hauteur ne dépasse pas 1,7 fois sa largeur. |
--rfr-radius |
20px |
Arrondi des coins. |
--rfr-glass et --rfr-edge |
blanc à 10 % et blanc à 20 % | Voile de la plaque et couleur de sa bordure. |
--rfr-blur |
10px |
Force du flou appliqué à ce qui est derrière la plaque. |
--rfr-rainbow |
.3 |
Opacité de l'arc-en-ciel. |
--rfr-speed |
6s |
Durée d'un tour complet du disque. |
--rfr-bg et --rfr-min-h |
#0a0a0f et 300px |
Fond et hauteur minimale de la racine ; transparent et 0 pour que le verre floute votre propre page. |
FAQ
--rfr-bg: transparent et posez la plaque sur une image ou un décor pour voir l'effet de verre.position: relative et z-index: 1 : il passe au-dessus de l'arc-en-ciel au lieu d'être teinté par lui.conic-gradient de .rfr-glass::before. Vous pouvez les remplacer dans le CSS, en gardant la même couleur au début et à la fin pour éviter une cassure.
