Использование

CSS-селекторов

практическое занятие

Виджет рейтинга

Задача: сверстать виджет рейтинга (star rating) на HTML+CSS.

Можно выбрать от одной до пяти звезд, при клике на звезду окрашивается эта звезда и все предыдущие звезды. Аналогичным образом звезды ведут себя при наведении.

Виджет рейтинга

для разметки используем radiobutton + label
радиокнопки объединяются в одну группу и помещаются в один контейнер
для закрашивания предыдущих кнопок используем селекторы с ~
поскольку нужно закрашивать не следующие, а предыдущие элементы нужно расположить элементы в обратном порядке

Виджет рейтинга

CSS-свойство direction. Это свойство определяет направление текста (в том числе поведение инлайн-блоков)

direction может принмать значения ltr (left-to-right) или rtl (right-to-left)

Виджет рейтинга

В качестве изображения используется SVG-иконка

Схема подключения:

<svg><use xlink:href="#star"/></svg>

materialdesignicons "star"

ссылка для скачивания:

tinyurl.com/ycxsunge

Стилизация SVG

для заливки SVG-формы используется CSS-свойство fill (аналог background-color)
для определения цвета обводки SVG-формы используется CSS-свойство stroke (аналог border-color)

Верстка страницы

ссылка на макет: tinyurl.com/ybutkfa8

Верстка страницы

Требования к верстке:

главное меню в шапке выровнено по правому краю (свойство text-align)
пункты затемняются при наведении ( :hover )
в главном меню есть два выпадающих меню
настройка уведомлений - всплывающее окно
стандартные чекбоксы стилизованы двумя разными спобами (синий чекбокс и тогл )
для чекбоксов и кнопок необходимо стилизовать состояния при наведении, клике, фокусе

Всплывающее окно

ссылка на элемент по id

вид адресной строки при клике на ссылку

всплывающее окно с помощью #lightbox:target

скрыть лайтбокс:

<a href="#lightbox">Лайтбокс</a>

https://mysite.com#lightbox

#lightbox { 
  display: none;
}

#lightbox:target { 
  display: block;
}

<a href="#">Закрыть</a>

Общие рекомендации

при наведении на интерактивный элемент - он немного затемняется
в момент клика - затемняется сильнее
фокусировка обоозначается рамкой ( можно использовать border, outline или box-shadow)

палитра цветов: tinyurl.com/y988rnjt
тогл: tinyurl.com/yaa9u5rx