Оживляем форму с помощью :focus-within

Сегодня разберем, как сделать формы немного умнее и приятнее для пользователя)
Поможет нам в этом псевдокласс :focus-within

Допустим, у нас есть поле ввода с префиксом или суффиксом:

<div class="input-group">
  <span>https://</span>
  <input type="text" placeholder="domain.tld" />
</div>

Когда пользователь кликает на input, мы хотим, чтобы всё поле реагировало — включая span.
Для этого используем псевдокласс :focus-within, который применяется к родителю, если любой из его потомков находится в фокусе:

.input-group:focus-within {
  border-color: #275efe;
}
.input-group:focus-within span {
  background: #678efe;
  color: white;
}

Как только пользователь кликает на input — весь контейнер "понимает", что внутри что-то активно, и реагирует)

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

Акцент в меню с помощью :has()

Сегодня разберём мини-лайфхак: меню с эффектом "акцента" на активном пункте.
Ну, т.е. когда наводишь на один пункт — остальные слегка затемняются.

Создадим обычное меню:

<nav>
  <ul class="nav-list">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Статьи</a></li>
    <li><a href="#">Видео</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

Добавим ховер, чтобы при наведении ссылка становилась оранжевой:

nav a:hover {
  color: #ff7a18;
}

И теперь заюзаем :has:

nav ul:has(a:hover) a:not(:hover) {
  opacity: 0.3;
}

Что мы получаем в итоге:
■ nav ul:has(a:hover) — если внутри списка есть ссылка в состоянии hover
■ a:not(:hover) — то все ссылки, которые НЕ в состоянии hover
■ opacity: 0.3 — сделать полупрозрачными

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

Такой вот эффект фокусировки внимания)

Код, как всегда, здесь.

Футер выезжающий из-под контента

Сегодня разберём один из тех визуальных приёмов, который вы 100% видели на модных лендингах — "Sticky Footer Reveal", или по-русски — футер, который выезжает из-под контента при прокрутке)

HTML-разметка:

<div class="container">
  <!-- контент -->
</div>
<footer>
  <!-- футер -->
</footer>

CSS:

.container {
  position: relative;
  z-index: 1;
  background: #fff;
}

z-index: 1 и position: relative — это делает контейнер "выше" по слоям, чем футер. Поэтому он будет перекрывать футер при прокрутке.

footer {
  position: sticky;
  bottom: 0;
  background: #0b0b0b;
  z-index: 0;
}

Футер позиционируем через position: sticky и bottom: 0, чтобы закрепить на нижней границе страницы, а z-index: 0 — делает его "ниже" контента.

Теперь, когда заказчик говорит: "Сделайте что-то модное" — ты просто вставляешь этот футер и уходишь в отпуск)

Полный код лежит здесь.

Раскрывающаяся панель поиска

Сегодня разберем классную штуку — раскрывающуюся панель поиска. Такую часто можно встретить в хедерах сайтов.

Создадим контейнер с инпутом и кнопкой:

<div class="search-bar">
  <input type="search" class="search-input" placeholder="Искать...">
  <button class="search-btn">
    <i class="fa-solid fa-magnifying-glass"></i>
  </button>
</div>

Иконку возьмем из font-awesome, предварительно подключив его к странице.

CSS контейнера:

.search-bar {
  display: flex;
  justify-content: flex-end;
  background: white;
  border-radius: 50px;
  width: 70px;
  transition: width 0.4s ease;
  overflow: hidden; 
}

Теперь с помощью :focus-within расширяемся при фокусе на любом дочернем элементе:

.search-bar:focus-within {
  width: 500px;
}

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

.search-input {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.search-bar:focus-within .search-input {
  opacity: 1;
}

Вкратце это все, полностью посмотреть код можно здесь.

По аккуратней с легаси)

Sticky заголовки

Иногда при прокрутке длинного контента нужно, чтобы заголовок текущего блока не убегал вверх, а оставался на экране, пока мы не дойдём до следующей секции.

Разберем, как это сделать с помощью position: sticky.

Html-структура:

<div class="content-block">
  <h2>Шаг 1</h2>
  <p>Контент...</p>

  <h2>Шаг 2</h2>
  <p>Контент...</p>

  <h2>Шаг 3</h2>
  <p>Контент...</p>
</div>

CSS:

h2 {
  position: sticky;
  top: 0;
  background: #6200ee;
  color: white;
  padding: 12px 20px;
  margin: 0;
  z-index: 1;
}

Что мы получаем:
■ position: sticky + top: 0 — заголовок прилипает к верхней границе контейнера
■ background нужен, чтобы перекрывать контент снизу
■ z-index: 1 — поднимаем заголовок над остальным контентом

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

Код, как всегда, здесь.

Псевдобрейкпоинты для шрифта без @media

Все мы знаем про fluid typography с clamp() — шрифт плавно меняется в зависимости от ширины окна.

Но если вас напрягает эта плавность и хочется, чтобы размер шрифта не плавал, а менялся чёткими скачками, как при брейкпоинтах, то оказывается, способ есть)

Для этого даже не нужны @media — достаточно одной строчки в CSS и round().

Реализация:

html {
  font-size: clamp(
    1em, 
    round(0.8em + 1.5vw, 0.5em), 
    2.5em
  );
}

Как это работает
1) clamp(min, preferred, max)
■ Минимум: 1em
■ Максимум: 2.5em
■ Желательное значение: результат функции round().

2) 0.8em + 1.5vw
■ 0.8em — стартовый размер
■ 1.5vw — прибавка, зависящая от ширины окна

3) round(..., 0.5em)
■ Округление результата до ближайшего кратного 0.5em.
Это убивает плавность и даёт ступенчатый рост — как будто у тебя есть брейкпоинты каждые пару сотен пикселей, но ты их не писал.

Вот такой хак еще в нашу копилку добавим, мало ли, вдруг пригодится)

Код лежит здесь.

Toggle Switch на CSS

Разберем, как сделать модный переключатель, вместо обычного чекбокса.

HTML структура:

<label class="toggle-switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

Внутри <label> лежит скрытый <input type="checkbox"> и стилизованный <span class="slider">, который и выглядит как переключатель.

Теперь прячем чекбокс:

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

Стилизуем ползунок:

.slider {
  background: #ccc;
  border-radius: 34px;
  transition: 0.4s;
}

Добавляем бегунок (:before):

.slider:before {
  content: "";
  background: white;
  border-radius: 50%;
  transition: 0.4s;
}

Меняем стили при включении:

input:checked + .slider {
  background: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px); 
}

Получился классный выключатель, который легко кастомизировать)

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

Адаптивная таблица без JS

Таблицы на мобильных — это боль. Помните те времена, когда приходилось скроллить влево-вправо, чтобы увидеть все колонки? Или когда текст был настолько мелким, что нужна была лупа? Сегодня разберем, как можно решить эту проблему)

Наша таблица:

<table>
  <thead>
    <tr>
      <th>Имя</th>
      <th>Email</th> 
      <th>Город</th>
      <th>Профессия</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Иван Петров</td>
      <td>[email protected]</td>
      <td>Москва</td>
      <td>Frontend-разработчик</td>
    </tr>
  </tbody>
</table>

На десктопе всё ок, а для мобильных превращаем таблицу в карточки:

@media (max-width: 640px) {
  /* Делаем все элементы таблицы блочными */
  table, thead, tbody, th, td, tr {
    display: block;
  }
  
  /* Прячем заголовки */
  thead {
    display: none;
  }
  
  /* Каждая строка становится карточкой */
  tr {
    border: 1px solid #ddd;
    margin-bottom: 1rem;
    padding: 1rem;
  }
  
  /* Ячейки превращаются в пары ключ-значение */
  td {
    display: flex;
    justify-content: space-between;
  }
  
  /* Добавляем подписи из data-атрибутов */
  td::before {
    content: attr(data-label) ":";
    font-weight: 600;
  }
}

В итоге, на мобильном:
■ display: block превращает все элементы таблицы в обычные блоки
■ Заголовки прячутся (они больше не нужны)
■ Каждая строка становится отдельной карточкой
■ attr(data-label) берет текст из HTML-атрибута и вставляет как подпись

Согласитесь, выглядит круто)

Код положил сюда.

Градиентная обводка текста

Сегодня давайте разберем один из эффектных трюков — текст с градиентной обводкой на чистом CSS.

HTML:

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

Основные настройки вынесем в переменные:

:root {
  --color-background: #000119;
  --stroke-width: 12px;
  --font-size: 150px;
  --font-weight: 700;
}

Основной эффект:

h1 {
  background-clip: text;
  background-image: linear-gradient(
    to right,
    #09f1b8,
    #00a2ff,
    #ff00d2,
    #fed90f
  );
  color: var(--color-background);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  -webkit-text-stroke-color: transparent;
  -webkit-text-stroke-width: var(--stroke-width);
}

Как это работает:

■ Создаём линейный градиент с четырьмя цветами.
■ background-clip: text — обрезаем фон по форме текста.
■ Устанавливаем цвет текста, который совпадает с фоном страницы.
■ stroke эффект:
-webkit-text-stroke-width задаёт толщину обводки (12px).
-webkit-text-stroke-color: transparent делает внутреннюю часть обводки прозрачной.

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

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

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

Не совсем по теме, но блин, ору))

Эффект "появления текста при наведении"

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

HTML:

<h1>Наведи<span class="hide">, чтобы увидеть весь текст</span>!</h1>

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

Скрываем текст:

.hide {
  display: inline-block;
  max-width: 0%;
  vertical-align: bottom;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 1s ease-in-out;
}

■ display: inline-block — превращаем span в inline-block, для управления его шириной.
■ max-width: 0 — ограничиваем максимальную ширину до 0.
■ overflow: hidden — обрезаем всё, что выходит за пределы блока.
■ transition: max-width 1s ease-in-out — анимация изменения ширины.

Эффект появления при наведении:

h1:hover .hide {
  max-width: 100%;
}

При наведении на <h1> мы увеличиваем max-width до 100%, и текст плавно "раскрывается" слева направо.

Такой вот прикольный эффект получается)

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

Стилизуем разрывы текста в CSS

Если у вас есть текст с оформлением, который переносится на несколько строк. То с помощью box-decoration-break можно контролировать, как оформление будет отображаться при переносе.

Разберем на примере:

<div class="container">
  <h1><span class="clone">Привет, мир!</span></h1>
  <h1><span>Привет, мир!</span></h1>
</div>

Здесь у нас 2 текста, которые переносятся на новую строку (max-width: 200px).

CSS:

span {
  background: linear-gradient(to right, #4f46e5, #ec4899);
  color: white;
  padding: 12px;
}

.clone {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

Зададим одинаковое оформление, но первому тексту добавим box-decoration-break: clone и посмотрим разницу:
■ по умолчанию box-decoration-break: slice — оформление ведёт себя как единое целое, паддинги только по бокам всего блока, фон/градиент продолжается между строками.
■ box-decoration-break: clone — каждая строка становится независимым блоком, паддинги со всех сторон у каждой строки, фон/градиент применяется к каждой строке отдельно.

Важно помнить, это работает только с inline-элементами.

Такой вот короткий лайфхак, если не знали об этом свойстве раньше)

Пример здесь.

Бургер-меню без JS

Давайте разберем, как сделать адаптивное меню для сайта, используя только HTML и CSS.

Нам нужно:
■ Скрытый checkbox для хранения состояния.
■ Label, как переключатель (кнопка бургера).
■ Меню изначально скрыто через opacity: 0.
■ При клике на label — чекбокс переключается и показывает меню.

HTML:

<input type="checkbox" id="menu-toggle">
<div class="menu">
  <nav>
    <a href="#">Главная</a>
    <a href="#">О нас</a>
  </nav>
</div>
<label for="menu-toggle" class="menu-btn">
  <span></span>
  <span></span>
  <span></span>
</label>

CSS:

#menu-toggle {
  display: none;
}
.menu {
  opacity: 0;
  visibility: hidden;
}
#menu-toggle:checked ~ .menu {
  opacity: 1;
  visibility: visible;
}

Как работает:
■ Checkbox скрыт — display: none, но состояние сохраняется.
■ Label связан с input через for="menu-toggle".
■ Клик на label = клик на checkbox — браузер автоматически переключает состояние.
■ Селектор ~ — находит элементы .menu после чекбокса.
■ :checked — псевдокласс активен только при отмеченном checkbox.
■ Результат — меню появляется/исчезает при каждом клике.

Такая вот нехитрая, но рабочая схема)

Код, как всегда, здесь.

Эффект инвертирования цветов в CSS

Если нужно, как то заметно выделить элемент или даже блок на странице, к примеру при ховере, то можно попробовать использовать filter: invert(100%).

Делается быстро, эффект заметный)

Просто вешаем на нужный элемент ховер с фильтром:

.card:hover {
  filter: invert(100%);
  transition: filter 0.4s; /* для плавности */
}

И всё, заметный интерактив готов)

Неплохо подходит: для кнопок, монохромных иконок (соцсети, меню), галерей — эффект "негатив" на изображениях, карточки товаров/услуг.

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

"Липкий" хедер с эффектом размытия

Сегодня разберём, как сделать стильный фиксированный хедер с полупрозрачным фоном и размытием — прям, как у Apple)

Сделаем обычную разметку:

<header class="header"></header>
<main class="main">
  <section class="section">
    <h2></h2>
    <p></p>
  </section>
</main>

Тут просто, для примера хедер, и несколько секций.

Стилизуем хедер:

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 100;
}

Делаем фиксированное позиционирование, ставим его поверх конента z-index: 100.
Задаем фон с прозрачностью и с помощью backdrop-filter получаем эффект размытия фона под элементом.

Можно поиграться с backdrop-filter и background, чтобы получилось еще интереснее)

Код лежит здесь.