Использование
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
ИспользованиеCSS-селекторов
By fatalen
