Iridescent Surface
Un anneau fin aux reflets nacrés (rose, orange, turquoise) qui coulent en boucle autour d'un contenu : un mot, un chiffre, une photo de profil.
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 pastille .irs-ring est un disque peint d'un dégradé à 45° (rose #ff0080, orange #ff8c00, turquoise #40e0d0) trois fois plus grand que lui. L'animation irsFlow fait glisser ce dégradé d'un bord à l'autre puis le ramène, en 4 secondes : les teintes semblent couler le long du cercle.
Ce n'est pas un vrai trou : un pseudo-élément ::before recouvre le disque d'une pastille pleine de la couleur --irs-inner, en retrait de --irs-ring (4 px). Il ne reste visible que le liseré. Le centre doit donc avoir la couleur du fond sur lequel l'anneau est posé.
Tout ce que vous placez dans .irs-ring passe au-dessus de cette pastille et reste centré. Le mot fourni, .irs-text (« IRIS »), reprend le même dégradé découpé dans les lettres, animé en sens inverse. C'est du vrai texte dans le HTML : vous le changez sans toucher au CSS.
Accessibilité
- Texte réel : le mot central est dans le HTML (il était auparavant écrit dans le CSS, hors de portée des lecteurs d'écran). Une photo ou une icône placée au centre garde son propre texte alternatif.
- Mouvement réduit : avec
prefers-reduced-motion: reduce, les deux animations s'arrêtent ; l'anneau et le mot restent affichés avec le milieu du dégradé (mesuré : 4 animations en boucle → 0 pour deux copies). - Pas de clignotement : seules les teintes glissent, lentement (4 s par aller-retour), sans variation brusque de luminosité.
- Contraste : sur le fond par défaut
#0a0a0f, les trois teintes du mot atteignent 5,2:1 (rose), 8,5:1 (orange) et 12:1 (turquoise). Sur un fond clair, choisissez des teintes plus sombres. - Aucune interaction : rien ne réagit au survol, au clic ni au clavier ; l'anneau ne demande donc aucun équivalent tactile ou clavier.
Compatibilité navigateur
CSS seul, aucun JavaScript. Mesuré dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : 0 erreur, deux copies indépendantes, rien qui déborde à 390 px, animations coupées en mouvement réduit. Version minimale fixée par aspect-ratio (anneau qui reste rond quand il rétrécit).
Sans aspect-ratio, la pastille ne prend que la hauteur de son contenu et l'anneau devient ovale : ajoutez height:var(--irs-size) sur .irs-ring pour les navigateurs plus anciens.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0262-root">
<div class="irs-ring">
<span class="irs-text">IRIS</span>
</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 |
|---|---|---|
--irs-size |
250px |
Diamètre de l'anneau. Il ne dépasse jamais la largeur de son conteneur et reste rond. |
--irs-ring |
4px |
Épaisseur du liseré visible. |
--irs-c1, --irs-c2, --irs-c3 |
#ff0080, #ff8c00, #40e0d0 |
Les trois teintes du dégradé, utilisées par l'anneau et par le mot. |
--irs-inner |
#0a0a0f |
Couleur de la pastille qui couvre le centre : mettez celle du fond sur lequel l'anneau est posé. |
--irs-speed |
4s |
Durée d'un aller-retour des reflets. |
--irs-font |
1.5rem |
Taille du mot .irs-text. |
--irs-bg et --irs-min-h |
#0a0a0f et 300px |
Fond et hauteur minimale de la racine ; transparent et 0 pour poser l'anneau dans votre mise en page. |
Contenu de .irs-ring |
<span class="irs-text">IRIS</span> |
Remplacez le mot par un chiffre, une photo ronde ou une icône : tout enfant passe au-dessus du centre. |
FAQ
.irs-ring à la place de .irs-text. Elle passe au-dessus de la pastille centrale et l'anneau reste visible autour.--irs-inner, sombre par défaut. Donnez-lui la couleur exacte de votre fond (par exemple --irs-inner: #f5f0ea).--irs-size: 100% le fait suivre la largeur du conteneur, et sa hauteur suit grâce à aspect-ratio. Pensez à --irs-min-h: 0 pour que la racine n'impose plus 300 px.
