Страшно CSS шаблоны

Настраиваемые шаблоны CSS для создания жуткого стиля

Ужас заключается в небольших визуальных решениях, таких как то, как заголовок обрывается по краям, как карточка погружается во тьму или полсекунды перед реакцией кнопки на курсор. Шаблоны CSS для создания жуткого стиля объединяют эти решения в один многоразовый набор правил, поэтому кампания не превращается в кучу разовых переопределений, которые кому-то придется распутывать в следующем октябре.

Многоразовые классы формируют визуальный язык

Работающий набор правил для создания жуткого стиля остается достаточно небольшим, чтобы поместиться в вашей голове, и пять или шесть именованных классов обычно обеспечивают всю кампанию:

• .fog-overlay, псевдоэлемент градиента, медленно плавно скользящего по темному изображению;

• .glitch-title, заголовок с двумя смещенными копиями, управляемыми ключевыми кадрами;

• .flicker-text, анимация прозрачности, синхронизированная с перегоревшей лампочкой;

— .distressed-card, блок-тизер с рваным краем маски и плотной внутренней тенью.

Именованные правила хорошо переносятся. Одна и та же «потертая» карточка может служить описанием комнаты, персонажем и предметом товара, а ее цвета, интервалы и размеры шрифта можно изменять с помощью небольшого набора переменных.

Мерцание, туман, сбой: эффекты, которые стоит сохранить

Сдержанность отделяет атмосферу от головной боли. Двух-трех анимированных компонентов на экране вполне достаточно, а после этого глаз перестает что-либо различать, и элемент, который вы хотели привлечь внимание, незаметно теряет свой эффект.

Трансформации и прозрачность — дешевые инструменты, поскольку переходы с их помощью остаются плавными на старых телефонах, в то время как анимированные тени и фильтры стоят гораздо дороже. Градиенты и маски создают туман, влажный камень и рваную бумагу без единого дополнительного изображения. Ключевые кадры заслуживают названий, которые говорят сами за себя, потому что flicker и drift все еще имеют смысл спустя год, в то время как anim2 никогда не будет иметь смысла. Уменьшенные настройки анимации также заслуживают внимания, поскольку посетитель, попросивший систему «успокоиться», должен получить темный режим без дрожания.

Правила адаптивного дизайна при узкой ширине

Узкие экраны в первую очередь наносят ущерб оформлению. Трехколоночная сетка из тизерных карточек сжимается в одну, большие промежутки исчезают, а разорванный заголовок, который выглядел вырезанным на мониторе, превращается в шум. Эффекты должны уменьшаться вместе с колонками, что обычно означает меньшее количество движущихся элементов, меньший масштаб шрифта и проверку контраста на самом темном фоне в наборе.

Nicepage решает большую часть этих задач с помощью визуальных элементов управления, а целевые правила обрабатывают то, что стандартные свойства не могут решить. В руководстве по пользовательскому CSS описано, как применять классы и пользовательские правила на уровне элемента, страницы или сайта.

Набор элементов ужасов стоит сохранять, если к нему можно добавить новый компонент без создания новых исключений. Поместите его в блок тикетов, присвойте ему существующие классы карточки и кнопки, и он уже будет выглядеть так, будто ему место в темном окне.