Cómo recortar esquinas y crear efecto glitch en CSS

Últimamente he estado rejugando uno de mis videojuegos favoritos, Cyberpunk 2077. Por alguna razón le he estado prestando especial atención a la UI y me ha fascinado la cantidad de pequeños detalles y animaciones que tiene.

Me pregunté si sería capaz de recrear algunos de estos elementos en CSS... y aquí estamos 😅

Botones

Captura de imagen de dos botones en Cyberpunk

En esta UI juegan mucho con esquinas recortadas y tratan de darle formas interesantes a la mayoría de elementos de la interfaz como iremos viendo más adelante.

Para recrear este efecto vamos a usar la propiedad clip-pathy a crear un 'falso borde' usando el elemento ::before, similar a cómo creamos los bordes en este otro efecto del que ya hablamos hace unos días.

De esta manera podemos 'emular' un borde en la esquina recortada y queda muy resultón.

<button class="cyberpunk_cut">Back</button>

¿Anidamiento en CSS Vanilla?

¡Sí! Aunque aún queda algún despistadillo que no lo sabe, el anidamiento se incluyó en CSS en el 2023. En su momento era el principal motivo por el que usaba precompiladores como SASS y es la razón por la que a día de hoy ya no los uso.

Banners informativos

Captura de imagen del inventario en Cyberpunk

Otro elemento que me ha parecido interesante como inspiración para crear un componente Alert es el que usan en Cyberpunk para los objetos en el inventario. Además de una esquina recortada, incluye una pequeña hendidura en la parte de la izquierda.

De nuevo, aquí vamos a echar mano de clip-path del mismo modo que hicimos con los botones y de los pseudo-elements ::before y ::after para crear el borde y la barra lateral de color.

Esto es una alerta
Esto es una info
import styles from "./CyberpunkInfo.module.css"
export function CyberpunkInfo({
  type = "alert",
  children,
}: {
  type?: "info" | "alert"
  children: React.ReactNode
}) {
  const infoMap = {
    alert: {
      color: "#a53633",
      icon: <AlertTriangle size={32} className="text-[#a53633]" />,
    },
    info: {
      color: "#2570d4",
      icon: <InfoIcon size={32} className="text-[#2570d4]" />, // Assuming InformationCircle is the correct icon for "info"
    },
  }

  const infoType: { color: string; icon: React.ReactNode } = infoMap[type as "info" | "alert"]
  return (
    <div className={`${styles.info}`} data-type={type}>
      <div className={styles.infoColor} />
      <div className="flex gap-2 items-center">
        {infoType.icon}
        {children}
      </div>
    </div>
  )
}

Imágenes

Para las imágenes, una vez más, vamos a echar mano de clip-path para crear ese borde con recortes tan futurista.

Cyberpunk.module.css
.cyberpunk_image {
  background-color: #f9f004;
  background-size: contain;
  clip-path: polygon(
    0px 25px,
    26px 0px,
    calc(60% - 25px) 0px,
    60% 25px,
    100% 25px,
    100% calc(100% - 10px),
    calc(100% - 15px) calc(100% - 10px),
    calc(80% - 10px) calc(100% - 10px),
    calc(80% - 15px) calc(100% - 0px),
    10px calc(100% - 0px),
    0% calc(100% - 10px)
  );
  padding: 30px 5px 15px 5px;
}

Glitch Effect

Y ahora que ya dominamos cómo crear bordes con esquinas recortadas y el uso de clip-path, os dejo aquí lo que veremos en la segunda parte:

Cómo animar este efecto glitch. Mientras tanto podéis ir cotilleando con el Inspector para ver cómo funciona.

Spoiler alert, volvemos a usar clip-path ¡Si es que esta propiedad sirve para mil cosas!