Unheimlich CSS-Vorlagen

Anpassbare, gruselige CSS-Vorlagen für Horror-Styling

Horror lebt von kleinen visuellen Details: Wie eine Überschrift an den Rändern ausfranst, wie eine Karte im Dunkeln versinkt oder wie kurz ein Button auf den Cursor reagiert. Gruselige CSS-Vorlagen bündeln diese Details in einem wiederverwendbaren Regelsatz. So wird eine Kampagne nicht zu einem unübersichtlichen Haufen einzelner Anpassungen, den jemand im nächsten Oktober entwirren muss.

Wiederverwendbare Klassen prägen die visuelle Sprache

Ein effektives Horror-Set bleibt übersichtlich und lässt sich leicht merken. Fünf oder sechs benannte Klassen reichen meist für eine ganze Kampagne aus:

• .fog-overlay, ein Pseudo-Element mit Farbverlauf, der langsam über dunkle Grafiken schwebt;

• .glitch-title, eine Überschrift mit zwei versetzten Kopien, gesteuert durch Keyframes;

• .flicker-text, eine Transparenzanimation, die wie eine flackernde Glühbirne wirkt;

• .distressed-card, ein Teaser-Block mit zerrissener Maskenkante und starkem Innenschatten.

Benannte Regeln sind leicht wiederverwendbar. Dieselbe Karte mit dem abgenutzten Hintergrund dient als Raumbeschreibung, Darstellung eines Darstellers und als Merchandise-Artikel. Farben, Abstände und Schriftgrößen lassen sich mit wenigen Variablen anpassen.

Flackern, Nebel, Glitch: Effekte, die man behalten sollte

Zurückhaltung ist der Schlüssel zu einer gelungenen Atmosphäre. Zwei oder drei animierte Elemente pro Bildschirm reichen völlig aus. Darüber hinaus verliert das Auge an Wahrnehmungsschärfe, und das gewünschte Element verliert unmerklich seine Wirkung.

Transformationen und Deckkraft sind kostengünstige Werkzeuge, da Übergänge auch auf älteren Smartphones flüssig laufen, während animierte Schatten und Filter deutlich mehr Aufwand erfordern. Verläufe und Masken erzeugen Nebel, feuchten Stein und zerrissenes Papier ohne zusätzliche Bilder. Keyframes verdienen aussagekräftige Namen, denn Begriffe wie „Flimmern“ und „Driften“ sind auch nach einem Jahr noch verständlich, während „anim2“ völlig aus der Mode gekommen ist. Auch die Einstellung für reduzierte Bewegungen sollte beachtet werden, denn ein Besucher, der sein System um eine ruhigere Darstellung gebeten hat, sollte den Dunkelmodus ohne Ruckler nutzen können.

Responsive Regeln für schmale Bildschirmbreiten

Schmale Bildschirme bestrafen vor allem die Gestaltung. Ein dreispaltiges Raster mit Teaserkarten wird zu einer einzigen Spalte zusammengefaltet, großzügige Abstände verschwinden, und eine Überschrift, die auf einem Monitor wie aus dem Bilderrahmen geschnitten aussah, wirkt plötzlich unübersichtlich. Effekte sollten sich mit den Spalten verkleinern, was in der Regel bedeutet: weniger bewegliche Elemente, eine kleinere Schriftgröße und ein Kontrast, der sich vom dunkelsten Hintergrund des Sets unterscheidet.

Nicepage deckt viele dieser Aspekte durch visuelle Steuerelemente ab, und gezielte Regeln kümmern sich um das, was Standardeigenschaften nicht abdecken können. Der Leitfaden für benutzerdefiniertes CSS beschreibt, wie Klassen und benutzerdefinierte Regeln auf Element-, Seiten- oder Website-Ebene angewendet werden.

Ein Set mit vielen Elementen ist dann sinnvoll, wenn sich eine neue Komponente ohne zusätzliche Ausnahmen einfügen lässt. Fügen Sie sie in einen Ticketblock ein, weisen Sie ihr die vorhandenen Karten- und Schaltflächenklassen zu, und sie sollte bereits so aussehen, als gehöre sie in die Dunkelheit.