Битва 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)

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

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