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

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

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

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

Практичный хоррор-набор остается достаточно компактным, чтобы его можно было держать в голове; пяти или шести именованных классов обычно хватает для поддержки целой кампании:

• .fog-overlay — градиент на псевдоэлементе, медленно плывущий над темным фоновым изображением;
• .glitch-title — заголовок с двумя смещенными копиями, управляемыми через keyframes;
• .flicker-text — анимация непрозрачности с интервалами перегорающей лампочки;
• .distressed-card — блок-тизер с рваным краем маски и плотной внутренней тенью.

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

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

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

Трансформации и непрозрачность — экономичные инструменты, поскольку переходы на их основе остаются плавными даже на старых телефонах, тогда как анимированные тени и фильтры требуют несоизмеримо больше ресурсов. Градиенты и маски создают туман, сырой камень и рваную бумагу без единого дополнительного изображения. Для keyframes стоит выбирать говорящие названия: flicker и drift останутся понятными и через год, тогда как anim2 не скажет ничего. Следует учитывать и настройки уменьшения движения (reduced motion): посетитель, запросивший в системе щадящий режим, все равно должен получить темную тему, но уже без тряски.

Адаптивные правила для малой ширины экрана

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

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

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