Efecto Glitch para texto solo con CSS

efecto glitch para texto css

Efecto Glitch para texto solo con CSS

Glitch significa “falla”. Existe una tendencia en diseño que se llama Glitch Art, o el arte Glitch y podemos crear efecto Glitch con CSS.

¿Que es el arte Glitch?

Es un estilo visual que se caracteriza por utilizar errores digitales o analógicos con fines estéticos. Ya sean intencionales (es decir, “fingir fallos” y obtener una estética similar a través del diseño) o por accidente (una verdadera manifestación dentro del sistema sin intervención humana).

Estos felices accidentes han demostrado que las tecnologías electrónicas siguen siendo medios abiertos para la expresión y la creatividad. Y han creado otra vía para que los diseñadores reinventen productos, logotipos, tipografía y mucho más.

Técnicas de diseño de arte Glitch

Hay efectos técnicos que a menudo vemos como fallos, y vamos a querer replicar estas técnicas para crear un diseño artístico de fallos convincente.

Que el fallo sea intencional o no, las imágenes “rotas” provienen de datos rotos, y este error es lo que está tratando de comunicar a través de medios artificiales.

Los estilos más comunes de diseño de arte glitch son la pixelización, los degradados de colores, las Filtraciones de luz, la Exposición doble, las texturas y las letras Glitch.

arte glitchglitch background

Estamos acostumbrados a que los diseñadores, trabajen esos efectos con programas como Photoshop o After Effect. Pero como diseñadores web, podemos también participar de esta tendencia creando por ejemplo efectos glitch a texto con CSS.

Y vamos a ver ahora como crear un efecto Glitch para texto solo con CSS.

1-Configuración para empezar nuestro efecto Glitch

En HTML solo voy a tener un párrafo con una class Glitch:

En CSS, vamos a introducir algunas propiedades a la class Glitch. Y para dar un efecto Glitch, una de las técnicas que podemos utilizar es el text-shadow:

El offset-x especifica la distancia horizontal, el offset-y especifica la distancia vertical, y el blur-radius (opcional) es el radio de difuminación.

En este caso, hemos creado 3 text-shadow de color: rojo, verde y azul. Pongamos a cada uno un offset-x distinto para que no se solapen. Y utilizamos la unida de medida em y no pixeles porque em es una unidad relativa. A decir que si cambio el tamaño de fuente del texto, el text-shadow se ajustara, crecerá o se encogerá en proporción al nuevo font-size.

text shadow css

 

2-Animación Text-shadow

De 0% a 100%, hay que crear varios puntos de la animación con valores diferentes de text-shadow, se puede jugar con esos valores para afinar el efecto buscado.

La animación, a este punto, funciona pero hay como una animación entre cada punto y vamos a querer corregir ese defecto.
Para eso, podemos crear otros puntos dentro de la animación al 14% con los valores del 0%, al 49% con los valores del 15%, al 99% con los valores del 50%.
De esta manera de 0 a 14%, los valores serán los mismos y la animación hará un salto al 15%, el mismo proceso se repetirá por los otros puntos de la animación.

3-Crear un efecto roto

Así que hemos conseguido el primer paso para obtener un efecto Glitch para nuestro texto. Pero queremos que tenga un aspecto un poco más roto. Podríamos utilizar pseudo-elementos, ::before y ::after, para aportar más texto que nos va a ayudar a crear ese efecto roto, pero no sabemos exactamente cómo los lectores de pantalla van a tratar este texto.

Otra solución, puede ser de abrir dos etiquetas <span> con el texto repetido. El texto será repetido 3 veces y para evitar que un lector de pantalla lo lea 3 veces, añadimos el atributo aria-hidden con el valor true dentro de las etiquetas <span>. Y luego hay que posicionar esos span en relación al texto

para que se pongan detrás de el:

Ahora vamos a querer animar cada texto de manera distinta y por eso vamos a utilizar la misma animación pero con una velocidad distinta cada vez:

El aspecto visual empieza a ser impactante pero aun nos falta el efecto roto, . Para hacer eso, vamos a utilizar unos clip-path para recortar parte de los span y utilizaremos la propiedad transform para desplazar un poco los span del texto original:

El resultado, antes de quitar el z-index y el color a los span, es el siguiente:clip path css

Para crear los clip-path, nos podemos ayudar del generador clippy:

clippy generador clip path

Una vez que quitamos las propiedades de z-index y color, ahora si! Hemos conseguido el efecto roto animado, y es muy Glitchy!
Podéis consultar el código entero aquí.

efecto glitch texto

Os animo a probar esos efectos ya que el arte glitch es una tendencia moderna llamativa, y no desaparecerá pronto. Porque cuanto más avance la tecnología, más oportunidades habrá para que esa tecnología se descomponga y para que los diseñadores reinterpreten estos defectos visualmente. De hecho es plenamente incluido en las nuevas tendencias en diseño web.

Así que a  medida que avanzan la tecnología y el arte glitch, siempre se presentarán nuevos territorios hacia lo desconocido en este campo del diseño web en constante expansión.

Escribe un comentario