Контур
Контур (Outline) предназначен для того, чтобы помочь посетителям сайта ориентироваться на нем, когда они переходят по интерактивным элементам с помощью клавиатуры. Контур, который появляется вокруг элемента, дает понять посетителю, что он взаимодействует с конкретным интерактивным элементом. Если посетитель сайта нажмет Tab на клавиатуре, контур появится вокруг следующего элемента, получившего фокус.
Контур имеет смысл добавлять для состояния элемента в фокусе (Focus).
Добавление контура
Чтобы добавить контур элементу:
-
Выберите элемент, для которого хотите добавить контур (это должен быть интерактивный элемент, например, поле формы или кнопка).
-
Выберите для элемента состояние В фокусе (Focus) на вкладке стилей правой панели в разделе Источники стилей.
-
Найдите на вкладке Стилей правой панели раздел Внешний вид и параметр Контур (Outline) и нажмите +.
- Установите параметры контура.
Контур виден только с отключенными направляющими (Shift+O).
Параметры контура
Цвет — определяет цвет контура и его прозрачность.
Толщина — определяет толщину контура. По умолчанию устанавливается в пикселях (px), можно изменить единицу измерения.
Смещение — определяет расстояние между границей элемента и контуром. По умолчанию устанавливается в пикселях (px), можно изменить единицу измерения.
Стиль обводки — определяет тип контура.
- Точечная (Dotted)
- Пунктирная (Dashed)
- Сплошная (Solid)
- Двойная (Double)
- Вдавленная посередине (Groove)
- Выпуклая посередине (Ridge)
- Вдавленная (Inset)
- Выпуклая (Outset)
Пример настройки контура:
Для поля формы (элемент Input) в состоянии В фокусе добавлен контур со следующими настройками: Толщина: 1px, Смещение: 1px, Стиль обводки: Сплошная.
Проверим: на предварительном просмотре или на опубликованном сайте поле формы приобретает синюю обводку, когда оно находится в фокусе — активно для ввода.