Градиентный разделитель между секциями

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

HTML:

<section class="section-red">
  <!-- Контент первой секции -->
</section>

<!-- Разделитель -->
<div class="section-divider"></div>

<section class="section-white">
  <!-- Контент второй секции -->
</section>

Здесь две секции и пустой div для разделителя.

Стили блоков разбирать не будем, перейдем сразу к разделителю:

.section-divider {
  position: relative;
  height: 54px; /* Высота градиентной зоны */
  overflow: hidden;
}

Фиксированная высота (3 полосы по 18px) и относительное позиционирование для работы с псевдоэлементами.

Создаём полосы:

.section-divider::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    #f87171 0px,    /* светло-красная полоса */
    #f87171 18px,
    #fecaca 18px,   /* ещё светлее */
    #fecaca 36px,
    #fef2f2 36px,   /* почти белая */
    #fef2f2 54px
  );
}

■ linear-gradient создаёт градиент сверху вниз.
■ Каждая пара значений задаёт одну полосу (начало и конец).
■ Полосы по 18px каждая, цвета от красного постепенно переходят к почти белому.
■ inset: 0 — псевдоэлемент растягивается на весь родитель.

Собственно, все, стильно, модно, молодежно)

Пример можно глянуть здесь.

Библиотека иконок на чистом CSS

Если вы ищете легкие и кастомизируемые решения для иконок, то обратите внимание на CSS＊GG.

Это библиотека иконок (open-source), в которой более 700 иконок реализованных в основном на чистом CSS.

Иконки доступны в нескольких форматах: чистый CSS, SVG и даже готовые пакеты для React.

Простое подключение, для конкретной иконки (например search) копируем CSS:

.gg-search {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1));
  width: 16px;
  height: 16px;
  border: 2px solid;
  border-radius: 100%;
  margin-left: -4px;
  margin-top: -4px;
}
.gg-search::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  border-radius: 3px;
  width: 2px;
  height: 8px;
  background: currentColor;
  transform: rotate(-45deg);
  top: 10px;
  left: 12px;
}

В HTML используем:

<i class="gg-search"></i>

Можно легко менять цвет, размер и т. п.

Неплохая альтернатива тяжёлым шрифтам вроде Font Awesome)

Необычный hover-эффект для изображений

Нашел один любопытный ховер-эффект для карточек с изображениями — раньше вроде бы не встречал. Выглядит так, будто картинка начинает «рассыпаться» в стороны при наведении. Делается это, конечно, немного геморно и не сказать, что код самый изящный, но если нужен нестандартный визуальный эффект, то можно попробовать)

HTML:

<div class="card">
  <img class="card-front-image" src="..." />
  <div class="card-faders">
    <img class="card-fader" src="..." />
    <!-- ещё 7 копий -->
  </div>
</div>

card-front-image — основная картинка (всегда видна). card-faders — контейнер со скрытыми копиями, которые активируются при :hover.

CSS:

.card-faders {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  opacity: 0;
  transition: opacity 1500ms;
}

Контейнер .card-faders растянут на всю карточку, копии изначально невидимы.

Активация при наведении:

.card:hover .card-faders {
  opacity: 1;
}

При наведении на .card контейнер с копиями плавно проявляется за 1.5 секунды.

Распределение анимаций:

.card-fader:nth-child(odd) {
  animation: fade-left 3s linear infinite;
}
.card-fader:nth-child(even) {
  animation: fade-right 3s linear infinite;
}

Разделяем копии на две группы:
■ Нечётные (1-я, 3-я, 5-я, 7-я) получают анимацию fade-left — будут уходить влево.
■ Чётные (2-я, 4-я, 6-я, 8-я) получают анимацию fade-right — будут уходить вправо.

Волновой эффект:

.card-fader:is(:nth-child(3), :nth-child(4)) {
  animation-delay: 750ms;
}
.card-fader:is(:nth-child(5), :nth-child(6)) {
  animation-delay: 1500ms;
}
.card-fader:is(:nth-child(7), :nth-child(8)) {
  animation-delay: 2250ms;
}

1-я и 2-я копии — стартуют сразу (задержки нет). 1-я идёт влево, 2-я вправо.
3-я и 4-я копии — стартуют через 750ms.
5-я и 6-я копии — стартуют через 1500ms.
7-я и 8-я копии — стартуют через 2250ms.

Анимация:

@keyframes fade-left {
  from {
    scale: 1;
    translate: 0%;
    opacity: 1;
  }
  to {
    scale: 0.8;
    translate: -30%;
    opacity: 0;
  }
}

И тоже самое для fade-right, только translate: 30%;

В итоге мы получаем эффект, который сложно назвать «чистым» или универсальным, но он точно выглядит необычно)

Упростить его можно с помощью JS, чтобы генерировать копии динамически и гибко настраивать параметры.

Результат можно найти здесь.

Flip-карточка на чистом CSS

Давайте сегодня разберём, как создать интерактивную flip-карточку, с переворотом по клику без JS.

HTML:

<label class="flip-card">
  <input type="checkbox" class="flip-checkbox">
  <div class="flip-inner">
    <div class="card front">
      Hello
    </div>
    <div class="card back">
      Привет
    </div>
  </div>
</label>

Оборачиваем всё в label, чтобы при клике в любое место карточки checkbox менял своё состояние.

Сам checkbox скрываем:

.flip-checkbox {
  display: none;
}

3D-контекст:

.flip-card {
  perspective: 1000px;
}

perspective создаёт глубину для 3D-преобразований.

Основной механизм flip:

.flip-inner {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.flip-checkbox:checked + .flip-inner {
  transform: rotateY(180deg);
}

При клике на checkbox (через label) контейнер поворачивается на 180 градусов по оси Y.

Две стороны одной карточки:

.card {
  position: absolute;
  backface-visibility: hidden;
}

.card.back {
  transform: rotateY(180deg);
}

Обе стороны абсолютно позиционированы. backface-visibility: hidden скрывает обратную сторону элемента. Задняя сторона изначально развёрнута на 180 градусов.

Идеально подходит для карточек с вопросами/ответами, изучения языков или просто интерактивных элементов)

Результат можно глянуть здесь.

Интерактивная галерея без JS

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

HTML:

<input type="radio" name="slider" id="c1" checked>
<label class="card" for="c1"></label>

Основа галереи — группа радиокнопок, где каждая кнопка соответствует своему изображению. Атрибут name="slider" объединяет их в группу, позволяя выбрать только один элемент.

CSS:

input {
  display: none; 
}

.card {
  width: 90px;
  height: 420px;
  transition: 0.6s cubic-bezier(.25,.8,.25,1); 
}

■ Скрываем сами радиокнопки.
■ Задаем базовые размеры.
■ Применяем transition для плавности.

Изменение состояния:

input:checked + .card {
  width: 520px;
  filter: grayscale(0);
}

Когда радиокнопка активна, соседний лейбл (+) расширяется до 520px и становится цветным. Остальные карточки автоматически сжимаются.

Фоновые изображения:

[for="c1"] { background-image: url("..."); }

Селектор по атрибуту назначает каждой карточке своё изображение.

В итоге, радиокнопки управляют состоянием, псевдокласс :checked применяет стили, а transition делает всё плавным.

Пример можно найти здесь.

Hover-эффект карточек с выезжающим контентом

Сегодня разберем, как создать стильную карточку с контентом, который проявляется при наведении. Главная фишка здесь — игра с позиционированием и трансформацией.

HTML:

<div class="card">
  <div class="img-box"><img src="..."></div>
  <div class="content">
    <h2>Leafs</h2>
    <p>Lorem ipsum...</p>
    <a href="#">Read More</a>
  </div>
</div>

Карточка содержит блок с изображением и блок с контентом.

Базовые стили карточки:

.card {
  position: relative;
  width: 350px;
  height: 300px;
  transition: 0.5s;
}

.card:hover {
  height: 400px;
}

■ position: relative нужен, чтобы абсолютно позиционировать картинку и контент внутри карточки.
■ При ховере карточка увеличивается на 100px, освобождая место под текст.

Блок с изображением:

.img-box {
  position: absolute;
  top: 20px;
  width: 300px;
  height: 220px;
  overflow: hidden;
  transition: 0.5s;
}
.card:hover .img-box {
  top: -100px;
  scale: 0.75;
}

■ Картинка вынесена в position: absolute, чтобы она могла выходить за границы карточки.
■ При наведении - картинка уезжает вверх за границы карточки и уменьшается до 75% размера.

Контент карточки:

.content {
  position: absolute;
  top: 252px;
  overflow: hidden;
  transition: 0.5s;
}

.card:hover .content {
  top: 130px;
  height: 250px;
}

Контент изначально обрезан overflow: hidden. При наведении поднимается вверх и раскрывается на полную высоту.

Весь эффект получается за счет абсолютного позиционирования блоков внутри карточки, изменения top и scale при наведении и плавный transition: 0.5s для анимации.

Простой, но эффектный способ оживить карточки на сайте)

Результат можно посмотреть здесь.

Интерактивная карта с 500 000+ телеграм-каналов

На днях товарищ скинул интересную карту телеграм-каналов, которую создали ребята из TGPages.

Я конечно, сразу пошел проверять,есть там наш "Формошлёп" или нет)

Все в порядке, канал на месте. Правда, его почему-то отнесли к тематике «Дизайн и креатив», странновато, конечно, но мб из-за того, что в описании указано, что мы здесь "шлёпаем формы и красим кнопки") Ну да ладно.

В общем, карта интересная и залипательная, выполнена в виде звездного неба, со своими галактиками и созвездиями, разбитыми по тематикам. Каждая звезда — отдельный канал с описанием и т.п.

Если интересно посмотреть на масштабы телеграм-каналов и найти что-нибудь новое — вот ссылка: https://tgpages.com/atlas/map/

Анимированная градиентная рамка на CSS

Сегодня разберем красивый и модный визуальный эффект — анимированную градиентную рамку, которая красиво переливается.

HTML:

<div class="rainbow"></div>

Контейнер для карточки.

CSS для карточки:
.rainbow {
position: relative;
width: 400px;
height: 300px;
border-radius: 12px;
overflow: hidden;
}
Задаем размеры и скругляем углы. overflow: hidden — обрезаем все, что выходит за пределы контейнера.

Вращающийся слой:

.rainbow::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: conic-gradient(red, orange, yellow, red);
  animation: rotate 4s linear infinite;
}

Создаем градиент, который в 2 раза шире и выше самого родителя. Сдвигая его на top: -50%; left: -50%;, мы центрируем его относительно нашего .rainbow, а animation заставляет этот слой бесконечно вращаться.

Белый внутренний слой:

.rainbow::after {
  content: "";
  position: absolute;
  inset: 10px;
  background: white;
  border-radius: 8px;
}

Накрываем вращающийся градиент почти полностью, оставляем видимыми только 10 пикселей по периметру — это и есть наша рамка.

Анимация:

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

Простая анимация, которая вращает ::before на 360 градусов.

Такой эффект отлично подойдет для привлечения внимания к важным элементам на странице)

Результат, как всегда, здесь.

Выбор диапазона элементов в списке

Иногда нужно выделить конкретный диапазон элементов — например, с 7 по 14. Без классов, без JS, только на CSS. Давайте разберем, как это можно сделать.

HTML:

<ol>
  <li>Элемент списка</li>
  ...
  <li>Элемент списка</li>
</ol>

Здесь у нас обычный нумерованный список.

CSS:

.ol li:nth-child(n + 7):nth-child(-n + 14) {
  background: lightpink;
}

Выбираем элементы с 7 по 14 включительно, разберем подробней:
■ :nth-child(n + 7) - выбирает все элементы, начиная с 7-го и до конца списка (7, 8, 9, 10... 20).
■ :nth-child(-n + 14) - выбирает все элементы от начала списка до 14-го включительно (1, 2, 3... 14).
■ Комбинация обоих - когда мы соединяем оба селектора, браузер выбирает элементы, которые подходят И первому, И второму условию. Это пересечение дает нам диапазон 7–14.

В общем:
■ :nth-child(n + START) — выбирает от START до конца.
■ :nth-child(-n + END) — выбирает от начала до END.
■ Комбинация даёт диапазон START–END.

Такой вот небольшой лайфхак, если нужно выделить диапазон)

Пример тут.

Самая полная открытая библиотека

Если вы любите читать или просто иногда ищете книги для обучения и т.п., то у меня для вас есть отличная находка — Anna's Archive.

Это «теневая» библиотека, цель которой — сделать знания доступными для всех. На данный момент там более 63 млн книг.

Там есть все:
■ художественная литература
■ научные работы
■ учебники
■ редкие и давно изданные книги

По сути, это поисковик по миллионам книг в разных форматах: PDF, EPUB, MOBI и других, подходящих для читалок и планшетов.

Если не знали про это раньше (как я), то теперь знайте)

Зеркала:
https://annas-archive.li/
https://annas-archive.gl/

Группировка выбранных элементов

Сегодня разберем, как можно визуально группировать выбранные элементы. Если отметить несколько пунктов подряд, они "склеятся" в единый блок, потеряв скругления между собой.

HTML:

<div class="card">
  <label><input type="checkbox">Первый элемент</label>
  <label><input type="checkbox" checked>Второй элемент</label>
  <label><input type="checkbox" checked>Третий элемент</label>
  <label><input type="checkbox">Четвертый элемент</label>
</div>

Каждый label содержит чекбокс и текст. Кликать можно по всей области строки.

Базовое выделение:

label:has(input:checked) {
  background: #d4f7d4;
  border-radius: 8px;
}

Каждый отмеченный label получает зелёный фон и скругление со всех четырёх сторон.

Если выбран сосед сверху:

label:has(input:checked) + label:has(input:checked) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

Если текущий label идёт сразу после другого выбранного label - убираем верхние скругления.

Если выбран сосед снизу:

label:has(input:checked):has(+ label input:checked) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

Если после текущего label идёт ещё один выбранный - убираем нижние скругления.

В результате несколько выбранных элементов подряд выглядят как один цельный блок)

Потестить код можно здесь.

Инструменты меняются — проблема вечна)

Интересный фон с линейным градиентом

Давайте разберем, как с помощью простого CSS-градиента сделать красивый фон для блока.

HTML:

<header class="intro">
  <div class="intro-body">
    <h1>Формошлёп</h1>
    <p>Шлёпаем формы и красим кнопки...</p>
  </div>
</header>

Просто блок с контентом.

CSS:

.intro {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

Центрируем наш блок с контентом.

Градиент:

background: linear-gradient(
  45deg,
  #ffcc5c 20%,
  #3c3c3c 20% 50%,
  #ff6f69 50% 80%,
  #96ceb4 80%
);

Это жесткий градиент — переходы между цветами резкие, без плавного смешения.
Каждая пара значений после цвета, задаёт диапазон, который этот цвет занимает:
■ #ffcc5c 20% — желтый от 0% до 20%
■ #3c3c3c 20% 50% — темно-серый от 20% до 50%
■ #ff6f69 50% 80% — розовый от 50% до 80%
■ #96ceb4 80% — зеленый от 80% до 100%

Когда начало одного цвета совпадает с концом предыдущего, граница становится резкой. Именно это создает эффект геометрических цветных полос, а не размытого перехода.

Такой фон отлично подойдет, например, для первого экрана лендинга или какого-нибудь блока для привлечения внимания юзера)

Весь код можно найти здесь.

Анимированное волнистое подчёркивание ссылок на CSS

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

HTML:

<p>Lorem <a href="#">ipsum dolor</a> sit amet.</p>

CSS:

a {
  background: linear-gradient(to bottom, #ff9800 0%, #ff9800 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 3px 3px;
  color: #000;
  text-decoration: none;
}

a:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ff9800' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-size: auto 6px;
  background-repeat: repeat-x;
}

В обычном состоянии подчёркивание имитируется через background — тонкая полоска снизу вместо стандартного text-decoration. При hover меняем оранжевую заливку на анимированный SVG-рисунок волнистой линии.

Если закодированный XML привести в человеческий вид, то получим:

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'>
  <style>
    .squiggle {
      animation: shift .3s linear infinite;
    }
    @keyframes shift {
      from { transform: translateX(0); }
      to { transform: translateX(-20px); }
    }
  </style>
  <path fill='none' stroke='#ff9800' stroke-width='2' class='squiggle' 
        d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3' />
</svg>

Волнистый путь <path> с кривыми Безье и CSS-анимация, которая сдвигает волну влево ровно на 20px. В момент, когда одна копия уходит влево, следующая уже стоит на её месте. Стык невидим, потому что волна симметрична — и получается бесшовный бесконечный поток.

Такой вот интересный эффект получается)

Пример лежит здесь.

Анимированные карточки на CSS

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

HTML:

<article class="card" style="--clr:#89ec5b">
  <i class="card__icon fa-solid fa-paintbrush"></i>
  <h3>Designing</h3>
  <p>Lorem Ipsum is simply dummy text of the printing industry.</p>
  <a href="#">Read More</a>
</article>

Сама карточка, style="--clr:#89ec5b" - переменная, которая определяет основной цвет карточки.

Иконка:

.card__icon {
  box-shadow:
    0 0 0 4px var(--bg),
    0 0 0 6px var(--clr);
}

Два слоя box-shadow без blur создают эффект двойной рамки вокруг иконки: сначала зазор цвета фона, потом обводка цветом карточки.

При наведении радиус второго слоя увеличивается до 300px — и тень буквально заполняет всю карточку:

.card:hover .card__icon {
  box-shadow:
    0 0 0 4px var(--bg),
    0 0 0 300px var(--clr);
}

Кнопка:

.card a {
  background: var(--clr);
  border: 2px solid var(--clr);
  color: #2e2e2e;
}

.card:hover a {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--clr);
}

До hover — залитая кнопка цветом карточки. После — инвертируется: фон тёмный, текст цветной. border-color тоже меняется на тёмный, иначе граница сольётся с цветным фоном карточки.

В итоге, весь эффект держится на трех вещах:
■ CSS-переменная --clr для цвета.
■ box-shadow с большим радиусом как «заливка».
■ overflow: hidden чтобы тень не вылезала.

Такой вот простой, но эффектный трюк с тенью)

Потестить можно здесь.

Масштабное обновление — CodePen 2.0

Популярная «песочница» выкатила масштабное обновление (пока в бете), которое превращает сервис из блокнота в полноценную IDE.

Что изменилось?

■ Файловая система: теперь можно создавать папки, кучу файлов и импортировать их друг в друга. Любой пен — это теперь мини-проект.

■ Система блоков: больше не нужно копаться в настройках, чтобы включить Sass или Tailwind. Просто добавляешь нужный «блок» в проект. Можно комбинировать несколько препроцессоров сразу.

■ Мульти-таскинг: вкладки можно группировать, перетаскивать и открывать несколько редакторов одновременно. Удобно, если верстаешь и правишь JS в разных углах экрана.

■ Движок: редактор стал быстрее, доступнее и обзавелся кучей новых шрифтов и тем.

Если еще не пробовали, попробуйте - https://codepen.io/beta

Раскрываем блок по чекбоксу

Иногда бывает нужно показать дополнительные поля в форме, если юзер поставит галочку в чекбоксе. Рассмотрим, как это можно сделать на чистом CSS.

HTML:

<div class="card">
  <div class="card__header">
    <input type="checkbox" id="open">
    <label for="open" class="card__title">Toggle content</label>
  </div>
  <div class="content">
    <div class="content__inner">
      <!-- доп. поля -->
    </div>
  </div>
</div>

Чекбокс и лейбл находятся в одном контейнере .card__header, а скрываемый блок .content идет следом.

Анимация высоты:

.content {
  display: grid;
  grid-template-rows: 0fr;  /* Начальное состояние — высота 0 */
  transition: grid-template-rows .35s ease;
}

.content__inner {
  overflow: hidden; /* Прячем текст при 0fr */
}

Когда мы применяем grid-template-rows: 0fr, грид сжимает строку до нулевой высоты. Благодаря overflow: hidden контент становится невидимым. Плюс grid-template-rows можно анимировать.

Переключение:

.card__header:has(input:checked) ~ .content {
  grid-template-rows: 1fr;
}

■ .card__header:has(input:checked) — мы ищем заголовок, внутри которого есть отмеченный чекбокс.
■ ~ .content — если такой заголовок найден, применяем стили к соседнему блоку .content, который идет после него.
■ grid-template-rows: 1fr — меняем высоту трека на 1fr (весь доступный контент). Grid плавно анимирует это изменение.

Можно использовать для форм с необязательными блоками: доставка, юрлицо, промокод и т.д.)

Потестить можно здесь.

Эффект темной сетки с виньеткой на чистом CSS

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

HTML:

<div class="vignette"></div>

<div class="grid-content">
  <h2>Grid Template</h2>
  <p>Ваш текст здесь...</p>
</div>

Разделяем декоративный слой с затемнением по краям и контент.

Сетка через background-image:

body {
  background-image: 
    linear-gradient(var(--grid) var(--line), transparent var(--line)),
    linear-gradient(90deg, var(--grid) var(--line), transparent var(--line));
  background-size: var(--size) var(--size);
}

Два градиента рисуют горизонтальные и вертикальные линии, а background-size задаёт размер ячейки.

Виньетка:

.vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}

Отдельный div поверх фона. fixed + inset: 0 — растягивается на весь экран и не влияет на высоту страницы. pointer-events: none — клики проходят насквозь. Радиальный градиент затемняет края, центр остаётся чистым.

CSS-переменные в :root:

:root {
  --bg: #0a0a0a;
  --grid: rgba(255, 255, 255, 0.08);
  --size: 40px;
  --line: 1px;
}

Все, что нужно настроить — в одном месте. Хочешь синюю сетку покрупнее — меняешь две переменные, а не лезешь в середину кода.

Вот так из простых HTML-тегов и пары CSS-свойств получается стильный и современный интерфейс)

Пример можно глянут тут.

Эффект стопки карточек на чистом CSS

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

HTML:

<section>
  <h2>Section title</h2>
  <p>Lorem Ipsum is simply dummy text of the printing...</p>
</section>
<!-- у нас будет 5 таких карточек -->

Карточки:

section {
  --i: 0;
  width: min(100% - 2rem, 32em);
  margin-inline: auto;
  padding: 2em;
  min-height: 100vh;
  position: sticky;
  bottom: 0;
  translate: calc((2 - var(--i)) * 1em) 0;
  z-index: calc(10 - var(--i));
  scroll-snap-align: start;
}

■ position: sticky + bottom: 0 — фиксирует элемент относительно нижней границы контейнера. При скролле вверх секция «прилипает» к низу вьюпорта, создавая эффект накопления.
■ min-height: 100vh — каждая секция занимает всю высоту экрана.
■ translate: calc((2 - var(--i)) * 1em) 0 — создаёт горизонтальный разброс карточек — веером от правой к левой. --i — кастомное свойство, меняется для каждой секции.
■ z-index: calc(10 - var(--i)) — управляет порядком наложения. У первой секции индекс выше, у последней — ниже. Благодаря этому верхняя карточка всегда поверх.

Назначение переменных --i:

section:nth-child(1) { --i: 0; background: #FFCDD2; }
section:nth-child(2) { --i: 1; background: #F8BBD0; }
section:nth-child(3) { --i: 2; background: #E1BEE7; }
section:nth-child(4) { --i: 3; background: #D1C4E9; }
section:nth-child(5) { --i: 4; background: #C5CAE9; }

Каждой секции задается свой индекс и свой цвет. Индекс участвует в расчетах сдвига и z-index.

Простой, но интересный эффект, который можно использовать для лендингов, портфолио и т.п.)

Посмотреть можно здесь.

Gooey-эффект для бургер-меню на CSS+SVG

Анимация кнопки меню — это мелочь, которая сразу бросается в глаза. Сегодня разберем, как сделать эффект "слипания" элементов без canvas и без JS-библиотек.

HTML:

<div class="burger" id="burger">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

Три блока — три полоски будущего крестика.

SVG-фильтр:

<filter id="g">
  <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
  <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" result="g" />
  <feComposite in="SourceGraphic" in2="g" operator="atop" />
</filter>

■ feGaussianBlur — размывает элементы.
■ feColorMatrix — усиливает контраст (делает "слипание").
■ feComposite — накладывает результат обратно.

CSS-анимация:

.burger.active .bar:nth-child(1) {
  transform: rotate(-45deg) translate(-50px, 50px);
}
.burger.active .bar:nth-child(2) {
  transform: rotate(45deg);
}
.burger.active .bar:nth-child(3) {
  transform: rotate(-45deg) translate(50px, -50px);
}

■ Первая полоска поворачивается на -45° и сдвигается влево-вниз.
■ Вторая просто поворачивается на 45° — становится центром креста.
■ Третья поворачивается на -45° и сдвигается вправо-вверх.

Небольшая задержка на втором и третьем:

.bar:nth-child(2),
.bar:nth-child(3) {
  transition-delay: 100ms;
}

Без неё все три бара двигаются одновременно и эффект слипания не успевает сработать.

Активация по клику:

const burger = document.getElementById('burger');
burger.onclick = () => burger.classList.toggle('active');

клик → добавляется класс → запускается анимация

В итоге, обычный бургер + SVG-фильтр = необычный визуальный эффект)

Пример код здесь.

Эффект "стопки бумаги" на CSS

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

HTML:

<div class="card">
  <p>Текст...</p>
  <p>Текст...</p>
</div>

Карточка:

.card {
  width: 100%;
  max-width: 600px;
  padding: clamp(1.5rem, 5vw, 4rem);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  position: relative;
}

■ padding: clamp(1.5rem, 5vw, 4rem); — адаптивные отступы
■ position: relative — база для псевдоэлементов
■ background, border-radius, box-shadow — задаём один раз, а псевдоэлементы заберут их через inherit

Псевдоэлементы:

.card::before, .card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  box-shadow: inherit;
  border-radius: inherit;
  z-index: -1;
}

■ создаём 2 копии карточки
■ они лежат под основной (z-index: -1)
■ полностью повторяют стиль (inherit)

.card::before {
  transform: rotate(1.5deg) translateY(4px);
}
.card::after {
  transform: rotate(-1.5deg) translateY(-4px);
}

rotate + translateY на каждом псевдоэлементе в разные стороны создают ощущение что листы лежат вразброс.

Получаем довольно простой и элегантный эффект без наворотов)

Пример можно посмотреть здесь.