CSS

Agregue destellos de lente CSS a fotos táctiles brillantes trucos CSS

Soy un gran fan de las películas de JJ AbramsDisfruto de sus tramas apretadas, diálogos ingeniosos y por supuesto: reflejos de lentes anamórficos. Directores como Abrams usan reflejos de lente para agregar un poco de realismo «hogareño» a sus películas, una técnica que podemos recrear fácilmente en herramientas como Photoshop y luego agregar a nuestros sitios como mapas de bits.

Pero, ¿y si queremos aplicar el mismo resplandor a la lente? sin el uso de herramientas de edición de fotos? Podemos crear un destello de lente CSS para agregar un toque cinematográfico a las imágenes de nuestra galería, fotos de fondo o perfiles de usuario.

Hay diferentes tipos de deslumbramiento en la fotografía. Con el que trabajamos se conoce como artefactos porque dejan pequeños puntos de luz que toman la forma de una apertura de cámara donde la luz entra y se refleja en la superficie de la lente.

Fuente: Wikipedia

Este es un buen ejemplo del tipo de destello de lente que vamos a hacer, por supuesto, directamente de una película de JJ Abrams:

Un ejemplo de un destello de lente CSS que hacemos muestra un resplandor a la derecha de un actor en un cuadro de la película Star Trek de 2009.
Viaje a las estrellas (2009)

Hay varias partes del resplandor de la lente arriba. Vamos a enumerarlos para que sepamos lo que estamos buscando:

  1. La fuente de luz central parece una bola de luz brillante.
  2. Hay algunas franjas de luz elípticas horizontales: rayos de luz distorsionados y borrosos que dan lugar a elipses alargadas.
  3. Se disparan rayos de luz aleatorios desde la fuente de luz central en diferentes ángulos.

Comenzamos con los elementos HTML debajo de este mapa para nuestros componentes de deslumbramiento Hay una fuente de luz central y dos deslumbramientos redondos fuera de la diagonal, tres destellos de lentes horizontales y tres reflejos de rayos cónicos.

<div class="lens-center"></div>
    <div class="circle-1"></div>
    <div class="circle-2"></div>
    <div class="left-flare horizontal-flare"></div>
    <div class="right-flare horizontal-flare"></div>
    <div class="full-flare horizontal-flare"></div>
    <div class="conic-1"></div>
    <div class="conic-2"></div>
    <div class="conic-3"></div>
</div>

Finalmente, para que el resplandor de nuestra lente se superponga plausiblemente a la imagen, su fuente de luz central debe ser ajustable. De esta manera, podemos colocarlo en una fuente de luz plausible existente en la foto y no superponerse con ninguna cara.

Fondo y fuente de luz de la lente deslumbrante CSS

Comencemos con un fondo negro y una fuente de luz central para nuestro destello de lente CSS. La mayoría de los degradados en la cuadrícula son degradados lineales con transiciones de color densas, pero podemos aplicarles canales alfa, que en realidad es una buena manera de crear un efecto brillante. Un degradado radial con forma redonda con muchas capas de colores translúcidos nos da un buen centro de la cámara.

background: radial-gradient(
  closest-side circle at center,
  hsl(4 5% 100% / 100%) 0%,
  hsl(4 5% 100% / 100%) 15%,
  hsl(4 10% 70% / 70%) 30%,
  hsl(4 0% 50% / 30%) 55%,
  hsl(4 0% 10% / 5%) 75%,
  transparent 99
);
filter: blur(4px);

Esta sintaxis HSL tiene curiosidad, es nueva y parece ser la dirección futura para definir la transparencia alfa en todas las funciones CSS de color.

Tenga en cuenta que usamos un filtro de desenfoque CSS para hacer que los degradados se vean un poco más cerca de las capas de luz difusa.

Ahora que sabemos cómo agregar reflejos redondos, agregaremos un resplandor difuso más grande detrás de la fuente de luz, así como tres reflejos adicionales en 45deg ángulo desde el centro para dar al efecto un aspecto más realista.

Ajustar las franjas de luz horizontales

Comencemos con los reflejos horizontales. Hay varias opciones que podemos tomar, un gradiente de elipse muy alargado sería el enfoque más simple. Sin embargo, me di cuenta de que los reflejos horizontales de la lente suelen ser menos simétricos que los de mis fotos de referencia, así que quería que las mías fueran un poco menos simétricas.

Afortunadamente, los degradados radiales tienen un argumento de ubicación adicional en CSS. Podemos crear dos partes izquierda y derecha ligeramente diferentes en tamaño del mismo resplandor horizontal y con colores ligeramente diferentes. También podemos agregar un filtro de opacidad para hacer que el área donde el resplandor horizontal se une al centro para que el flash sea menos inestable.

background: radial-gradient(
  closest-side circle at center,
  transparent 50%,
  hsl(4 10% 70% / 40%) 90%,
  transparent 100%
);
filter: blur(5px);

Mientras estamos en eso, agreguemos un fondo elíptico completamente alargado tres cuartas partes del camino hacia abajo de la vista para otro toque de «realismo».

Creando rayos de luz dispersos

Tanto con reflejos radiales como horizontales, todo lo que nos queda son los rayos angulares de luz que emanan de la fuente de luz. Podríamos agregar gradientes radiales elípticos adicionales, luego distorsionar y mover el contenedor para obtener una aproximación cercana. Pero también tenemos un degradado de CSS que ya está hecho para funcionar, el gradiente cónicoA continuación se muestra un ejemplo que nos da una 7deg gradiente cónico en un 5deg desplazado de la esquina inferior derecha del contenedor.

background: conic-gradient(
  from 5deg at 0% 100%,
  transparent 0deg,
  hsl(4 10% 70% / 30%) 7deg,
  transparent 15deg
);
transform-origin: bottom left;
transform: rotate(-45deg);

Agregaremos varios degradados cónicos centrados en nuestro centro de destello, con diferentes ángulos de degradado de colores translúcidos. Porque los gradientes cónicos pueden mostrar el ángulo de su contenedor divlos transformaremos rotacionalmente, utilizando nuestra fuente de luz como su fuente, lo que conduce al efecto de un filtro de haz difuso compensado.

Use propiedades CSS personalizadas para obtener un destello de lente más flexible

Hasta ahora, hemos creado un efecto de reflejo de lente receptivo pero posicionado estáticamente en una ubicación fija. Sería difícil ajustar el centro de deslumbramiento de la lente sin romper también el deslumbramiento horizontal y cónico que lo rodea.

Para hacer que el resplandor de la lente CSS sea ajustable y menos frágil, expondremos la posición, el tamaño y el tono de la fuente de luz a través de un conjunto de propiedades personalizadas.

:root {
  --hue: 4;
  --lens-center-size: 40%;
  --lens-spread-size: 80%;
  --lens-left: 55%;
  --lens-top: 15%;
}

Mientras estamos en esto, también ajustaremos el tono de deslumbramiento y el tamaño de la altura de deslumbramiento horizontal. Para el ancho del deslumbramiento horizontal usamos Sobrecarga de variables CSS para hacerlos ajustables usted mismo; de lo contrario volvemos al centro de la fuente de luz o al centro de la imagen.

.left-flare {
  width: var(--left-flare-width, var(--lens-left, 50%));
}

Así es como se ve el efecto de resplandor de la lente CSS terminado con un fondo fotográfico y el destello de la lente se mueve hacia arriba para que la ubicación de la fuente de luz parezca creíble. ¡Vamos, agrega tu propia foto para ver cómo funciona en diferentes contextos!

Otros ejemplos CSS y no CSS de destello de lente

Esta es solo una forma de crear un destello de lente CSS, por supuesto. Me gusta este enfoque porque es flexible en términos de color, tamaño y posicionamiento del resplandor y sus partes. Esto lo convierte en un componente más reutilizable que se puede usar en muchos contextos.

Este es uno de Keith Grant, que utiliza un degradado lineal y propiedades CSS personalizadas. Luego dispersa algo de JavaScript allí para organizar aleatoriamente los valores de HSLA.

Nicholas Guest tiene otro destello de lente CSS que aplica una sombra de cuadro en ::before y ::after pseudo-elementos de un .flare elemento para obtener el efecto, además de un poco de jQuery, lo que hace que el resplandor siga al mouse mientras se sostiene el mouse.

Esto se hace con Canvas y es claro en la forma en que la fuente de luz sigue al mouse mientras sostiene el mouse, mientras muestra cómo los artefactos de deslumbramiento de la lente cambian de posición cuando cambia la posición de la fuente de luz.

La misma idea aquí:

Y uno divertido que usa GSAP, Canvas y una biblioteca llamada JS.LensFlare:

¿Cómo abordaría el efecto de deslumbramiento de lente CSS? ¡Comparte en los comentarios!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba