Вёрстка по макету из олимпиады. Часть 3
Это третья часть курса про вёрстку макета из студенческой олимпиады по фронтенду от HTML Academy и Яндекса. В ней мы добавим стили состояний интерактивных элементов. Вот графический макет компонента. Состояния интерактивных компонентов макета нарисованы на странице «Стайлгайд».
Во второй части мы построили сетку и проверили её на переполнение. Продолжаем с этого состояния.
Определим для ссылок .header__link состояние Наведение курсора мыши (:hover). По макету в этом состоянии у ссылок добавляется подчёркивание. Чтобы линия была по нижней границе элемента, а не на базовой линии, как это происходит по умолчанию, добавим CSS-свойство text-underline-position со значением under.
Наведите курсор мыши по очереди на ссылки и убедитесь, что подчёркивание появляется.
В CSS есть медиавыражения, которые определяют устройства по их характеристикам. Например, вы можете применить выбранные стили только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещённости. Добавим медиавыражение @media (hover: hover), которое скажет применить стили для состояния :hover только на устройствах, которые работают с мышью.
Добавим стили для состояния Нажатие (:active). По макету у ссылок в этом состоянии нет подчёркивания, убираем его.
Наведите курсор мыши на ссылку, затем нажмите на неё и проверьте, что всё работает.
Определим состояние Элемент в фокусе. Для селектора состояния используем :focus-visible. Он сработает, когда мы перешли на элемент и с помощью мыши и с помощью клавиатуры. В макете дизайнер не добавил это состояние. Поэтому тут мы можем выделить элемент на своё усмотрение. Добавим ему белую обводку за счёт CSS-свойства outline.
Чтобы проверить, что стили применились, кликните в области окна мини-браузера и с помощью клавиши tab перейти на любую ссылку в главной навигации.
Добавим стили состояния :hover для ссылок в элементе .header__phone. По макету у ссылок в этом состоянии меняется цвет.
Наведите курсор мыши на ссылку с номером телефона и проверьте, что стили применились.
Определим стили состояния :active. В макете состояние не нарисовано, добавим стили на своё усмотрение. Поменяем цвет ссылки обратно на белый.
Чтобы проверить, что стили применились, наведите курсор мыши на ссылку с номером телефона и нажмите на неё.
Определим стили состояния Элемент в фокусе. В макете стили совпадают со стилями состояния Наведение. По умолчанию браузер для элементов в фокусе добавляет обводку. Поэтому помимо CSS-свойства color, зададим CSS-свойство outline со значением none.
Определим стили состояния :hover для лототипа .header__logo-link. Тут мы снова добавляем стили на своё усмотрение. Поменяем полупрозрачность элемента на значение 0.5.
В состоянии Нажатие сделаем логотип полностью видимым.
Для состояния Элемент в фокусе добавим стили аналогичные состоянию Наведение.
Стили состояний для интерактивных элементов шапки готовы.
