Битва Android vs iOS нервно курит в сторонке)

Инпуты в стиле Material Design

Давайте сегодня разберем, как еще добавить интерактивности в формы без JS. Добавим плавающие labels при фокусе, анимированную нижнюю границу и placeholder, который появляется только при фокусе.

HTML:

<div class="mat-input">
  <label for="name">Имя Фамилия</label>
  <input id="name" type="text" placeholder="Иван Иванов">
</div>

Базовый инпут:

.mat-input {
  position: relative; /* для абсолютного позиционирования label */
}

.mat-input input {
  border: 0;
  border-bottom: 2px solid #8c8c8c;
  padding: 1.8em 0.75em 0.75em; /* место для label сверху */
  transition: 0.2s;
}

Плавающий label:

.mat-input label {
  position: absolute;
  top: 1.4em; /* по центру инпута */
  left: 0.75em;
  pointer-events: none; /* клики проходят сквозь label */
  transition: 0.2s;
}

Анимация:

.mat-input:has(input:focus) label,
.mat-input:not(:has(input:placeholder-shown)) label {
  top: 0.75em;
  font-size: 0.75em;
}

■ :has(input:focus) — label поднимается при фокусе
■ :not(:has(input:placeholder-shown)) — label остаётся вверху, когда поле заполнено

Скрытый placeholder:

.mat-input input::placeholder {
  opacity: 0;
}

.mat-input input:focus::placeholder {
  opacity: 1; /* показываем только при фокусе */
}

В итоге для этого нам понадобилось: :has() для стилизации родителя и ::placeholder-shown для определения заполненности поля)

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

Волновая анимация текста

Сегодня разберём, как создать эффектную волновую анимацию текста без JS — только HTML и CSS.

HTML:

<div class="waviy">
  <span style="--i:1">Ф</span>
  <span style="--i:2">О</span>
  <span style="--i:3">Р</span>
  <span style="--i:4">М</span>
  <span style="--i:5">О</span>
  <span style="--i:6">Ш</span>
  <span style="--i:7">Л</span>
  <span style="--i:8">Ё</span>
  <span style="--i:9">П</span>
</div>

Каждая буква обернута в <span> с CSS-переменной --i, которая определяет порядковый номер буквы.

CSS:

.waviy span {
  display: inline-block;
  animation: waviy 1s infinite;
  animation-delay: calc(.1s * var(--i));
}

■ display: inline-block — превращает строчный элемент в блочный, сохраняя поведение строки, это позволяет буквам двигаться, но оставаться в одной строке.
■ animation: waviy 1s infinite — запускает анимацию с именем waviy, длительность 1 секунда, повторяется бесконечно (infinite).
■ animation-delay: calc(.1s * var(--i)) — волна:
□ var(--i) берёт значение из HTML (style="--i:1")
□ calc() умножает: для 1-й буквы 0.1s * 1 = 0.1s, для 2-й 0.1s * 2 = 0.2s
□ Каждая следующая буква стартует на 0.1s позже предыдущей

@keyframes waviy {
  0%, 40%, 100% { transform: translateY(0) }
  20% { transform: translateY(-20px) }
}

Буква прыгает вверх на 20px в момент 20%, затем возвращается. Пауза 40-100% создаёт ритм.

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

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

Классная коллекция градиентов

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

Gradient Hunt — это коллекция красивых градиентов, которая постоянно обновляется. Тысячи трендовых цветовых переходов на любой вкус, и главное — с готовым CSS-кодом.

Там градиенты на любой случай жизни:
■ Яркие и сочные для креативных проектов.
■ Нежные пастельные для минималистичных дизайнов.
■ Темные и контрастные для современных интерфейсов.
■ Классические двухцветные переходы.
■ Сложные многоцветные композиции.

Каждый градиент — это готовый linear-gradient() с подобранными цветами и углами наклона.

В общем вот - https://gradienthunt.com/

Спойлер на 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-м!