Double Line Border
Deux filets concentriques autour d'une boîte : sur l'intérieur, un arc rose et un arc cyan tournent en sens contraires ; sur l'extérieur, un arc violet.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La boîte .dlb-box (200 × 120 px, arrondi 12 px) est entourée de deux filets séparés par 1 px de fond. Le filet intérieur, 6 px, déborde de 3 px de chaque côté du bord ; le filet extérieur, 3 px, court entre 4 et 7 px à l'extérieur. Chaque filet est un calque en dégradé conique presque entièrement transparent, qui ne laisse voir qu'un arc de couleur ; des calques pleins de la couleur --dlb-fill (le fond de la boîte, l'intervalle d'1 px) recouvrent le reste, si bien que seuls les arcs sur les deux anneaux restent visibles.
Le filet intérieur porte deux arcs d'environ un cinquième de tour : un rose (::before) qui tourne dans le sens des aiguilles d'une montre, un cyan (::after) dans l'autre sens, un tour en 3 s chacun. Ils se croisent deux fois par tour. Le filet extérieur (.dlb-outer-ring) porte un arc violet plus long et plus fondu, qui tourne à l'envers en 4 s.
La rotation passe par l'angle de départ des dégradés, --dlb-a1 et --dlb-a2, déclarés avec @property comme de vrais angles : le navigateur peut alors les animer de 0 à 360°. L'effet est entièrement automatique : il ne réagit ni au survol, ni au clic, ni au focus.
Accessibilité
- Décor seulement : la boîte n'est pas interactive (pas de curseur de main, pas d'arrêt au clavier) et ses arcs n'ont rien à annoncer ; le texte ou l'image placés dedans restent lus normalement par les lecteurs d'écran.
- Mouvement réduit : avec
prefers-reduced-motion: reduce, les trois arcs s'arrêtent à trois endroits différents (rose en bas, cyan en haut, violet à gauche), pour que les deux filets restent visibles sans bouger. - État à dire en texte : si les arcs signalent une attente (appel qui sonne, recherche en cours), écrivez-le aussi : un
role="status"sur la boîte et une phrase comme « Recherche d'un adversaire… » suffisent. - Dans une carte cliquable : l'effet ne change pas au focus. Si vous mettez un lien ou un bouton dans la boîte, donnez-lui son propre style
:focus-visible.
Compatibilité navigateur
CSS seul, aucun JavaScript. Mesuré dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : les trois arcs sont visibles et tournent, deux copies indépendantes sur une page, 390 px sans débordement, et plus aucune animation en mouvement réduit. Versions minimales d'après @mdn/browser-compat-data : la rotation demande @property (Chrome 85, Firefox 128, Safari 16.4) ; les calques utilisent inset (Chrome 87).
Un navigateur qui ignore @property garde les dégradés valides grâce à un angle de secours dans var() : les deux filets s'affichent avec leurs arcs, sans rotation fluide (vérifié en retirant les règles @property dans Chromium).
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0769-root">
<div class="dlb-box">
<span class="dlb-outer-ring"></span>
<span class="dlb-outer-mask"></span>
<span class="dlb-inner-mask"></span>
Double Line
</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 |
|---|---|---|
--dlb-c1, --dlb-c2 |
#ec4899, #06b6d4 |
Couleurs des deux arcs du filet intérieur (sens horaire, sens inverse). |
--dlb-c3 |
#8b5cf6 |
Couleur de l'arc du filet extérieur. |
--dlb-speed |
3s |
Durée d'un tour des arcs intérieurs. |
--dlb-speed-outer |
4s |
Durée d'un tour de l'arc extérieur ; une valeur différente de la précédente évite que les arcs se retrouvent toujours au même endroit. |
--dlb-w, --dlb-h, --dlb-radius |
200px, 120px, 12px |
Taille et arrondi ; les deux filets suivent l'arrondi. Un arrondi égal à la moitié d'une boîte carrée donne un cercle. |
--dlb-fill |
#0a0a0f |
Fond de la boîte et de l'intervalle entre les filets : donnez-lui la couleur de la surface sur laquelle la boîte est posée. |
FAQ
@property et la syntaxe <angle>, elle devient animable, et le dégradé conique qui l'utilise tourne image par image.<span> s'affiche par-dessus les calques. Pour une photo ronde, prenez une boîte carrée avec --dlb-radius égal à la moitié de sa taille, et une image un peu plus petite que la boîte pour laisser voir le filet intérieur.--dlb-fill sur ce fond clair : c'est cette couleur qui masque l'intérieur de la boîte et l'intervalle d'1 px entre les deux filets. Choisissez alors des arcs assez foncés ou saturés pour ressortir sur le blanc.
