Состояния и контекстные селекторы
Каждый элемент можно стилизовать в разных состояниях — например, при наведении курсора мыши, активном или в фокусе. Это позволяет создавать интересные микро-анимации, которые сделают сайт более живым и динамичным.
Состояние элемента можно добавить на вкладке Дизайн. Для этого откройте выпадающий список в разделе Состояния и выберите нужную опцию.
Чтобы стилизовать различные состояния элемента, поочерёдно выбирайте состояния из списка.
Например, изменим прозрачность элемента в состоянии «при наведении».
Если вам нужно добавить состояние для элемента с пользовательским классом, откройте настройки редактирования класса и выберите нужное состояние.
Вы можете стилизовать не только сам элемент в разных его состояниях, но и его дочерние элементы. Например, при наведении курсора на карточку можно изменить цвет фона кнопки внутри нее.
Для стилизации дочерних элементов используются контекстные селекторы — с их помощью можно задавать стили дочернего элемента в зависимости от состояния родителя.
Контекстные селекторы сейчас можно использовать только для уникальных стилей элемента, для пользовательских классов эта функциональность пока недоступна.
1. Добавьте нужное состояние родительскому элементу. Например, «При наведении».
2. Выберите дочерний элемент. На вкладке Дизайн рядом с настройкой Состояния появится желтая метка Контекст с цифрой 1. Она обозначает, что к дочернему элементу применен один контекстный селектор.
На холсте будет отображаться желтая метка с названием родительского элемента и его состоянием, в контексте которого определяются стили (Div Block:Hover).
3. Задайте дочернему элементу нужные стили. Например, измените цвет фона.
4. Проверьте работу на предварительном просмотре. При наведении на карточку кнопка меняет цвет.
Готово! У кнопки добавлен контекстный селектор, который будет работать при наведении на карточку.
Если у родительского элементам удалить состояние — то удалятся и все стили, заданные в контексте этого состояния у дочерних элементов.
Контекстные селекторы могут иметь неограниченную вложенность, т.к. определяются уровнем вложенности элементов друг в друга.
Посмотрим на примере контейнера с карточками:
- Карточка — дочерний элемент для контейнера. Ее можно стилизовать в контексте контейнера — например, при наведении на контейнер у карточки появится обводка.
- Кнопка — дочерний элемент сразу двух родителей — контейнера и карточки. Поэтому ее можно стилизовать в двух контекстах. Например, при наведении на контейнер у кнопки можно изменить цвет фона, а при наведении на карточку — добавить обводку.
- Текст на кнопке — дочерний элемент сразу трех родителей — контейнера, карточки и кнопки. Это значит, что его стили можно менять при наведении на каждый из этих элементов.
Вложенность контекстных селекторов позволяет гибко настраивать стили в разных состояниях и реализовывать многоуровневые эффекты микро-анимаций.
Для любого состояния родительского элемента можно стилизовать несколько дочерних элементов.
Например, при наведении на карточку можно изменить стили для двух дочерних элементов: для текстового блока — цвет текста и для кнопки — цвет фона.
Для этого выполните следующие шаги:
1. Выберите карточку и добавьте ей состояние «При наведении».
2. Выберите текстовый элемент — у него появится метка контекстного селектора. Задайте элементу стили, которые сработают при наведении на карточку, — измените цвет текста.
3. Выберите кнопку — у нее появится метка контекстного селектора. Задайте кнопке стили, которые сработают при наведении на карточку, — измените цвет фона.
Готово! Теперь при наведении на карточку меняется цвет в текстовом блоке и цвет фона кнопки.
Вы можете менять стили элемента в зависимости от:
- Его собственного состояния.
- Состояния его родителя.
- Комбинации состояния родителя + собственного состояния.
Например, при использовании третьего варианта можно сделать такие эффекты для кнопки:
- При наведении на саму кнопку — у нее дополнительно добавляется обводка.
Для этого выполните следующие шаги:
1. Первые шаги — как в Примере 1. На этом этапе вы добавите стилизацию кнопки в контексте карточки.
2. Далее нужно работать с состоянием самой кнопки. Добавьте кнопке состояние «При наведении».
3. Задайте кнопке стили, которые сработают при наведении на нее, — добавьте границы.
Готово! Для кнопки работают эффекты при наведении на карточку и на саму кнопку.
В этом варианте используется свойство вложенности контекстных селекторов — стили элемента зависят от состояния нескольких его родителей.
Например, сделаем следующие эффекты:
- При наведении на кнопку у нее появляется обводка (как в Примере 2) и дополнительно меняется цвет текста внутри нее.
Для этого выполните следующие шаги:
1. Первые шаги — как в Примере 2. На этом этапе вы добавите стилизацию кнопки в контексте карточки + самой кнопки.
2. Далее нужно работать с текстом на кнопке. Выберите текстовый элемент внутри кнопки. У него появится метка 2 Контекст (двойной контекст), а на холсте — метки двух родительских элементов, от состояния которых будут зависеть стили текстового элемента (карточки и кнопки).
Задайте тексту стили, которые сработают при наведении на кнопку, — измените цвет текста.
Готово! Для текста внутри кнопки работают два контекстных селектора — его стили меняются при наведении на карточку и на кнопку.
Вы можете использовать контекстные селекторы для реализации множества вариантов микро-анимаций. Можно сделать эффекты появления или скрытия элементов, изменения их размеров, перемещения и другие.
Вот два примера реализации:
1. При наведении на карточку — появление на ней ранее скрытых элементов.
Например, при наведении на карточку с товаром можно показать дополнительную информацию и кнопку, а при наведении на кнопку — изменить ее цвет.
Это можно сделать, добавив дополнительному блоку контекстный селектор, который срабатывает при наведении на карточку. Для эффекта появления блока используются свойства непрозрачности и движения.
2. Создание тултипов.
Вы можете сделать блок с подсказкой, которая появляется при наведении на иконку.
Для этого можно использовать контекстный селектор, который срабатывает при наведении на иконку, и свойства изменения размера и прозрачности.
Подробнее о том, как реализовать эти примеры, можно посмотреть в нашем стриме на Youtube.
Чтобы при изменении состояния стили менялись плавно, нужно использовать настройку Переходы. Для этого:
1. Для выбранного состояния добавьте свойство Переходы в разделе Внешний вид.
2. Настройте длительность перехода в миллисекундах и выберите тип смягчения.
Контекстные селекторы и анимации — это два способа для создания интерактивных эффектов. Но между ними есть отличия:
- Эффекты. Контекстные селекторы дают возможность изменять любые css-свойства элементов — например, размер, цвет фона и текста, границы, тени и другие. Анимации позволяют делать ограниченный набор эффектов — изменение размера, наклона, масштабирования, непрозрачности, а также движение и поворот.
- Возможность использования. Контекстные селекторы работают только для вложенных друг в друга элементов. Анимации можно настроить для любых элементов на странице.
- Триггеры анимации. Контекстные селекторы используются только для состояний элементов (при наведении, активный, в фокусе). Анимации можно использовать для создания эффектов при клике, при появлении элемента и при скролле страницы.
- Скорость работы сайта. Контекстные селекторы работают на чистом css, а анимации используют скрипты. Поэтому применяя контекстные селекторы, вы получите более компактный код — в результате сайт будет загружаться быстрее, чем при использовании анимаций.