РЕЗУЛЬТАТ

НОВЫЕ СВОЙСТВА ДЛЯ ГРАНИЦ

Новые свойства можно применить для округления границ, вставки

ПРИМЕР 1

div.trans {
margin: 30px;
background-color: #ffffff;
border-radius:20px;
box-shadow: 10px 10px

ПРИМЕР 2

div.trans {
margin: 30px;
background-color: #ffffff;
border-radius:20px;
box-shadow: 10px 10px

НОВЫЕ СВОЙСТВА ДЛЯ ФОНА

Дополнительно к существующим свойствам, появились:
background-size – определяет размер

ПРИМЕР РАСПОЛОЖЕНИЯ ИЗОБРАЖЕНИЯ ФОНА В PADDING-BOX

div.trans {
margin: 30px;
padding: 50px;

ПРИМЕР РАСПОЛОЖЕНИЯ ИЗОБРАЖЕНИЯ ФОНА В CONTENT-BOX

div.trans {
margin: 30px;
padding: 50px;

ОПРЕДЕЛЕНИЕ НЕСКОЛЬКИХ ИЗОБРАЖЕНИЙ КАК ФОН

CSS3 позволяет определить несколько изображений как фон

РЕЗУЛЬТАТ ПРИМЕНЕНИЯ СТИЛЯ

ОПРЕДЕЛЕНИЯ ГРАДИЕНТА ДЛЯ ФОНА

Градиент – это переход одного цвета в другой

ОПРЕДЕЛЕНИЕ ЛИНЕЙНОГО ГРАДИЕНТА

Чтобы создать линейный градиент должны быть определены по крайней

РЕЗУЛЬТАТ ПРИМЕНЕНИЯ СТИЛЯ

ОПРЕДЕЛЕНИЕ ГРАДИЕНТА „Left to Right”

#gradient {
height: 200px;
width: 300px;
background:

ОПРЕДЕЛЕНИЕ ГРАДИЕНТА „Gradient – Diagonal”

#gradient {
height: 200px;
width: 300px;
background:

ИСПОЛЬЗОВАНИЕ НЕСКОЛЬКИХ ЦВЕТОВ ДЛЯ ГРАДИЕНТА

#gradient {
height: 200px;
width: 300px;
background:

ОПРЕДЕЛЕНИЕ ПРОЗРАЧНЫХ ГРАДИЕНТОВ

Используется функция rgba(R, G, B, α), где α –

РЕЗУЛЬТАТ

ОПРЕДЕЛЕНИЕ „Radial Gradient”

#gradient {
height: 200px;
width: 300px;
background: radial-gradient(pink, white,

ДОПОЛНИТЕЛЬНЫЕ ЭФФЕКТЫ С ТЕКСТОМ

Text Shadow – используется для определения тени по

2D ПРЕОБРАЗОВАНИЯ

Преобразования позволяют произвести над HTML элементом: перемещение, вращение, масштабирование, наклоны
Для

МЕТОД TRANSLATE()

Перемещает элемент из начальной позиции, в новую позицию, перемещенную и

МЕТОД ROTATE()

Использование данного метода произведет вращение элемента на указанный угол
Пример:
img:hover {

МЕТОД SCALE()

Уменьшает или увеличивает размер (ширину и высоту) указанного HTML элемента
Пример:
img:hover

МЕТОД SKEWX()

Деформирует элемент по горизонтали (по x)
Пример:
img:hover {
height: 250px;
width:

МЕТОД SKEWY() и SKEW()

Метод skewY() деформирует элемент по вертикали
Метод skew() деформирует

МЕТОД MATRIX()

Данный метод имеет 6 параметров, содержащие математические функции позволяющие вращение,

СОЗДАНИЕ ЭФФЕКТОВ ПЕРЕМЕЩЕНИЯ

Создание данного эффекта предполагает определение
Свойств CSS
Длительность эффекта (если не

ТРАНЗИЦИИ И ПРЕОБРАЗОВАНИЯ

img {
width: 100px;
height: 100px;
}
img:hover {
border: 2px

АНИМАЦИЯ С CSS3

Анимация созданная с CSS3 позволяет создание той же анимации

СВОЙСТВА АНИМАЦИИ В CSS3

СВОЙСТВО @keyframes

Для разных браузеров используются разные варианты названия
Синтаксис: @keyframes НазваниеАнимации  {keyframes-selector {css-styles;}}

ПРИМЕР

Для элемента

ANIMATIE SLIDE SHOW

ДРУГИЕ СВОЙСТВА. ПРИМЕРЫ

Другие значения для свойств анимации смотрите
http://www.w3schools.com/css/css3_animations.asp
Exemplu1
Exemplu2
Другие примеры:
http://daneden.github.io/animate.css/
https://css-tricks.com/snippets/css/keyframe-animation-syntax/