L’effet lueur néon sur un site web

La lueur entoure un titre, ou le bord d’un bouton, d’un halo de la couleur d’accent du site, comme une enseigne au néon dans une rue la nuit. Elle a besoin d’un objet : dans la bibliothèque de l’atelier, elle s’applique à un élément précis, parce qu’une lueur qui n’entoure rien n’est qu’un voile coloré.

Des soins liquides, des gestes lents.Sans

Des soins liquides, des gestes lents.Lueur

Sur la démonstration, le titre blanc se détache sur l’affiche sombre dans un halo couleur braise, l’accent de cette vitrine.

D’où vient l’effet

Le néon est un gaz rare, invisible tant qu’il n’est pas enfermé dans un tube de verre et soumis à une haute tension : il s’allume alors d’une couleur qui lui est propre. Le Français Georges Claude en a fait de l’éclairage. En décembre 1910, au Salon de l’automobile de Paris, il fait briller deux tubes d’une douzaine de mètres sur la colonnade du bâtiment, d’un rouge orangé éclatant. La première enseigne publicitaire au néon s’allume en 1912, boulevard Montmartre, chez un barbier. En mélangeant les gaz et en teintant les tubes, les fabricants obtiennent ensuite plus de quarante couleurs ; l’argon, par exemple, donne du violet (Science History Institute, 2012).

La nuit, autour d’une enseigne allumée, la lumière semble déborder du tube. L’image de synthèse imite ce débordement sous le nom de bloom : chez Unity, l’effet fait partir des franges de lumière des bords des zones claires, pour donner l’illusion d’une lumière si forte qu’elle déborde de la caméra (Unity). La lueur du web en est la version la plus simple : une ombre floue et colorée, sans aucun décalage.

Quand le poser

Aucune des vingt-quatre mises en page prêtes de l’atelier ne la pose d’office. Elle va aux lieux et aux métiers de la nuit et de la scène :

• un bar, un club, une salle de concert, un label ;
• une soirée, un festival, un événement qui commence après le coucher du soleil ;
• une salle d’arcade, un escape game, un barbier, en clin d’œil à la première enseigne ;
• un studio de tatouage, un food truck qui sert tard.

La bibliothèque prévoit deux usages. Sur un titre, la lueur entoure les lettres. Sur une bordure, sa variante entoure une carte ou un bouton : c’est la façon la plus directe de signaler le bouton d’appel dans une page sombre.

Il vaut mieux s’en passer :

• sur un fond clair : un halo a besoin de pénombre, et sur du blanc il ressemble à une tache ;
• avec la texture papier : la fibre et le néon viennent de deux mondes, et l’un fait douter de l’autre ;
• sur tous les titres à la fois : si tout brille, plus rien ne ressort ;
• pour un métier qui rassure par sa sobriété : un notaire, un cabinet médical, un expert-comptable.

Le bon dosage

La lueur prend sa couleur dans l’accent du site : elle appartient toujours à la palette. Dans la bibliothèque, elle tient en deux ombres posées l’une sur l’autre, sans décalage. La première, floue sur 18 pixels, mêle 55 % de la couleur d’accent à de la transparence et dessine le halo serré. La seconde, deux fois et demie plus large, à 28 %, fait la diffusion autour.

La variante des bordures pose une ombre extérieure de 18 pixels à 38 % de l’accent, une ombre intérieure plus légère, et teint la bordure elle-même à 60 %.

Un accent sombre, un bleu marine, un bordeaux, donne une lueur qui se voit à peine sur un fond sombre ; un accent vif, un orange, un rose, un vert acide, la fait chanter. Choisissez la couleur d’accent en pensant à elle.

La bibliothèque ne pose qu’un traitement à la fois. Les matières peuvent s’ajouter par-dessus, deux au plus. Prudence avec la halation, qui fait elle aussi rayonner la couleur d’accent : ensemble, elles doublent la lumière, à réserver aux pages qui assument la nuit.

Ce qu’il coûte

Peu, tant qu’elle reste à sa place. Une ombre floue coûte plus à peindre qu’une forme nette : tout ce qui demande un flou prend plus de temps (web.dev). Sur un titre et un bouton, la différence ne se sent pas. Sur des dizaines de cartes à la fois, elle se paie.

Surtout, la lueur de la bibliothèque ne bouge pas. Un néon qui « respire », dont on ferait varier le flou ou la couleur, obligerait le navigateur à repeindre le titre à chaque image : il n’anime à peu de frais que la position et l’opacité d’un calque (web.dev).

L’accessibilité

• Le contraste. Un halo derrière un texte change le fond sur lequel il se lit. Le W3C le précise : un contour large, qui remplit le creux des lettres, compte comme un halo, donc comme le fond. Mesurez le contraste entre la lettre et sa lueur, là où elle est la plus dense : au moins 4,5 pour 1 pour un texte courant, et 3 pour 1 pour un grand titre (W3C, WCAG 2.2). Un titre blanc dans un halo clair perd vite ce qu’il avait.
• Le mouvement réduit. La lueur est immobile. Quand le visiteur demande à son appareil moins d’animations (prefers-reduced-motion), la bibliothèque n’a rien à retirer.
• Aucun clignotement. Le néon qui grésille et clignote est un cliché tentant. Sur une page, une lumière qui flashe plus de trois fois par seconde peut déclencher des crises chez les personnes photosensibles, mais aussi des migraines et des vertiges (W3C, critère 2.3.1). La lueur de la bibliothèque ne clignote jamais.

Comment il est fait

Deux ombres de texte, text-shadow, sans décalage et avec un flou : plus le flou est grand, plus l’ombre s’élargit et pâlit (MDN). Leur taille dépend d’une variable, --lueur, qui vaut 18, et leur couleur est un mélange de la couleur d’accent et de transparence :

.m-lueur {
  text-shadow:
    0 0 calc(var(--lueur, 18) * 1px)   color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 calc(var(--lueur, 18) * 2.4px) color-mix(in srgb, var(--accent) 28%, transparent);
}

La variante des bordures fait la même chose avec box-shadow, qui accepte aussi une ombre intérieure grâce au mot-clé inset (MDN) :

.m-lueur-bord {
  box-shadow:
    0 0 calc(var(--lueur, 18) * 1px) color-mix(in srgb, var(--accent) 38%, transparent),
    inset 0 0 calc(var(--lueur, 18) * .8px) color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

Dans l’atelier

La lueur est l’un des trois traitements de la bibliothèque, rangés à part des dix matières : elle se pose sur un titre ou une bordure choisis, au lieu de couvrir la page. Elle n’a pas d’étape à elle dans le parcours, et aucune des vingt-quatre mises en page prêtes ne la pose d’office.