Формошлёп

Стилизация границы карточки Сегодня разберем небольшой, но очень интересный прием — карточку с «стеклянным» эффектом. 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-аккордеона Давайте разберем еще один способ необычной стилизации аккордеона на <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 делает поворот плавным. Вот такая вот интересная идея) Пример можно посмотреть тут.

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

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:

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

Эффект темной сетки с виньеткой на чистом 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:

    
        <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 плавно анимирует это изменение. Можно использовать для форм с необязательными блоками: доставка, юрлицо, промокод и т.д.) Потестить можно здесь.

Масштабное обновление — CodePen 2.0 Популярная «песочница» выкатила масштабное обновление (пока в бете), которое превращает сервис из блокнота в полноценную IDE. Что изменилось? ■ Файловая система: теперь можно создавать папки, кучу файлов и импортировать их друг в друга. Любой пен — это теперь мини-проект. ■ Система блоков: больше не нужно копаться в настройках, чтобы включить Sass или Tailwind. Просто добавляешь нужный «блок» в проект. Можно комбинировать несколько препроцессоров сразу. ■ Мульти-таскинг: вкладки можно группировать, перетаскивать и открывать несколько редакторов одновременно. Удобно, если верстаешь и правишь JS в разных углах экрана. ■ Движок: редактор стал быстрее, доступнее и обзавелся кучей новых шрифтов и тем. Если еще не пробовали, попробуйте - https://codepen.io/beta

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

Анимированное волнистое подчёркивание ссылок на 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. В момент, когда одна копия уходит влево, следующая уже стоит на её месте. Стык невидим, потому что волна симметрична — и получается бесшовный бесконечный поток. Такой вот интересный эффект получается) Пример лежит здесь.