Border Draw-On
Au survol, au focus ou au doigt, un trait de 3 px fait le tour de la boîte en quatre temps depuis le coin haut gauche, puis se retire quand l'état cesse.
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 .bdw-box contient quatre <span class="bdw-line"> vides, placés en absolu sur ses bords : bdw-top part du coin haut gauche avec une largeur nulle, bdw-right du coin haut droit avec une hauteur nulle, bdw-bottom du coin bas droit, bdw-left du coin bas gauche. Au repos, rien n'est visible : la boîte a le même fond que la page.
À l'état actif, chaque trait passe à 100 % de son côté en 0,4 s (courbe cubic-bezier(.65, 0, .35, 1)), avec des départs décalés de 0, 0,4, 0,8 et 1,2 s : le haut se trace de gauche à droite, puis le côté droit descend, le bas revient vers la gauche et le côté gauche remonte. Le cadre complet apparaît en 1,6 s, entouré d'une lueur box-shadow de 10 px. Quand l'état cesse, les traits se rétractent dans le même ordre, en commençant par le haut.
L'état actif réunit le survol, :focus-within (la boîte elle-même si c'est un lien ou un bouton, ou un champ, un lien, un bouton qu'elle contient) et la classe bdw-on, qu'un script de 0,8 Ko pose quand un doigt ou un stylet appuie sur la boîte et retire au prochain appui ailleurs. Couleur, épaisseur et durée d'un côté sont des variables CSS.
Accessibilité
- Traits muets : les quatre
<span>sont vides et marquésaria-hidden="true"; seul votre contenu est annoncé. - Le tracé sert d'indicateur de focus : posée sur un lien ou un bouton, la boîte se dessine au focus clavier, et son contour de focus par défaut est retiré (
outline: noneau:focus-visible). Gardez donc une couleur de trait bien contrastée avec le fond. Autour d'un champ de saisie, le cadre se trace dès que le champ est actif. - Toucher : un appui du doigt dessine le cadre (classe
bdw-on) et il reste jusqu'au prochain appui ailleurs, même dans WebKit qui n'a pas de survol. - Mouvement réduit : sous
prefers-reduced-motion: reduce, plus de tracé progressif ; le cadre entier apparaît et disparaît d'un coup. - Safari macOS : Tab n'atteint les liens que si le réglage du système l'autorise ; Option+Tab les atteint toujours.
Compatibilité navigateur
CSS (transitions de width et height, variables CSS, sélecteur :is() : Chrome 88, Firefox 78, Safari 14), plus 0,8 Ko de JavaScript pour le toucher. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : deux copies dont la 2e survolée seule, focus clavier par un lien contenu et par la boîte devenue lien, appui du doigt, 390 px sans débordement, mouvement réduit sans transition, 0 erreur.
Un navigateur sans :is() ignore les règles de l'état actif : la boîte reste sans cadre. Sans JavaScript, seul l'appui du doigt sur une boîte qui n'est ni un lien ni un bouton ne dessine rien.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0768-root">
<div class="bdw-box">
<span class="bdw-line bdw-top" aria-hidden="true"></span>
<span class="bdw-line bdw-right" aria-hidden="true"></span>
<span class="bdw-line bdw-bottom" aria-hidden="true"></span>
<span class="bdw-line bdw-left" aria-hidden="true"></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 |
|---|---|---|
Couleur du trait (CSS — --bdw-color) |
#6366f1 |
Teinte des quatre traits, réglée sur .fx-0768-root ou sur un parent. |
Lueur (CSS — --bdw-glow) |
rgba(99, 102, 241, .6) |
Couleur du halo de 10 px à l'état actif ; transparent pour un trait sans halo. |
Épaisseur (CSS — --bdw-width) |
3px |
Épaisseur des quatre traits. |
Durée d'un côté (CSS — --bdw-speed) |
.4s |
Chaque côté prend cette durée et attend que le précédent soit fini : le tour complet dure quatre fois la valeur. |
Taille de la boîte (CSS — width / min-height de .bdw-box) |
200 px de large, 120 px de haut au moins | Les traits sont en pourcentage : ils suivent toutes les tailles. |
État actif forcé (HTML — classe bdw-on sur .bdw-box) |
absente | Garde le cadre tracé, par exemple pour l'onglet ou le projet en cours ; l'ajouter ou la retirer rejoue le tracé. Le script ne retire que celle qu'il a posée au toucher. |
FAQ
border-radius à 4 px ou moins pour que le cadre épouse ses coins.left: 0 pour le haut, top: 0 pour la droite…) et dans l'ordre donné par son transition-delay. Échangez les ancrages (right: 0 au lieu de left: 0) et les délais pour changer le point de départ ou le sens.bdw-box sur le <a> de la carte, laissez les quatre <span> en premier et votre contenu après. Le survol, Tab et l'appui du doigt dessinent le même cadre, et le lien reste un lien ordinaire pour les lecteurs d'écran. Une racine .fx-0768-root par carte : le script du toucher ne prend que la première boîte de chaque racine.
