De Miedo Plantillas CSS

Plantillas CSS personalizables para un estilo de terror

El terror reside en pequeños detalles visuales, como el desgarro de los bordes de un título, la forma en que una tarjeta se hunde en la oscuridad o el breve instante en que un botón reacciona al cursor. Las plantillas CSS para terror mantienen estas decisiones en un conjunto de reglas reutilizables, evitando que una campaña se convierta en un cúmulo de modificaciones puntuales que alguien tendrá que desenredar el próximo octubre.

Clases reutilizables que dan forma al lenguaje visual

Un conjunto de reglas de terror eficaz se mantiene lo suficientemente compacto como para recordarlo fácilmente, y cinco o seis clases con nombre suelen ser suficientes para toda una campaña:

• .fog-overlay, un degradado que simula un pseudoelemento y se desliza lentamente sobre una ilustración oscura;

• .glitch-title, un título con dos copias desplazadas controladas por fotogramas clave;

• .flicker-text, una animación de opacidad que simula una bombilla fundiéndose;

• .distressed-card, un bloque de avance con un borde de máscara rasgado y una sombra interior intensa.

Las reglas con nombre son fáciles de usar. La misma tarjeta desgastada sirve como descripción de la habitación, miembro del elenco y artículo de merchandising, y sus colores, espaciado y tamaño de fuente se pueden modificar con un pequeño conjunto de variables.

Parpadeo, Niebla, Fallo: Efectos que vale la pena conservar

La moderación es clave para crear una atmósfera agradable y evitar molestias. Dos o tres elementos animados por pantalla son suficientes; a partir de ahí, el ojo deja de distinguir detalles, por lo que el elemento que se quería destacar pierde sutilmente su efecto.

Las transformaciones y la opacidad son herramientas económicas, ya que las transiciones se mantienen fluidas en teléfonos antiguos, mientras que las sombras animadas y los filtros son mucho más costosos. Los degradados y las máscaras crean niebla, piedra húmeda y papel rasgado sin necesidad de imágenes adicionales. Los fotogramas clave merecen nombres que describan su función, ya que términos como «parpadeo» y «deriva» siguen teniendo sentido un año después, mientras que «anim2» ya no. También es importante respetar las preferencias de movimiento reducido, ya que un visitante que haya solicitado a su sistema que reduzca la velocidad de movimiento debería poder disfrutar del modo oscuro sin vibraciones.

Reglas de Adaptabilidad en Pantallas Reducidas

Las pantallas estrechas penalizan la decoración en primer lugar. Una cuadrícula de tres columnas de tarjetas de presentación se reduce a una sola, el espaciado generoso desaparece y un título que parecía grabado en un monitor se convierte en ruido visual. Los efectos deben reducirse junto con las columnas, lo que generalmente implica menos elementos en movimiento, una escala de texto más pequeña y un contraste ajustado al fondo más oscuro del conjunto.

Nicepage soluciona gran parte de esto mediante controles visuales, y las reglas específicas gestionan lo que las propiedades estándar no pueden abordar. La Guía de CSS Personalizado describe cómo aplicar clases y reglas personalizadas a nivel de elemento, página o sitio web.

Vale la pena conservar un conjunto de terror cuando se puede agregar un nuevo componente sin necesidad de una nueva excepción. Simplemente colócalo en un bloque de tickets, asígnale las clases de tarjeta y botón existentes, y debería integrarse perfectamente en la oscuridad.