Efecto de luz colorido CSS tranquilo trucos CSS

Hay una calidez tranquila en la luz del sol de la tarde que penetra en las hojas susurrantes. Los artistas usan puntos de luz para crear un efecto hipnótico suave.

Podemos crear el mismo tipo de efecto de luz de colores en el diseño web usándolo en fotos e ilustraciones para agregar ese toque mágico a lo que de otro modo podría ser un contenido sombrío para devolverles la vida.

Te daré una manera fácil y rápida de agregar este efecto... solo con CSS.

Antes de ingresar el código, es importante conocer la composición de la luz dispersada. Se compone de grandes manchas -redondas o elípticas- de luz, que son captadas por las sombras que proyectan las hojas. Básicamente luz que se desliza a lo largo de hojas, ramas, etc. A veces las sombras crean bordes claros, pero más a menudo se ven borrosas porque estamos hablando de luz que pasa a través de muchos espacios menos definidos que dispersan y distorsionan la luz al proyectar sombras desde una distancia mayor que , digamos, su propia sombra brillante en una pared cercana de la luz solar directa.

Aquí está la diferencia en la apariencia de una pared blanca con y sin luz atenuada:

Recrearé el colorido efecto de luz con texto sin formato y emojis divertidos, aplicando sombras y mezclas CSS para imitar la naturaleza. También consideraré métodos alternativos.

Diseño de escenario

Usaremos texto - letras del alfabeto, caracteres especiales, emojis, etc. - para crear las formas de luz. Y por luz me refiero a colores pálidos y translúcidos. Nuevamente, estamos a favor de un efecto de luz colorido, no de algo que sea nítido, distinto o nítido.

Lo mejor es elegir letreros que sean elípticos u oblongos de alguna manera: los puntos producidos por la luz dispersa están disponibles en diferentes formas. Aquí deberá juzgar mejor para obtener exactamente lo que está buscando. ¿I? Yo uso 🍃, 🍂, porque son elípticos, oblongos e inclinados: un poco de caos e imprevisibilidad para un efecto tranquilo.

Los envuelvo en párrafos contenidos en un .backdrop elemento padre:

<div class="backdrop">
  <p class="shapes">🍃</p>
  <p class="shapes">🍂</p>
  <p class="shapes"></p>
</div>

Utilizo el elemento principal como una superficie donde se proyectan luces y sombras apagadas, aplicando una imagen de fondo a su textura. Y no solo dar la superficie explícitamente width y height, pero también establecí un degradado oculto en él para que pueda proyectar sombras que van más allá de la superficie sin revelarlas. Los objetos que emiten un efecto de luz de colores se alinean en el centro de la superficie de fondo, gracias a la red CSS:

.backdrop {
  background: center / cover no-repeat url("https://css-tricks.com/css-dappled-light-effect/image.jpeg");
  width: 400px; height: 240px;
  overflow: hidden;
  display: grid;
}
.backdrop > * {
  grid-area: 1/1;
}

Me parece bien si las formas no están alineadas. exactamente uno encima del otro, siempre que se superpongan de forma que se consiga el efecto deseado de puntos de luz. Así que no hay presión para hacer exactamente lo que estoy haciendo aquí para posicionar las cosas en CSS. De hecho, ¡os animo a que probéis a jugar con los valores para conseguir diferentes patrones de puntos de luz!

Atenuación atenuada en CSS

Estas son las características clave que deben tener los emojis: transparent color, fondo negro translúcido (usando el canal alfa en rgba()), blanco borroso text-shadow con un buen grande font-sizey finalmente, un mix-blend-mode para suavizar las cosas.

.shapes {
  color:  transparent;
  background-color: rgba(0, 0, 0, 0.3); // Use alpha transparency
  text-shadow: 0 0 40px #fff; // Blurry white shadow
  font: bolder 320pt/320pt monospace;
  mix-blend-mode: multiply;
}

mix-blend-mode especifica cómo se mezclan los colores del elemento con los del contenido del elemento contenedor multiply El valor hace que el fondo de un elemento se muestre a través de los colores claros del elemento y mantiene los colores oscuros iguales, lo que hace que los puntos claros tengan un efecto más agradable y natural.

Mejora los colores y el contraste.

yo quería background-image en el fondo para ser un poco más brillante, así que agregué filter: brightness(1.6)Otra forma de hacerlo es con background-blend-mode en cambio, donde se mezclan todos los diferentes fondos de un elemento, y en lugar de agregar emojis como elementos separados, los agregamos como imágenes de fondo.

Fíjate que usé diferentes emojis. en el ultimo ejemplo floralwhite para algún color menos intenso que el blanco puro para la luz. Aquí está una de las imágenes de fondo desempaquetadas de emoji:

<svg xmlns="http://www.w3.org/2000/svg"> 
  <foreignObject width="400px" height="240px"> 
    <div xmlns="http://www.w3.org/1999/xhtml" style="font: bolder 720pt/220pt monospace;
       color: transparent;
       text-shadow: 0 0 40px floralwhite;
       background: rgba(0, 0, 0, 0.3);"
    >
      🌾
    </div> 
  </foreignObject> 
</svg>

Si desea utilizar sus propias imágenes para las formas, asegúrese de que los bordes estén borrosos para crear una luz suave. blur() el filtro puede ser conveniente para lo mismo. También usé CSS @supports para ajustar el valor del desenfoque de sombra para ciertos navegadores como una opción de respaldo.

Ahora volvamos al primer ejemplo y agreguemos algunas cosas:

<div class="backdrop">
  <p class="shapes">🍃</p>
  <p class="shapes">🍂</p>
  <p class="shapes"></p>
</div>

<p class="content">
  <img width="70px" style="float: left; margin-right: 10px;" src="https://css-tricks.com/css-dappled-light-effect/image.jpeg" alt="">
  Top ten tourists spots for the summer vacation <br><br><i style="font-weight: normal;">Here are the most popular places...</i>
</p>

.backdrop y .shapes son esencialmente los mismos estilos que antes .contentquien también se sienta encima de .backdrop, Yo añadí isolation: isolate para formar un nuevo contexto de arreglo, excluyendo el elemento de mezcla como un toque de precisión.

Animar la fuente de luz

También decidí agregar una animación CSS simple con @keyframes que se aplican a .backdrop Sobre :hover:

.backdrop:hover > .shapes:nth-of-type(1){
  animation: 2s ease-in-out infinite alternate move;
}
.backdrop:hover > .shapes:nth-of-type(2):hover{
  animation: 4s ease-in-out infinite alternate move-1;
}

@keyframes move {
  from {
    text-indent: -20px;
  }
  to {
    text-indent: 20px;
  }
}
@keyframes move-1 {
  from {
    text-indent: -60px;
  }
  to {
    text-indent: 40px;
  }
}

Animar text-indent tienen un movimiento súper fino en los productos emoji, del tipo que se puede esperar de las nubes que se mueven por encima y cambian la dirección de la luz. Sólo un toque de clase, ya sabes.

resumiendo

¡Aquí está! Nos inspiramos en la naturaleza y el arte para imitar uno de esos días parcialmente nublados cuando el sol brilla a través de árboles y arbustos, proyectando manchas de luz y sombra sobre la superficie. Y lo hicimos todo con un puñado de CSS y algunos emojis.

La clave fue cómo aplicamos el color al emoji. Usar desenfoque adicional text-shadow en color claro fija la luz, y en translúcido background-color De ahora en adelante, todo lo que teníamos que hacer era proporcionar el fondo para que la luz y las sombras usaran una textura realista con suficiente contraste para ver el efecto de la luz atenuada en acción.