Spaventoso Modelli CSS

Template CSS personalizzabili per uno stile horror

L'orrore risiede in piccole scelte visive, come il modo in cui un titolo si lacera ai bordi, come una scheda si immerge nell'oscurità o il mezzo secondo prima che un pulsante reagisca al cursore. I template CSS per un'atmosfera horror racchiudono queste scelte in un unico set di regole riutilizzabili, evitando che una campagna si trasformi in un ammasso di override unici che qualcuno dovrà poi districare il prossimo ottobre.

Classi riutilizzabili per definire il linguaggio visivo

Un set di elementi horror efficace rimane abbastanza piccolo da poter essere gestito mentalmente, e solitamente cinque o sei classi con nome sono sufficienti per un'intera campagna:

• .fog-overlay, una sfumatura pseudo-elemento che si muove lentamente su un'immagine scura;

• .glitch-title, un titolo con due copie sfalsate animate da keyframe;

• .flicker-text, un'animazione di opacità temporizzata come una lampadina che si guasta;

• .distressed-card, un blocco teaser con un bordo di maschera lacerato e un'ombra interna intensa.

Le regole con un nome specifico sono facili da gestire. La stessa carta con effetto invecchiato può essere utilizzata come descrizione di una stanza, membro del cast e articolo di merchandising, e i suoi colori, la spaziatura e le dimensioni dei caratteri possono essere modificati utilizzando un piccolo set di variabili.

Sfarfallio, nebbia, glitch: effetti da conservare

La moderazione è fondamentale per creare atmosfera ed evitare mal di testa. Due o tre componenti animate per schermata sono più che sufficienti, e oltre questo limite l'occhio smette di distinguere i dettagli, quindi l'elemento che si voleva mettere in evidenza perde gradualmente il suo effetto.

Trasformazioni e opacità sono strumenti economici, poiché le transizioni rimangono fluide anche sui telefoni più vecchi, mentre ombre e filtri animati costano molto di più. Sfumature e maschere creano nebbia, pietra umida e carta strappata senza bisogno di aggiungere immagini. I keyframe meritano nomi che ne descrivano la funzione, perché "sfarfallio" e "deriva" hanno ancora senso a distanza di un anno, mentre "anim2" non ne ha mai avuto. Anche le preferenze di riduzione del movimento meritano di essere rispettate, poiché un visitatore che ha chiesto al proprio sistema di rallentare l'immagine dovrebbe comunque ottenere la modalità scura senza tremolio.

Regole di responsività per schermi di larghezza ridotta

Gli schermi stretti penalizzano innanzitutto gli elementi decorativi. Una griglia di tre colonne di anteprime si riduce a una sola, la spaziatura generosa scompare e un titolo che sembrava scolpito su un monitor si trasforma in rumore. Gli effetti dovrebbero ridursi insieme alle colonne, il che di solito significa meno elementi in movimento, una dimensione del testo più piccola e un contrasto controllato rispetto allo sfondo più scuro del set.

Nicepage gestisce gran parte di questo aspetto tramite controlli visivi, mentre le regole mirate si occupano di ciò che le proprietà standard non possono gestire. La Guida al CSS personalizzato descrive come applicare classi e regole personalizzate a livello di elemento, pagina o sito.

Un set horror vale la pena di essere mantenuto quando un nuovo componente può essere aggiunto senza creare una nuova eccezione. Basta inserirlo in un blocco ticket, assegnargli le classi esistenti per le schede e i pulsanti e dovrebbe già apparire come se appartenesse a uno schermo scuro.