Спойлер на CSS с эффектом размытия

Давайте сегодня разберём, как создать спойлер с размытым текстом без JS, с помощью HTML-элемента <details>.

Сделаем спойлер, где текст виден сразу, но размыт. При клике на кнопку размытие плавно исчезает.

HTML:

<details>
  <summary>Открыть спойлер</summary>
  <p>Разработке невозможно научиться раз и навсегда. Учиться придется всю жизнь..</p>
</details>

Стилизация контейнера:

details {
  width: 100%;
  max-width: 400px;
  background: white;
  padding: 2rem;
  border-radius: 12px;
}

Кнопка раскрытия:

summary {
  padding: 12px 16px;
  cursor: pointer;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #f8f9fa;
  list-style: none;
}

Размытие:

details:not([open])::details-content {
  filter: blur(5px);
  content-visibility: visible;
}

::details-content {
  margin-top: 0;
  transition: filter 0.3s ease;
}

■ По умолчанию (закрыто): псевдоэлемент ::details-content получает blur(5px) и content-visibility: visible, текст виден, но размыт.
■ При клике: атрибут open добавляется к <details>, селектор :not([open]) перестаёт работать.
■ Результат: размытие исчезает с плавной анимацией благодаря transition.

И всё, получаем стильный, модный, молодежный спойлер на чистом CSS)

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

Gooey-эффект: плавное слияние текста на CSS

Вы наверняка видели на лендингах эффект, когда один текст буквально перетекает в другой. Это называется gooey effect (эффект липкости), давай сделаем нечто подобное.

HTML:

<section>
  <h1>HTML</h1>
  <h1>CSS</h1>
</section>

Накладываем элементы друг на друга:

section {
  display: grid;
  place-items: center;
}

section > * {
  grid-area: 1 / 1;
}

Оба h1 занимают одну и ту же ячейку грида (1 / 1).

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

h1 {
  font-size: 13vw;
  animation: fade 4s infinite;
  animation-timing-function: linear(1 45%, 0 55% 90%, 1);
}

h1:nth-child(2) {
  animation-timing-function: linear(0 45%, 1 55% 90%, 0);
}

@keyframes fade {
  from { opacity: 0 }
  to { opacity: 1 }
}

Первый заголовок:
■ 1 45% — полностью видим до 45% анимации.
■ 0 55% 90% — исчезает к 55% и остаётся невидимым до 90%.
■ 1 — появляется обратно к концу.

Второй заголовок (зеркально):
■ 0 45% — скрыт до 45%.
■ 1 55% 90% — появляется к 55% и держится до 90%.
■ 0 — исчезает к концу.

blur + contrast:

section {
  background: white; 
  animation: gooey 4s infinite;
  animation-timing-function: linear(0, 0 45%, 1 50%, 0 55% 90%, 1 95%, 0);
}

@keyframes gooey {
  to { filter: blur(10px) contrast(30); }
}

Сердце gooey-эффекта:
■ Белый фон обязателен — contrast работает с цветовыми границами.
■ blur(10px) — размывает границы букв.
■ contrast(30) — резко повышает контраст, превращая размытые края в чёткие.

Отлично подойдет для hero-секций, заголовков и привлечения внимания

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

Библиотека готовых UI-компонентов

На днях наткнулся на очень годную штуку, которой прям грех не поделиться.

Uiverse.io - огромная, постоянно пополняемая, коллекция готовых UI-элементов:
■ Кнопки
■ Чекбоксы
■ Карточки
■ Формы
■ Лоадеры
И многое другое, в самых разных стилях: от минимализма до неоморфизма.

Причем это не просто статичные блоки, а полноценные компоненты с анимациями и hover-эффектами.

Всё под лицензией MIT, так что можно использовать хоть в личных проектах, хоть в коммерческих.

В общем, uiverse.io - отличный ресурс для тех, кто хочет вдохновиться, научиться чему-то новому или ускорить процесс разработки)

Утро вечера мудренее)

Добавляем иконку к внешним ссылкам с помощью CSS

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

HTML:

<a href="https://example.com" target="_blank">Эта ссылка открывается в новой вкладке</a>
<a href="https://example.com">А эта ссылка нет</a>

CSS:

a[target="_blank"]::after {
  content: url(external-link.svg);
  display: inline-block;
  margin-left: 0.2em;
  width: 1em;
  height: 1em;
}

Селектор a[target="_blank"]::after:
■ Выбираем только ссылки с атрибутом target="_blank".
■ ::after создает псевдоэлемент после содержимого ссылки.
Загрузка SVG через URL:
■ content: url(external-link.svg) — загружаем SVG-иконку.
Далее задаем размеры и отступы.

Теперь ссылки с атрибутом target="_blank" будут автоматически получать иконку внешней ссылки)

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

Интересная обнова на Хабре

Заглянул на досуге на Хабр, полистать статьи. Сижу, значит, листаю-читаю и вижу в блоках с кодом кнопку "Объяснить код с SourceCraft". Раньше вроде не замечал её. Ради интереса кликнул — интересная фича, должен заметить)

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

Я немного потестил, довольно годные объяснения получаются.

Так что, если давно не были на Хабре или не в курсе новинки, то можете зайти и заценить)

Счетчик отмеченных чекбоксов на CSS

Сегодня давайте рассмотрим, как сделать визуальный счетчик отмеченных чекбоксов вообще без JS — на чистом CSS.

HTML:

<div class="wrapper">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <span>=</span>
  <output></output>
</div>

Здесь у нас пять чекбоксов, знак равенства и пустой <output>, куда будем выводить число.

Создаем счетчик:

.wrapper {
  counter-reset: total;
}

counter-reset: total создает переменную-счетчик с именем total.

Увеличиваем при отметке:

input:checked {
  counter-increment: total;
}

Каждый отмеченный чекбокс :checked увеличивает счетчик total на единицу.

Выводим результат:

output::before {
  content: counter(total);
}

Псевдоэлемент ::before вставляет содержимое перед <output>. Функция counter(total) возвращает текущее значение счетчика — и оно автоматически обновляется при изменении.

Можно использовать для ситуаций, когда нужны визуальные подсчеты, без логики на JS)

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

Главное работает)

Показываем URL рядом со ссылкой

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

HTML:

<p>
  Идите в <a href="https://www.google.com/">Google</a>, 
  если вам нужно найти какую-либо информацию😎
</p>

Показываем URL:

a::after {
  content: ' → ' attr(href);
  opacity: 0.8;
  font-size: 20px;
}

■ a::after — создаем псевдоэлемент после содержимого ссылки.
■ content: ' → ' attr(href) — добавляем стрелку → для визуального разделения.
■ attr(href) — функция CSS, которая вытаскивает значение атрибута href.
■ Браузер автоматически подставляет URL вместо attr(href).

Если ссылка будет слишком длинная, то можно добавить word-break: break-all; для нормального переноса.

Еще один простой CSS-трюк, в нашу коллекцию, который не требует JS)

Пример, как всегда, здесь.

Градиентная тень для текста

Сегодня разберем интересный трюк: как создать текст с градиентной тенью. Реализация очень необычная получается)

HTML:

<h1>Формошлёп</h1>

CSS:

h1 {
  font-family: sans-serif;
  font-size: 10vw;
  background: linear-gradient(4deg, #548cff 10%, #f900bf 90%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: -0.08em -0.08em #fff;
}

■ background: linear-gradient() — создаём градиент.
■ -webkit-text-fill-color: transparent — делаем заливку текста прозрачной.
■ background-clip: text — обрезаем фон по форме букв.
■ text-shadow: -0.08em -0.08em #fff; — добавляем белую тень, смещённую влево-вверх с помощью отрицательных значений.

Визуально мы видим: белый текст с градиентной тенью.

Но на самом деле:
■ Белый "текст" — это text-shadow тень.
■ Градиентная "тень" — это настоящий текст с background-clip.

Такие вот фокусы)

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

Frontend roadmap на русском

Думаю многие знают про https://roadmap.sh/frontend, но мало кто знает, что есть и неплохой frontend roadmap на русском языке.

Собственно вот — https://vallek.github.io/frontend-roadmap-ru/

Все структурированно, красиво, интерактивно, с кучей ссылок, в общем, все как нужно, надеюсь пригодится)

Так вот кто забирает все офферы)

Адаптивные разделители для меню

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

HTML:

<div class="demo-container">
  <nav>
    <ul>
      <li>Первый</li>
      <li>Второй</li>
      <li>Третий</li>
      <li>Четвертый</li>
    </ul>
  </nav>
</div>

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

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: row;
}

■ Убираем маркеры списка и сбрасываем стандартные отступы.
■ По умолчанию элементы располагаются вертикально.

Вертикальное меню (по умолчанию):

nav li:not(:first-child) {
  border-top: 1px solid white;
}

Добавляем границу сверху всем элементам, кроме первого.

Горизонтальное меню (при широком контейнере):

@container (width > 600px) {
  nav ul {
    grid-auto-flow: column;
  }
  
  nav li:not(:first-child) {
    border-top: none;
    border-left: 1px solid white;
  }
}

■ Меняем направление Grid, элементы выстраиваются в ряд.
■ Убираем горизонтальную границу.
■ Добавляем вертикальную границу, у всех элементов кроме первого.

В целом всё, получаем то, что нам требовалось — адаптивные разделители)

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

Переключатель размера шрифта на CSS

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

HTML:

<input id="size-small" type="radio" name="size">
<label for="size-small">Small</label>
<!-- + medium, large... -->
<section>
  <p>Ваш текст...</p>
</section>

Чтобы переключатель выглядел как меню, а не как формы для опроса, скрываем сами радиокнопки:

input[name="size"] {
  display: none;
}

input[name="size"]:checked + label {
  border-bottom: 2px solid #3498db;
}

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

#size-small:checked ~ section {
  font-size: 0.9rem;
}

#size-large:checked ~ section {
  font-size: 1.1rem;
}

Это самая суть нашего метода. Мы говорим браузеру: "Если выбрана радиокнопка с таким-то ID, найди любой следующий соседний элемент section и измени его шрифт".

Такое вот CSS-only решение)

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

Монументальный учебник по фронтенду и не только

Если вы уже подустали от многочасовых обучающих видосов по фронтенду, то у меня есть для вас кое-что)

Очень крутой учебник от Дмитрия Трепачёва — https://code.mu/ru/

Не просто ещё один сайт с уроками. Это структурированный учебный портал, от самых основ вёрстки до фреймворков React, Vue и Angular.

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

В общем — крайне советую)

Декоративные линии в заголовках на CSS

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

HTML:

<h1>Title #1</h1>
<p>Lorem ipsum dolor sit amet</p>

<h1>Title #2</h1>
<p>Lorem ipsum dolor sit amet</p>

<h1>Title #3</h1>
<p>Lorem ipsum dolor sit amet</p>

CSS:

h1 {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

h1::before,
h1::after {
  content: '';
  flex: 1;
  height: 2px;
  background: #000;
}

■ display: flex превращает заголовок в flex-контейнер.
■ gap: 0.5em создаёт отступ между текстом и линиями.
■ Псевдоэлементы ::before и ::after создают линии.
■ flex: 1 растягивает линии на всё доступное пространство.

Таким образом мы получаем заголовок по центру и линии с обеих сторон.

Управление видимостью:

/* Линия только справа */
h1:first-of-type::before {
  display: none;
}

/* Линия только слева */
h1:nth-of-type(2)::after {
  display: none;
}

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

Можно легко кастомизировать, поменять цвет, добавить градиент, изменить толщину или стиль линии)

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

Друзья, год подходит к концу, и хочу сказать спасибо, что вы здесь. Спасибо за ваши вопросы, обсуждения и поддержку)

Желаю всем в Новом году крепкого здоровья, денег нескончаемый поток и проектов, в которые хочется возвращаться по понедельникам)

Отличных праздников и до встречи в 2026-м!

Стилизация списка точками с линией

Всем привет! Надеюсь, удалось хорошенько отдохнуть на праздниках) Будем потихоньку возвращаться в рабочий режим.

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

HTML:

<ul>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
</ul>

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

ul {
  list-style: none;
  padding: 0;
}

li {
  padding-left: 2em;
  padding-bottom: 1em;
  position: relative;
}

Заменим стандартные маркеры списка на два псевдоэлемента:
:before — для цветных точек:

li:before {
  content: "";
  position: absolute;
  left: 0.5em;
  top: 0.5em;
  width: 10px;
  height: 10px;
  background: #f09;
  border-radius: 50%;
}

:after — для вертикальных соединительных линий между пунктами:

li:not(:last-child):after {
  content: "";
  position: absolute;
  left: 0.5em;
  top: 0.5em;
  width: 2px;
  height: 100%;
  background: #f09;
  transform: translateX(4px);
}

■ Центрирование линии: transform: translateX(4px) смещает линию шириной 2px на 4px вправо, чтобы она прошла точно по центру точки 10px. Формула: (10 - 2) / 2 = 4.
■ Скрытие стыка: Линия начинается с top: 0.5em (как и точка), но визуально точка перекрывает её начало. Поэтому кажется, что линия выходит из-под точки.
■ Последний элемент: :not(:last-child) убирает линию у последнего пункта.

Отлично подходит для таймлайнов, списков шагов и любых случаев, где нужно визуально связать пункты между собой)

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

Эффектное выделение слов в тексте

Иногда нужно сделать акцент на каком-нибудь слове. Давайте разберём технику с декоративным SVG-подчеркиванием.

HTML:

<p>Эффектное <span class="fancy">выделение</span> слов</p>

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

.fancy {
  position: relative;
  white-space: nowrap;
}

position: relative привязывает подчёркивание к слову, white-space: nowrap запрещает перенос.

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

.fancy::after {
  content: "";
  position: absolute;
  inset: auto 0 -0.2em;
  height: 0.3125em;
  background: url("data:image/svg+xml,%3Csvg...") 0 / auto 100% round;
}

■ inset: auto 0 -0.2em — растягивает подчёркивание на всю ширину и опускает ниже текста.
■ height: 0.3125em — высота линии в em, масштабируется с текстом.
■ SVG-подчёркивание: берем волнистую кривую Безье в SVG, цвет задаём в stroke='%2300FDCF'. Можно использовать и другие формы — волны, зигзаги, пунктиры.

Неплохо подойдет, для акцентов в заголовках)

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

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

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

Есть простой и бесплатный инструмент 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, и панель плавно выезжает сверху)

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