Генератор бесшовных паттернов

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

Есть простой и бесплатный инструмент Patternico, который генерирует бесшовные паттерны онлайн прямо в браузере.

Принцип работы очень прост:
■ выбираем фон и элементы;
■ настраиваем размеры, прозрачность, цвета;
■ загружаем свои изображения, иконки или Emoji;
■ получаем готовый паттерн в формате изображения.

После генерации скачиваем паттерн и добавляем его как фон через CSS:

body {
  background-image: url("pattern.png");
  background-repeat: repeat;
}

В общем, если что, вот — https://patternico.com/, вдруг пригодится)

Выезжающее fullscreen-модальное окно на Popover

Давайте сегодня разберем, как с помощью Popover API создать модальное окно, которое плавно выезжает и закрывается по клику на кнопку или по клавише Esc.

HTML:

<div class="panel--home">
  <button class="btn" popovertarget="slice">Открыть</button>
</div>

<div id="slice" class="panel--slice" popover>
  <button class="btn btn--light" popovertarget="slice" popovertargetaction="hide">
    Закрыть
  </button>
</div>

■ popover атрибут превращает div в popover-элемент.
■ popovertarget="slice" связывает кнопку с popover'ом.
■ popovertargetaction="hide" указывает, что кнопка закрывает popover.

Позиционирование popover:

.panel--slice {
  position: fixed;
  inset: 0; 
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
}

Растягиваем на весь экран и сбрасываем дефолтные ограничения popover.

Анимация появления:

.panel--slice {
  transform: translateY(-100%); /* начальное положение за экраном */
  transition: transform 800ms ease;
}

.panel--slice:popover-open {
  transform: translateY(0); /* конечное положение */
}

■ Начальное состояние: панель сдвинута вверх на 100% своей высоты (за экран).
■ При активации: возвращаем панель на место (сдвиг = 0).

В результате при клике на кнопку браузер открывает popover, применяется :popover-open, и панель плавно выезжает сверху)

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

Глитч-эффект для изображения

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

HTML:

<div class="container">
  <div class="glitch-image"></div>
</div>

Изображение:

.glitch-image {
  position: relative;
  width: 100%;
  height: 100%;
  background: url('...') no-repeat center / cover;
  filter: brightness(1.2);
}

Клонируем изображение:

.glitch-image::before,
.glitch-image::after {
  content: '';
  background: inherit; /* копируем ту же картинку */
  position: absolute;
  inset: 0; /* растягиваем на весь блок */
}

Теперь у нас 3 одинаковых слоя друг на друге.

Первый слой дергается:

.glitch-image::after {
  animation: glitch-clip 1s infinite;
}

@keyframes glitch-clip {
  12% {
    left: -5px;              /* сдвинули влево */
    clip-path: inset(32% 0 41% 0); /* обрезали сверху/снизу */
  }
  17% {
    left: 0;                 /* вернули обратно */
    clip-path: none;         /* убрали обрезку */
  }
  /* ... и так далее */
}

Слой дергается влево-вправо и показывается кусками.

Второй слой меняет цвета:

.glitch-image::before {
  animation: glitch-hue 1s infinite;
}

@keyframes glitch-hue {
  13% {
    filter: hue-rotate(280deg); /* красный → синий */
  }
  18% {
    filter: none;               /* обратно */
  }
  /* ... и так далее */
}

Циклически сдвигает все цвета изображения.

Суть: берем картинку, клонируем её 2 раза через ::before и ::after, двигаем клоны и меняем им цвета)

Полный код можно глянуть здесь.

Генератор blob-фигур

Наверняка вы видели такие абстрактные фигуры с плавными формами — так называемые "блобы". Если вам нужно быстро создать такую фигуру для добавления в какой-нибудь блок страницы, советую Blobmaker.

Интерфейс максимально простой — два основных параметра:
■ Complexity (сложность) — определяет количество опорных точек, из которых строится форма.
■ Contrast (контраст) — задает разницу между точками, влияя на «дикость» формы.

Нажимаете на кнопку с кубиком 🎲, пока не найдете нужную форму, и скачиваете её, как SVG или копируете код прямо в буфер обмена.

Еще один годный сервис в нашу копилку)

Современный способ задавать цвета с прозрачностью в CSS

Раньше для прозрачности приходилось использовать rgba(), добавляя альфа-канал:

/* зеленый с 50 % прозрачности */
.green-50 {
  color: rgba(0, 128, 0, 0.5);
}

Но rgb() давно умеет работать с альфа-каналом:

/* зеленый с 50 % прозрачности */
.green-50 {
  color: rgb(0, 128, 0, 0.5);
}

И еще удобнее синтаксис через пробелы:

.green-50 {
  color: rgb(0 128 0 / 0.5);
  /* или */
  color: rgb(0 128 0 / 50%);
}

Читается легче и отлично сочетается с CSS-переменными:

:root {
  --primary: 0 128 0;
}

.green-50 {
  color: rgb(var(--primary) / 50%);
}

.green-30 {
  color: rgb(var(--primary) / 30%);
}

Если у вас есть цвет в формате #008000, то прозрачность можно добавить так:

.rgb-green-50 {
  color: rgb(from #008000 r g b / 0.5);
}

Поддержку CSS Relative color syntax можно глянуть здесь - https://caniuse.com/css-relative-colors

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

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

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