Crea reflejos realistas con CSS trucos CSS

En el diseño, los reflejos son imágenes especulares estilizadas de objetos. Aunque no son tan populares como las sombras, tienen sus momentos: solo piense en la primera vez que exploró los diferentes formatos de fuente en MS Word o PowerPoint: apuesto a que el reflejo fue su segundo estilo más utilizado, sombrear, el anterior a otros como contornos. y purpurina. O tal vez recuerdes cuando los reflejos estaban de moda, cuando Apple los usaba para casi todo.

¡Los reflejos siguen siendo geniales! Y a diferencia de hace años, ¡realmente podemos reflexionar con CSS! Esto es lo que haremos en este artículo:

Hay dos pasos para el diseño de reflexión:

1. Crea una copia del diseño original.
2. Haz esta copia.

La forma más auténtica y estandarizada de obtener una imagen reflejada en CSS ahora sería usar element() propiedad. Pero todavía está en la fase experimental y solo es compatible con Firefox en el momento de escribir este artículo. Si tiene curiosidad, puede consultar este artículo que escribí que experimenté con él.

Así que en vez element()Agregaré dos de los mismos diseños y usaré uno como reflejo en mis ejemplos. Puede codificar esta parte para que sea dinámica mediante JavaScript o utilizar pseudoelementos, pero en mis demostraciones utilizo un par de elementos de diseño idénticos.

<div class="units">
  <div>trinket</div>
  <div>trinket</div>
</div>

.units > * {
  background-image: url('image.jpeg');
  background-clip: text;
  color: transparent;
  /* etc. */
}

El diseño original son gráficos de texto sin formato creados por una combinación de imagen de fondo, color de texto transparente y background-clip propiedad con su propio text valor.

Luego, el elemento inferior del par se invierte y se acerca al diseño original con la ayuda de transformEste es el reflejo:

.units > :last-child {
  transform: rotatex(180deg) translatey(15px); 
}

El elemento inferior invertido ahora adoptará algunos estilos para crear desvanecimiento y otros efectos gráficos en el reflejo. El desvanecimiento gradual del reflejo se puede lograr con una imagen de degradado lineal utilizada como capa de máscara en el elemento invertido.

.units > :last-child {
  transform: rotatex(180deg) translatey(15px); 
  mask-image: linear-gradient(transparent 50%, white 90%);
}

Defecto, mask-mode desde mask-image la propiedad es alphaEsto significa que las partes transparentes de la imagen, cuando la imagen se usa como una máscara de capa de elemento, hacen que sus áreas correspondientes del elemento sean transparentes. linear-gradient con una gradación transparente en la parte superior, el reflejo invertido al final se desvanece.

Podemos probar otros estilos de degradado, combinándolos o sin combinarlos. Tome el que tiene rayas, por ejemplo. Agregué la plantilla junto con el efecto de desvanecimiento de antes.

.units > :last-child {
  /* ... */
  mask-image: 
    repeating-linear-gradient(transparent, transparent 3px, white 3px, white 4px),
    linear-gradient( transparent 50%, white 90%);
}

O este con radial-gradient:

.units > :last-child {
  /* ... */
  mask-image: radial-gradient(circle at center, white, transparent 50%);
}

Otra idea es transformar la imagen del espejo agregando skew() para transform Esto le da algo de movimiento al reflejo.

.units > :last-child {
  /* ... */
  transform: rotatex(180deg) translatey(15px) skew(135deg) translatex(30px);
}

Cuando necesite que el reflejo sea sutil y más como una sombra, entonces puede funcionar difuminarlo, iluminarlo o reducir su opacidad.

.units > :last-child {
  /* ... */
  filter: blur(4px) brightness(1.5);
}

A veces, el reflejo en sí se puede sombrear, así que en lugar de usar la imagen de fondo (del diseño original) o bloquear el color del texto, traté de darle al reflejo una serie de tonos translúcidos de rojo, azul y verde que van bien con el diseño original

.units > :last-child {
  /* ... */
  text-shadow: 
    0 0 8px rgb(255 0 0 / .4),
    -2px -2px 6px rgb(0 255 0 / .4),
    2px 2px 4px rgb(0 255 255 / .4);
}

Haz esto rgb()los valores se ven raros? Esta es una nueva sintaxis que forma parte de algunas características de color CSS nuevas y emocionantes.

Pongamos todos estos enfoques juntos en una gran demostración:

La clave para una buena reflexión es usar efectos que sean más finos que el sujeto principal, pero no tan sutiles que sean difíciles de detectar. Luego hay otras consideraciones, incluido el color, la dirección y la forma del reflejo.

¡Espero que te hayas inspirado con esto! Por supuesto, todo lo que vimos aquí era texto, pero los reflejos pueden funcionar bien para cualquier elemento de diseño impresionante que tenga suficiente espacio razonable a su alrededor y pueda aprovechar un reflejo para elevarse en una página.