Контур

Контур (Outline) предназначен для того, чтобы помочь посетителям сайта ориентироваться на нем, когда они переходят по интерактивным элементам с помощью клавиатуры. Контур, который появляется вокруг элемента, дает понять посетителю, что он взаимодействует с конкретным интерактивным элементом. Если посетитель сайта нажмет Tab на клавиатуре, контур появится вокруг следующего элемента, получившего фокус.

Добавление контура

Чтобы добавить контур элементу:

• Выберите элемент, для которого хотите добавить контур (это должен быть интерактивный элемент, например, поле формы или кнопка).

• Выберите для элемента состояние В фокусе (Focus) на вкладке стилей правой панели в разделе Источники стилей.

• Найдите на вкладке Стилей правой панели раздел Внешний вид и параметр Контур (Outline) и нажмите +.

• Установите параметры контура.

Контур виден только с отключенными направляющими (Shift+O).

Параметры контура

Цвет — определяет цвет контура и его прозрачность.

Толщина — определяет толщину контура. По умолчанию устанавливается в пикселях (px), можно изменить единицу измерения.

Смещение — определяет расстояние между границей элемента и контуром. По умолчанию устанавливается в пикселях (px), можно изменить единицу измерения.

Стиль обводки — определяет тип контура.

• Точечная (Dotted)
• Пунктирная (Dashed)
• Сплошная (Solid)
• Двойная (Double)
• Вдавленная посередине (Groove)
• Выпуклая посередине (Ridge)
• Вдавленная (Inset)
• Выпуклая (Outset)

Пример настройки контура:

Для поля формы (элемент Input) в состоянии В фокусе добавлен контур со следующими настройками: Толщина: 1px, Смещение: 1px, Стиль обводки: Сплошная.

Проверим: на предварительном просмотре или на опубликованном сайте поле формы приобретает синюю обводку, когда оно находится в фокусе — активно для ввода.