На этом занятии мы с вами рассмотрим некоторые возможности CSS, позволяющие делать ваши сайты более красивыми и современными, добавить в них динамики. Знакомиться с ними мы будем на конкретных примерах.
Расширенные возможности CSS
Меню из кнопок
Откройте первый пример. Меню здесь сделано при помощи HTML-тегов nav и button. К этим кнопкам мы можем добавить ссылки, которые будут вести на другие страницы нашего сайта. Код CSS этих кнопок выглядит так:
button {
color: black;
background: white;
border-width: 0;
border-radius: 15%;
height: 70%;
font-weight: bold;
}
button:hover {
color: white;
background: black;
transform: scale(1.2);
border-width: thick;
border-color: red;
}
/* Кнопка меняется при наведении на неё курсора мыши. За это отвечает псевдокласс hover. Размер меняет правило transform.*/
Слайдшоу в шапке сайта
В этом же примере в шапке сайта размещено слайдшоу - изображения меняются в бесконечном цикле. Это сделано при помощи CSS-анимации:
#slider { /* Это - блок div, внутри которого находится слайдшоу. */
height: 70%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
background-size: cover;
animation-name: animation; /* Название анимации. */
animation-duration: 6s; /* Длительность анимации. */
animation-iteration-count: infinite; /* Количество повторов. */
}
@keyframes animation { /* Ключевые кадры - события на временной шкале */
0% {
background-image: url(1.jpg);
}
33% {
background-image: url(1.jpg);
}
34% {
background-image: url(2.jpg);
}
67% {
background-image: url(2.jpg);
}
68% {
background-image: url(3.jpg);
}
100% {
background-image: url(3.jpg);
}
}
Задание 1 (на занятии)
Создайте веб-страницу. Разместите на ней слайдшоу из четырёх любых изображений и несколько пунктов меню, оформленных в виде кнопок. Кнопки должны реагировать на наведение курсора мыши.
Всплывающее окно
Откройте второй пример. Вместо трёх кнопок меню в панели навигации теперь одна. При нажатии на неё возникает всплывающее окно с пунктами меню. Это делается при помощи псевдокласса target:
#menu {
display: none; /* По умолчанию пункты меню не отображаются */
}
#menu:target { /* Когда блок с пунктами меню (элемент HTML с id = "menu") становится активным - то есть, при нажатии на ссылку, скрытую в кнопке меню */
display: block; /* он начинает отображаться */
background: maroon;
color: white;
border-color: white;
border-radius: 5%;
border-style: outset;
font-weight: bold;
text-align: center;
padding: 1%;
position: absolute; /* Мы задаём ему абсолютное позиционирование - размещаем поверх всех других элементов */
top: 31vh; /* С отступом сверху */
left: 1vw; /* И отступом слева */
}
/* Чтобы спрятать обратно всплывающее окно с пунктами меню, мы должны нажать на ссылку в пункте "закрыть меню". Она ведёт обратно на кнопку меню. Текущая ссылка на блок
с пунктами меню перестаёт быть активной и поэтому блок исчезает. */
Галерея изображений
Фотогалерея во втором примере работает по тому же принципу - в ней используется псевдокласс target. Когда пользователь нажимает на ссылку (внутрь которой помещена миниатюра изображения), всплывает окно с этой же фотографией, но большего размера. Крупные фото тоже содержат ссылку (на кнопку меню), когда пользователь нажимает на эту ссылку - всплывающее окно исчезает.