Праздничный слой: декор меняется, структура нет

Урок 13.4 · Интерфейсы и сайты с нуля · Модуль 13. Один макет, разные стили · По подписке

Цель урока: Добавить праздничное оформление так, чтобы страница осталась той же страницей.

Нужно знать заранее: Урок 13.1

Объяснение

Зачем это нужно: Каждый декабрь на сайтах происходит одно и то же: к празднику всё перекрашивают, добавляют снежинки и гирлянды — и половина страницы перестаёт работать. Кнопка уезжает, потому что рядом встал Дед Мороз; заголовок обрезается, потому что над ним приклеили ленту; на телефоне декор закрывает половину экрана. Причина одна: праздничное оформление делают вместо структуры, а не поверх неё.

Как это работает: Праздничный стиль — это слой. Структура (какие блоки, в каком порядке, где главное действие) остаётся прежней; меняются только акцент, подложка, скругление и декор по краям. Технически это две вещи: другие значения переменных и отдельные декоративные элементы, которые не участвуют в потоке. Ключевое слово — «не участвуют в потоке». Декор ставится абсолютно (position: absolute) внутри контейнера с position: relative. Тогда он висит над страницей, но не сдвигает ни один блок: кнопка остаётся на своём месте, текст не переносится, высота карточки не меняется. И второе правило: декор отключаемый. У части людей включено «уменьшить движение» — им нельзя показывать покачивающиеся гирлянды. Поэтому анимация праздника всегда живёт за @media (prefers-reduced-motion: no-preference), а не просто так.

Уроки модуля 13

• 13.1 Стиль — это восемь настроек, а не «красиво» (бесплатно)
• 13.2 Деловой и премиальный: разница в воздухе, а не в цвете (по подписке)
• 13.3 Молодёжный, детский, школьный: кому какой кегль (по подписке)
• 13.4 Праздничный слой: декор меняется, структура нет — вы здесь (по подписке)
• 13.5 Проект: три брифа — три стиля на одной странице (по подписке)