Анимация выделения текста при наведении

Случайно наткнулся на интересный прием — эффектное выделение важных частей текста при наведении.

Он отлично подходит для подсветки ключевых фраз в статьях, акцента на важных моментах и т.п.

HTML-разметка:

<p class="animate">
  Фронтенд-разработка — это создание внешнего интерфейса. 
  <span>Для фронтенд-разработчика важно, чтобы пользователи с лёгкостью могли найти на сайте всё, что им нужно.</span>
  К примеру, прочитать подробности о товаре...
</p>

Здесь обычный параграф с классом animate, а внутри него <span> оборачивает текст, который нужно выделить.

CSS:

p.animate span {
  background: linear-gradient(to right, #ffef7e, #b7f9e9);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background 750ms ease-in-out;
  box-decoration-break: clone;
}

.animate:hover span {
  background-size: 100% 100%;
}

Разбираем:
■ linear-gradient создаёт градиентное подчёркивание
■ background-size: 0% 100% - изначально фон невидим (0% по ширине)
■ transition обеспечивает плавную анимацию
■ box-decoration-break: clone - для многострочных выделений, чтобы фон применялся к каждой строке отдельно

:hover - триггер анимации, при наведении на весь абзац — фон растягивается на 100%.

На этом всё)

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

Оживляем форму с помощью :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 — поднимаем заголовок над остальным контентом

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

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