Формошлёп

Библиотека иконок на чистом 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; translat

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 на каждом псевдоэлементе в разные стороны создают ощущение что листы лежат вразброс. Получаем довольно простой и элегантный эффект без наворотов) Пример можно посмотреть здесь.

Интересный вариант CSS-аккордеона Давайте разберем еще один способ необычной стилизации аккордеона на <details>. HTML: <details name="accordion" open style="--bg:#620808; --color:#f4ce74;"> <summary> <span>Location</span> <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <polyline points="6 9 12 15 18 9"/> </svg> </summary> <p>Контент...</p> </details> ■ <details> — контейнер аккордеона. ■ <summary> — всегда видимый заголовок, по клику открывает/закрывает блок. ■ name="accordion" — заставляет работать группу как настоящий аккордеон (открывается только один). ■ open — по умолчанию блок развёрнут. ■ --bg:#620808; --color:#f4ce74; - стилизация через CSS-переменные. CSS: summary { display: flex; align-items: center; list-style: none; background: var(--bg); color: var(--color); } .arrow { transition: 0.2s; } details[open] .arrow { transform: rotate(180deg); } p { background: var(--bg); color: var(--color); } ■ display: flex + align-items: center — иконка, текст и стрелка выстраиваются в ряд и выравниваются по вертикали. ■ list-style: none — убирает стандартный треугольник браузера у <summary>. ■ background: var(--bg) и color: var(--color) — берут цвета из переменных, которые мы задали прямо в style на каждом <details>. Одно правило работает для всех пунктов сразу. ■ details[open] .arrow — селектор срабатывает когда блок раскрыт. Браузер автоматически добавляет атрибут open на <details> при клике и убирает при закрытии. Мы просто вешаем на него стиль. transition: 0.2s на .arrow делает поворот плавным. Вот такая вот интересная идея) Пример можно посмотреть тут.

Стилизация границы карточки Сегодня разберем небольшой, но очень интересный прием — карточку с «стеклянным» эффектом. HTML: <div class="card"> <div> <h2>Card</h2> <h3>Lorem ipsum</h3> </div> <div> <a href="#" id="link1">Button 1</a> <a href="#" id="link2">Button 2</a> </div> </div> Два блока внутри .card, верхний — заголовок, нижний — кнопки. Карточка: .card { display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 20rem; width: 20rem; position: relative; } Внутренние блоки: .card > div { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; padding: 2rem; width: 100%; } Просто делаем аккуратные отступы и вертикальный layout. Сам эффект: .card::before { content: ""; background-color: rgba(255, 255, 255, 0.01); position: absolute; height: 100%; width: 100%; backdrop-filter: blur(50px); clip-path: polygon( evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 0.3rem 0.3rem, calc(100% - 0.3rem) 0.3rem, calc(100% - 0.3rem) calc(100% - 0.3rem), 0.3rem calc(100% - 0.3rem), 0.3rem 0.3rem ); } ■ backdrop-filter: blur() — размывает все, что находится за элементом. ■ С помощью clip-path создаём две фигуры: ■ внешнюю (вся карточка) ■ внутреннюю (чуть меньше) ■ evenodd вырезает середину → получаем «рамку» В итоге: ■ есть blur. ■ но центр прозрачный. ■ выглядит как стеклянная карточка с границей. Пример можно найти здесь.

Эффект «наезжающего» футера на CSS Видели такой прием на современных лендингах, когда футер плавно «наползает» на контент, постепенно размывая его? Давайте разберем как это работает. HTML: <section class="hero"> <div class="card">...</div> </section> <footer>...</footer> Основная секция: .hero { height: 100vh; display: grid; place-items: center; position: sticky; top: 0; } sticky держит секцию на месте пока скроллишь, но при этом элемент остаётся в потоке документа. Footer просто идет следом и физически наезжает сверху. Эффект футера из ::before и ::after: footer::before { content: ""; position: absolute; inset: 0; background: linear-gradient( transparent 10%, rgba(0,0,0,0.8) 40%, #000 ); z-index: -2; } ::before — градиент от прозрачного к черному. Создает ощущение что карточка «уходит» под темную поверхность. footer::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(40px); mask-image: linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.8) 20%, black 30% ); z-index: -1; } ::after — backdrop-filter: blur() размывает все что находится позади футера. Но блюр применяется не сразу — mask-image делает его постепенным, от прозрачного сверху к полному снизу. Это и создает плавный переход. z-index: -2 и -1 работают относительно футера, у которого position: relative — так псевдоэлементы уходят за контент, но остаются поверх карточки. Простой трюк, но визуально делает лендинг на уровень выше) Пример можно посмотреть здесь.

Анимация «шторка» для форм логина и регистрации Иногда обычные формы логина выглядят слишком скучно. Поэтому сегодня разберем эффект, где между формой входа и регистрации плавно ездит цветная «шторка». HTML: <div class="card"> <input type="checkbox" id="tog" class="toggle"> <div class="curtain"></div> <div class="hero panel signup">...</div> <div class="hero panel signin">...</div> <div class="form panel signup">...</div> <div class="form panel signin">...</div> </div> Фишка в том, что чекбокс управляет всеми состояниями. ■ Галочка НЕ стоит → показываем регистрацию ■ Галочка стоит → показываем вход Переключение: .toggle:checked ~ .hero.signup { opacity: 0; visibility: hidden; transform: translateX(-25%); } .toggle:checked ~ .form.signin { opacity: 1; visibility: visible; transform: translateX(0); } Когда чекбокс .toggle отмечен :checked, мы «выключаем» одну панель и «включаем» другую. Шторка .curtain { position: absolute; z-index: 2; width: 50%; background: #8960e2; transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1); } .toggle:checked ~ .curtain { transform: translateX(100%); } Шторка .curtain — это просто большой фиолетовый блок, закрывающий половину карточки. Когда чекбокс активен — шторка уезжает вправо. Формы: .form.signup { left: 50%; } .form.signin { left: 0; opacity: 0; visibility: hidden; } .form — контейнер с полями, каждый занимает свою половину. По умолчанию видна только форма регистрации. Как только чекбокс отмечен: ■ Форма регистрации пропадает. ■ Форма входа появляется. Анимация: transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1); Ключевой момент — все transition синхронизированы. Шторка и формы двигаются с одной кривой и за одно время. Создаётся ощущение, что шторка физически «открывает» вторую форму. Если нужно, допилить адаптив и можно использовать) Пример, как всегда здесь.

3D-эффект карточки персонажа на CSS Наткнулся на интересный эффект с карточками в стиле Diablo. Персонаж при наведении, как бы встаёт на пьедестал. Никакого JS — только HTML и CSS. Разбираем) HTML: <figure class="card"> <img src="necro.webp"> <figcaption>The Necromancer</figcaption> </figure> Всего три тега: карточка, картинка и подпись. Слой 1 — фон ::before Псевдоэлемент с фоновой картинкой. При ховере уходит назад через 3D-трансформацию: .card:hover::before { filter: brightness(0.3); transform: perspective(500px) rotateX(60deg); } transform-origin: bottom — складывается от нижнего края, как крышка стола. Слой 2 — персонаж img Прибит к низу карточки через place-self: end center. При ховере растет вверх: .card img { place-self: end center; height: 100%; } .card:hover img { height: 270%; } object-position: top гарантирует что обрезка идёт снизу, а не сверху. Слой 3 — плашка figcaption Спрятана под карточкой — повёрнута на -90° вокруг оси X: figcaption { transform: perspective(500px) translateY(100%) rotateX(-90deg); transform-origin: top; } При ховере поворачивается и выезжает снизу как пьедестал: .card:hover figcaption { transform: perspective(500px) translateY(100%) rotateX(-30deg); } Классный эффект получается, отлично подойдет для галереи персонажей, карточки товаров, интерактивных списков героев — везде, где хочется добавить глубины одним ховером) Пример можно глянуть здесь.