Aussi appelée Drop Shadow on hover, Elevation on hover
Au survol, une ombre douce apparaît ou s’accentue sous l’élément pour suggérer qu’il s’élève.
Ajoute une ombre au survol (Hover Shadow) sur [où], aussi appelée drop shadow on hover ou elevation on hover.
Une ombre douce sous l’élément doit s’accentuer et s’étaler tant que le pointeur le survole pour qu’il paraisse surélevé, puis s’estomper quand il le quitte, sans que l’élément lui-même bouge.
Garde l’ombre assez discrète pour fonctionner en thème clair comme en thème sombre, et affiche le même effet au focus clavier.
Aussi appelée Neon Sign Flicker, Glowing Text
Le texte brille comme un tube néon et clignote ou pulse.
Usages
Thèmes vie nocturne et gaming
Ajoute un effet « Neon Glow Text » (aussi appelé neon sign flicker ou glowing text) sur [où].
Le texte doit briller comme un tube néon, d’une lumière douce et régulière, et de temps en temps s’éteindre brièvement comme une vraie enseigne.
Garde le clignotement occasionnel plutôt que rapide, car les flashs rapides peuvent nuire à certains utilisateurs, et garde la lueur fixe si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).
Au survol, un contour s’écarte de l’élément ou se resserre vers lui.
Ajoute un effet de survol « Outline Expand » sur [où].
Un contour doit partir collé au bord de l’élément et s’en écarter pour laisser un petit espace tout autour, rester ainsi pendant le survol et se refermer quand le pointeur sort : fluide et rapide.
Dessine le contour sans changer la taille de l’élément ni pousser le contenu voisin, et affiche le même effet au focus clavier.
Une bordure en dégradé s’anime autour de l’élément et s’étend quand le pointeur le survole.
Ajoute un effet « Hover Border Gradient » sur [où].
Un court reflet en dégradé doit reposer sur une partie de la bordure ; tant que le pointeur survole l’élément, il doit faire le tour de la bordure à vitesse régulière pendant que toute la bordure s’illumine d’une lueur douce.
N’anime la bordure qu’au survol et garde-la immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).