Oil Slick
Des reflets d'huile sur l'eau : quatre taches de couleur très floues qui gonflent, se rétractent et tournent lentement dans une carte sombre.
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 carte .osk-slick (300×200 px, coins de 20 px, fond #111) cache ce qui dépasse. Par-dessus son contenu, un pseudo-élément ::before empile quatre dégradés radiaux à 40 % d'opacité : rose en haut à gauche, vert d'eau en haut à droite, jaune en bas, violet à droite. Un flou de 20 px les fond les uns dans les autres.
L'animation oskFlow fait respirer ce calque en 8 secondes : il grossit à 120 % en tournant de 10°, redescend à 90 % en tournant de −10°, puis revient. Les taches se déplacent donc ensemble, sans jamais se séparer, comme une flaque irisée qui bouge.
Le texte de la carte reste sous les couleurs : il est teinté par elles, ce qui fait partie du rendu. Le calque ne capte pas les clics (pointer-events: none) : vous pouvez mettre la classe .osk-slick sur un lien ou un bouton.
Accessibilité
- Texte réel : « OIL SLICK » est dans le HTML et se lit normalement ; les couleurs ne sont qu'un fond.
- Mouvement réduit : avec
prefers-reduced-motion: reduce, le calque s'arrête dans sa position de départ ; les quatre taches restent visibles (mesuré : 2 animations en boucle → 0 pour deux copies). - Lisibilité : le texte blanc passe sous des couleurs à 40 % ; gardez un texte gras et assez grand, ou baissez l'opacité des teintes si vous écrivez en petit.
- Aucune interaction propre : l'effet ne réagit ni au survol ni au clavier. Posé sur un lien ou un bouton, c'est cet élément qui gère le focus et l'activation.
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, calque immobile en mouvement réduit. Version minimale fixée par la propriété inset.
Sans filter: blur(), les quatre taches restent nettes, en disques dégradés ; la carte et son texte s'affichent normalement.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0265-root">
<div class="osk-slick">OIL SLICK</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 |
|---|---|---|
--osk-w et --osk-h |
300px et 200px |
Taille de la carte ; 100% la fait suivre son conteneur (elle ne dépasse jamais sa largeur). |
--osk-radius |
20px |
Arrondi des coins ; 0 pour un fond de section, la moitié de la hauteur pour un bouton en pilule. |
--osk-base |
#111 |
Couleur sous les taches. |
--osk-c1 à --osk-c4 |
rose, vert d'eau, jaune, violet à 40 % | Les quatre taches, dans l'ordre haut gauche, haut droite, bas, droite. Gardez une transparence pour qu'elles se mélangent. |
--osk-blur |
20px |
Flou des taches : plus fort sur une grande surface, plus faible sur un petit bouton. |
--osk-speed |
8s |
Durée d'un cycle complet (gonfle, se rétracte, revient). |
--osk-bg et --osk-min-h |
#0a0a0f et 300px |
Fond et hauteur minimale de la racine ; transparent et 0 pour l'intégrer à votre page. |
FAQ
.osk-slick sur un <a> ou un <button> dans la racine : le calque de couleurs laisse passer les clics. Retirez le soulignement ou la bordure par défaut de l'élément dans votre CSS.
