Работа с фоном
#img1 {
background-image:url("spider2.gif");
background-size:150px 250px;
}
#img2 {
background-image:url(wislink.gif),url(mountimg3.jpg);
background-position:bottom right, center;
background-size:150px 40px,100% 100%;
background-repeat:no-repeat,no-repeat;
}
Управление цветом
1. HSL
#one {
background-color:hsl(0,30%,50%);
}
#two {
background-color:hsl(120,100%,80%);
}
#three {
background-color:hsl(240,100%,50%);
}
2. RGBA
#id1
{
background-color:rgba(0,0,0,0.6);
}
3. HSLA
#id2
{
background-color:hsla(0,100%,0%,0.6);
}
Текст
- text-shadow
ПРИМЕР
- word-wrap
Трансформация
ПРИМЕР
ЗАДАНИЕ: последовательно применить к секции рассмотренные методы трансформации.
Переходы
ПРИМЕР
Задание: в примере настроить переходы для изменения цвета фона и цвета текста.
Анимация
Свойства:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
Управление анимацией
@keyframes anim {
0% {margin-left:3px;margin-top:3px;background-color:#7F0055;}
30% {margin-left:3px;margin-top:250px;background-color:#7F0055;}
60% {margin-left:500px;margin-top:250px;background-color:black;}
100% {margin-left:3px;margin-top:3px;background-color:#7F0055;}
}
#wrap1 {
animation:anim 6s 3;
}
Задание
ДАН КОД
- Удалить неиспользуемые элементы и правила.
- Создать верхний колонтитул с закругленными краями и заливкой.
- Настроить расположение нижнего колонтитула, сделать рамку с закругленными краями и заливку.
- Все блоки страницы оформить единообразно: рамка с закругленными краями и заливка.
- Настроить цвет гиперссылок в разном состоянии (нажатие, наведение курсора и т.д.)
- Настроить эффекты перехода для заголовков (например, изменение цвета или размера)
Юлия Сергеевна Пономарева