Веб-дизайн и интернет-программирование. Лекции № 6-7.

Веб-дизайн и интернет-программирование. Лекции № 6-7.
Веб-дизайн и интернет-программирование. Лекции № 6-7.

CSS3

Полезные ресурсы:

  1. CSS3 на HTMLBOOK
  2. Учебник CSS3
  3. Уроки CSS3
На страницу урока →

CSS3

Работа с фоном


#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);
}

Границы

  1. border-radius
  2. ПРИМЕР

  3. box-shadow
  4.  

     

    ПРИМЕР

  5. border-image
  6. ПРИМЕР

Текст

  1. text-shadow
     

     

    ПРИМЕР

  2. word-wrap

Трансформация

Трансформация

 

 

 

 
ПРИМЕР
ЗАДАНИЕ: последовательно применить к секции рассмотренные методы трансформации.

Переходы

 

 

 

 
ПРИМЕР
Задание: в примере настроить переходы для изменения цвета фона и цвета текста.

Анимация

 

 

 

 
ПРИМЕР

Анимация

Свойства:

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. 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;
}

Задание

ДАН КОД

  1. Удалить неиспользуемые элементы и правила.
  2. Создать верхний колонтитул с закругленными краями и заливкой.
  3. Настроить расположение нижнего колонтитула, сделать рамку с закругленными краями и заливку.
  4. Все блоки страницы оформить единообразно: рамка с закругленными краями и заливка.
  5. Настроить цвет гиперссылок в разном состоянии (нажатие, наведение курсора и т.д.)
  6. Настроить эффекты перехода для заголовков (например, изменение цвета или размера)

Опубликовано: 10.03.2015 г.