El efecto resplandor de neón en un sitio web

El resplandor rodea un título, o el borde de un botón, con un halo del color de acento del sitio, como un letrero de neón en una calle de noche. Necesita un objeto: en la biblioteca del estudio, se aplica a un elemento preciso, porque un resplandor que no rodea nada no es más que un velo de color.

Pizarra y cobalto que se pliegan lentamente, sin efecto — El cartel del fondo «Superficies líquidas», rodado por el estudio. A la derecha, el mismo título con el tratamiento Resplandor de la biblioteca, en su ajuste por defecto.

La misma imagen, con un título en Resplandor — El cartel del fondo «Superficies líquidas», rodado por el estudio. A la derecha, el mismo título con el tratamiento Resplandor de la biblioteca, en su ajuste por defecto.

En la demostración, el título blanco se recorta sobre la imagen de portada oscura en un halo color brasa, el acento de esta vitrina.

De dónde viene el efecto

El neón es un gas raro, invisible hasta que se encierra en un tubo de vidrio y se somete a una alta tensión: entonces se ilumina con un color propio. El francés Georges Claude hizo de él un alumbrado. En diciembre de 1910, en el Salón del Automóvil de París, encendió dos tubos de unos doce metros en la columnata del edificio, de un rojo anaranjado brillante. El primer letrero publicitario de neón se encendió en 1912, en el bulevar Montmartre, en una barbería. Mezclando los gases y tiñendo los tubos, los fabricantes obtuvieron después más de cuarenta colores; el argón, por ejemplo, da violeta (Science History Institute, 2012).

De noche, alrededor de un letrero encendido, la luz parece desbordar del tubo. La imagen de síntesis imita este desbordamiento con el nombre de bloom: en Unity, el efecto hace que franjas de luz se extiendan desde los bordes de las zonas claras, para dar la ilusión de una luz tan fuerte que desborda la cámara (Unity). El resplandor de la web es su versión más simple: una sombra desenfocada, de color, sin desplazamiento.

Cuándo usarlo

Ninguna de las veinticuatro maquetaciones listas del estudio lo aplica por defecto. Conviene a los lugares y oficios de la noche y del escenario:

un bar, un club, una sala de conciertos, un sello;
una fiesta, un festival, un evento que empieza después de la puesta del sol;
una sala de recreativos, un escape room, una barbería, en guiño al primer letrero;
un estudio de tatuaje, un food truck que sirve tarde.

La biblioteca prevé dos usos. Sobre un título, el resplandor rodea las letras. Sobre un borde, su variante rodea una tarjeta o un botón: es la manera más directa de destacar el botón de llamada a la acción en una página oscura.

Mejor no ponerlo:

sobre un fondo claro: un halo necesita penumbra, y sobre blanco parece una mancha;
con la textura de papel: la fibra y el neón vienen de dos mundos, y uno hace dudar del otro;
en todos los títulos a la vez: si todo brilla, ya nada destaca;
para un oficio que tranquiliza con la sobriedad: un notario, una consulta médica, un contable.

La dosis justa

El resplandor toma su color del acento del sitio: siempre pertenece a la paleta. En la biblioteca, se compone de dos sombras superpuestas, sin desplazamiento. La primera, desenfocada sobre 18 píxeles, mezcla un 55 % del color de acento con la transparencia y dibuja el halo ceñido. La segunda, dos veces y media más ancha, al 28 %, hace la difusión alrededor.

La variante de borde coloca una sombra exterior de 18 píxeles al 38 % del acento, una sombra interior más ligera, y tiñe el propio borde al 60 %.

Un acento oscuro, un azul marino, un burdeos, da un resplandor que apenas se ve sobre un fondo oscuro; un acento vivo, un naranja, un rosa, un verde ácido, lo hace cantar. Elige el color de acento pensando en ello.

La biblioteca solo aplica un tratamiento a la vez. Las texturas pueden sumarse encima, dos como mucho. Cuidado con la halación, que también hace irradiar el color de acento: juntas, doblan la luz, algo que reservar a las páginas que asumen la noche.

Lo que cuesta

Poco, mientras se quede en su sitio. Una sombra desenfocada cuesta más de pintar que una forma nítida: todo lo que exige un desenfoque lleva más tiempo (web.dev). Sobre un título y un botón, la diferencia no se nota. Sobre decenas de tarjetas a la vez, se paga.

Sobre todo, el resplandor de la biblioteca no se mueve. Un neón que «respira», con su desenfoque o su color variando, obligaría al navegador a repintar el título en cada imagen: solo anima con poco coste la posición y la opacidad de una capa (web.dev).

Accesibilidad

Contraste. Un halo detrás de un texto cambia el fondo sobre el que se lee. El W3C lo precisa: un contorno ancho, que llena los huecos de las letras, cuenta como un halo, y por tanto como el fondo. Mide el contraste entre la letra y su resplandor, donde es más denso: al menos 4,5 a 1 para el texto corriente, y 3 a 1 para un título grande (W3C, WCAG 2.2). Un título blanco en un halo claro pierde enseguida lo que tenía.
Movimiento reducido. El resplandor está quieto. Cuando el visitante pide a su aparato menos animación (prefers-reduced-motion), la biblioteca no tiene nada que quitar.
Sin destellos. Un neón que zumba y parpadea es un cliché tentador. En una página, una luz que destella más de tres veces por segundo puede provocar crisis en las personas fotosensibles, además de migrañas y mareos (W3C, criterio 2.3.1). El resplandor de la biblioteca nunca destella.

Cómo está hecho

Dos sombras de texto, text-shadow, sin desplazamiento y con un desenfoque: cuanto mayor es el desenfoque, más ancha y más pálida es la sombra (MDN). Su tamaño depende de una variable, --lueur, fijada en 18, y su color es una mezcla del color de acento y de la transparencia:

.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 de borde hace lo mismo con box-shadow, que acepta además una sombra interior gracias a la palabra clave 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);
}

En el estudio

El resplandor es uno de los tres tratamientos de la biblioteca, apartados de las diez texturas: se coloca sobre un título o un borde elegidos, en vez de cubrir la página. No tiene etapa propia en el recorrido, y ninguna de las veinticuatro maquetaciones listas lo aplica por defecto.