El efecto viñeteado en un sitio web: oscurecer los bordes

El viñeteado lleva los bordes de la imagen a la sombra y deja el centro en la luz. El ojo va adonde hay claridad: sin darse cuenta, el visitante vuelve al centro de la pantalla, al título, al gesto filmado, al plato. Es la más discreta de las texturas, y una de las más útiles, porque gana contraste sin tocar el vídeo.

Sin

Viñeteado

De dónde viene el efecto

En fotografía, el viñeteado es primero un accidente óptico. Canon lo describe como una caída de la iluminación en la periferia: según el objetivo y las condiciones de la toma, las cuatro esquinas de la imagen salen más oscuras. Una parte de la luz que entra en el objetivo queda bloqueada por su cuerpo, o por el parasol.

Los fabricantes se esfuerzan por borrarlo. En sus EOS recientes, Canon corrige la iluminación periférica en el propio aparato, y la corrección está activada por defecto. Sin embargo, el mismo fabricante recuerda que el viñeteado puede ser una elección deliberada, sobre todo en el retrato, para llevar la mirada hacia el sujeto; entonces se añade en el revelado, en el ordenador.

Es este segundo uso el que retoma la capa del estudio: una sombra buscada, colocada sobre la página, que enmarca el contenido como una copia enmarca su tema.

Cuándo usarlo

El viñeteado sirve a las páginas que tienen un sujeto en el centro y mucha materia alrededor:

• un taller filmado de cerca, donde el banco, las virutas y las herramientas se amontonan en las esquinas;
• un lugar de producción, una granja, una finca, un tostadero, cuyo decorado desborda el encuadre;
• un inmueble mostrado en grande, donde la mirada debe posarse en la estancia;
• una sala de deporte o un campo filmados con luz dura, donde los bordes quemados distraen.

Cuatro de las veinticuatro maquetaciones del estudio lo aplican por defecto. La maquetación Taller artesano y la maquetación Productor lo combinan con el grano de película: el grano trabaja la superficie, el viñeteado la luz. La maquetación Club deportivo y la maquetación Inmobiliaria lo llevan solo.

Cuándo prescindir de él. Una página clara y aireada, hecha de colores planos y de mucho blanco, no tiene nada que enmarcar: la capa solo apagaría sus esquinas. Evítalo también cuando una información importante se encuentra en una esquina, un número de teléfono abajo de la pantalla por ejemplo: es justo ahí donde pesa.

La dosis justa

El viñeteado se regula con un solo valor: la parte del color de fondo de la página que se mezcla con la imagen al final del degradado, 55 % por defecto. El degradado queda transparente en toda la mitad central, y luego se espesa hacia el exterior.

Dos detalles lo hacen más suave de lo que parece. Su centro está un poco por encima del medio de la pantalla, al 42 % de la altura: la parte de abajo se oscurece más que la de arriba, como bajo una luz que cae del techo. Y la elipse se extiende mucho más allá de la pantalla, de modo que incluso las esquinas solo reciben una sombra ligera. Se nota sobre todo cuando se quita.

Como todas las texturas, deja en paz la primera pantalla: el vídeo de bienvenida queda desnudo, y la capa sube a medida que se baja.

Una regla vale para todas las texturas: dos capas como mucho. El viñeteado es una buena segunda capa, ya que toca la luz cuando las otras tocan la textura. A la tercera, la imagen se ensucia.

Lo que cuesta

Casi nada. La capa es un degradado, dibujado una vez por el navegador, sin ningún archivo que descargar. Se coloca en posición fija sobre la página y deja pasar los clics y el desplazamiento.

Nunca se anima. Lo único que varía, durante el primer desplazamiento, es su opacidad. Y la opacidad y las transformaciones son las dos propiedades que un navegador sabe hacer variar sin repintar la pantalla (web.dev). El movimiento viene de la película de debajo.

Accesibilidad

• Contraste. En una página oscura, el viñeteado ayuda: oscurece el fondo detrás de un texto claro colocado cerca de los bordes. Las reglas de accesibilidad exigen un contraste de al menos 4,5 a 1 entre el texto corriente y su fondo (WCAG 2.2, criterio 1.4.3). Mídelo en el lugar menos favorable de la página, nunca solo en el centro.
• Movimiento reducido. Cuando un visitante pide a su sistema menos animación (prefers-reduced-motion), el grano y la escarcha desaparecen de la página. El viñeteado se queda, porque está quieto.
• Sin destellos. La capa nunca cambia por sí sola: solo el desplazamiento del visitante la hace aparecer, y luego se queda en su sitio.

Cómo está hecho

Un degradado radial, radial-gradient(), en elipse: transparente en el centro, luego mezclado con el color de fondo de la página mediante la función color-mix(). La capa lleva así los bordes hacia el fondo del sitio. Sobre una paleta oscura, se oscurecen; sobre una paleta clara, palidecen. El viñeteado se queda así dentro de los colores de la página.

.m.m--vignette {
  opacity: var(--m-voile, 1);
  background: radial-gradient(130% 110% at 50% 42%,
    transparent 50%,
    color-mix(in srgb, var(--bg) calc(var(--vignette, 55) * 1%), transparent) 100%);
}

--m-voile vale cero en la primera pantalla y sube hasta uno a medida que se baja; --vignette lleva la intensidad. El prefijo .m garantiza que la regla solo se aplica a la capa prevista para ella: colocada en otro sitio, no tiene ningún efecto.

En el estudio

El viñeteado es una de las diez texturas de la biblioteca. Se elige en la etapa «La textura», después del fondo, solo o con una segunda textura.