Straszny Szablony CSS

Konfigurowalne, przerażające szablony CSS do stylizacji horrorów

Horror tkwi w drobnych decyzjach wizualnych, takich jak sposób, w jaki nagłówek rozrywa krawędzie, jak karta pogrąża się w ciemności, czy pół sekundy przed reakcją przycisku na kursor. Szablony CSS „Scary” przechowują te decyzje w jednym, wielokrotnego użytku zestawie reguł, dzięki czemu kampania nie zamienia się w stertę jednorazowych nadpisów, które ktoś będzie musiał rozwikłać w przyszłym październiku.

Klasy wielokrotnego użytku kształtują język wizualny

Praktyczny zestaw horrorów jest na tyle mały, że można go pomieścić w głowie, a pięć lub sześć nazwanych klas zazwyczaj zawiera całą kampanię:

• .fog-overlay, gradient pseudoelementów powoli przesuwający się po ciemnej grafice;
• .glitch-title, nagłówek z dwiema przesuniętymi kopiami sterowanymi klatkami kluczowymi;
• .flicker-text, animacja krycia zsynchronizowana jak przepalająca się żarówka;
• .distressed-card, blok zwiastuna z podartą krawędzią maski i gęstym wewnętrznym cieniem.

Nazwane zasady sprawdzają się znakomicie. Ta sama podarta karta służy jako opis pokoju, członek obsady i przedmiot handlowy, a jej kolory, odstępy i rozmiary czcionek można zmienić za pomocą niewielkiego zestawu zmiennych.

Migotanie, mgła, zakłócenia: Efekty warte zachowania

Powściągliwość oddziela atmosferę od bólu głowy. Dwa lub trzy animowane elementy na ekranie to wystarczająca ilość, a po przekroczeniu tej liczby oko przestaje cokolwiek dostrzegać, więc element, który chciałeś zauważyć, po cichu traci swój efekt.

Przekształcenia i krycie to tanie narzędzia, ponieważ przejścia na nich pozostają płynne na starszych telefonach, podczas gdy animowane cienie i filtry są znacznie droższe. Gradienty i maski tworzą mgłę, wilgotny kamień i podarty papier bez ani jednego dodatkowego obrazu. Klatki kluczowe zasługują na nazwy, które mówią, co robią, ponieważ flicker i drift nadal mają sens rok później, podczas gdy anim2 nigdy. Warto również uszanować preferencje dotyczące ograniczonego ruchu, ponieważ użytkownik, który poprosił system o uspokojenie, nadal powinien uzyskać tryb ciemny bez drgania.

Reguły responsywności przy wąskich szerokościach

Wąskie ekrany w pierwszej kolejności karzą za dekorację. Trzykolumnowa siatka kart teaserowych zapada się w jedną, duże odstępy znikają, a podarty nagłówek, który wyglądał na wycięty na monitorze, zamienia się w szum. Efekty powinny zmniejszać się wraz z kolumnami, co zazwyczaj oznacza mniej ruchomych elementów, mniejszą skalę czcionki i kontrast sprawdzany względem najciemniejszego tła w zestawie.

Nicepage rozwiązuje wiele z tych problemów za pomocą kontroli wizualnej, a ukierunkowane reguły radzą sobie z tym, czego nie potrafią obsłużyć standardowe właściwości. Przewodnik po niestandardowym CSS opisuje, jak stosować klasy i niestandardowe reguły na poziomie elementu, strony lub witryny.

Zestaw horroru warto zachować, gdy nowy komponent może do niego dołączyć bez generowania nowego wyjątku. Umieść go w bloku biletowym, przypisz mu istniejące klasy karty i przycisku, a powinien wyglądać, jakby należał do ciemności.