Контур

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

Контур имеет смысл добавлять для состояния элемента в фокусе (Focus).

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

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

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

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

Добавить состояние В фокусе

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

Добавить Контур

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

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

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

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

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

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

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

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

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

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

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

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

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

Поле формы с контуром в состоянии в Фокусе