Glow Input
Le champ actif s'entoure d'un double halo indigo — un anneau net de 4 px et une lueur diffuse de 20 px — qui s'éteint dès qu'on passe à autre chose.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Formulaires comprend 20 effets, dont 2 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Au repos, .glw-input a un cadre fin de 1 px en rgba(99, 102, 241, .3), des coins de 10 px et un fond à peine teinté d'indigo. Rien ne dépasse de sa boîte.
La règle .glw-input:focus ajoute deux ombres séparées par une virgule dans box-shadow : 0 0 0 4px rgba(99, 102, 241, .2), un anneau plein sans flou qui épouse les coins arrondis, puis 0 0 20px rgba(99, 102, 241, .3), une lueur floue qui s'étale autour. Le cadre passe en même temps en #6366f1 plein. Une seule transition de 0,3 s sur toutes les propriétés fait monter et retomber l'ensemble.
Une ombre ne prend pas de place dans la mise en page : le halo déborde de 20 px environ sans pousser les éléments voisins, mais un parent en overflow: hidden trop serré le coupera. Le libellé .glw-caption au-dessus du champ est son nom visible. La racine .fx-0293-root n'est qu'un fond de démonstration.
Accessibilité
- Libellé : « Votre nom » est dans le
<label>qui contient le champ ; l'ancien texte d'exemple (« Cliquez pour voir le glow… ») a disparu au profit d'un vrai nom. - Formulaire :
name="name"etautocomplete="name", pour l'envoi et l'autoremplissage. - Visibilité du focus : sur fond sombre, le halo se voit bien ; sur fond blanc, un anneau à 20 % d'opacité et une lueur à 30 % deviennent pâles. Montez ces opacités (0,35 et 0,45 par exemple) si votre page est claire.
- Mouvement réduit : avec
prefers-reduced-motion: reduce, le halo apparaît et disparaît sans fondu. - Plusieurs champs : seul le champ qui a le focus brille, ce qui aide à suivre la progression au clavier dans une longue liste de questions.
Compatibilité navigateur
Ombres multiples box-shadow, transition et une variable de largeur : Chrome 49, Firefox 31, Safari 9.1. Contrôlé dans Chromium, Firefox et WebKit avec deux copies du champ (seule la seconde, cliquée, brille), au clavier, au toucher, à 390 px et en mouvement réduit. Dans les captures, le raccourci Ctrl+K, la frappe et le passage à la question suivante sont simulés par le script de chaque scène ; ce script n'est pas vendu avec l'effet.
Sans transition, le halo s'allume et s'éteint d'un coup. En mode de contraste forcé (Windows), les ombres sont supprimées : ajoutez outline: 2px solid transparent au focus pour qu'un contour système reste visible.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0293-root">
<label class="glw-field">
<span class="glw-caption">Votre nom</span>
<input class="glw-input" type="text" name="name" autocomplete="name">
</label>
</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 |
|---|---|---|
Anneau net (CSS — première ombre de la règle :focus) |
0 0 0 4px rgba(99, 102, 241, .2) |
Le 4e nombre est l'épaisseur. À 2 px l'anneau devient un liseré ; à 6 px, prévoyez de l'espace entre les champs. |
| Lueur diffuse (CSS — seconde ombre) | 0 0 20px rgba(99, 102, 241, .3) |
Le 3e nombre est le flou. Plus il est grand, plus le halo déborde ; vérifiez qu'aucun parent ne coupe avec overflow: hidden. |
| Couleur (CSS) | indigo 99, 102, 241 |
Présente quatre fois : cadre au repos, cadre au focus, anneau et lueur. Remplacez les quatre par la même teinte. |
Largeur (CSS — --glw-width) |
280 px | 100% pour s'adapter à une carte ou une barre de recherche ; limitée par max-width: 100%. |
Durée (CSS — transition de .glw-input) |
0,3 s | Joue à l'allumage comme à l'extinction. Une valeur plus courte (0,15 s) colle mieux à un quiz rapide. |
Libellé visible (HTML — .glw-caption) |
« Votre nom » au-dessus | Retirez-le pour une barre de recherche et donnez alors un aria-label au champ. |
FAQ
overflow: hidden (ou auto) et colle au champ. Ajoutez-lui au moins 20 px de marge intérieure autour du champ, ou retirez le débordement caché.box-shadow est dessiné par-dessus, hors du calcul des dimensions : les champs voisins restent à leur place quand le halo apparaît..glw-input.is-error { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .2), 0 0 20px rgba(239, 68, 68, .3); }, ajoutée par votre validation et reliée au message par aria-describedby.
