округления границ, вставки теней для границ, так же создание

границ на основе изображений
Новые свойства:
border-radius
box-shadow
border-image
Данные свойства поддерживаются всеми браузерами

#ffffff;
border-radius:20px;
box-shadow: 10px 10px 5px pink;

border: 1px dotted purple;
opacity: 0.6;
filter: alpha(opacity=60);}

#ffffff;
border-radius:20px;
box-shadow: 10px 10px 5px pink;

width: 400px;
height:200px;
border-width: 100px;
border-image: url(flori.png);
opacity: 0.6;
filter: alpha(opacity=60);
}

– определяет размер изображения для фона
background-origin – определяет место

расположения изображения фона
Изображение-фона можно расположить в content-box, padding-box или border-box

margin: 30px;
padding: 50px;
background: url(tomJerry.jpg);

background-repeat: no-repeat;
background-size: 50px 50px;
background-origin: padding-box;
border-radius:20px;
box-shadow: 10px 10px 5px pink;
border: 1px dotted purple;
}

margin: 30px;
padding: 50px;
background: url(tomJerry.jpg);

background-repeat: no-repeat;
background-size: 50px 50px;
background-origin: content-box;
border-radius:20px;
box-shadow: 10px 10px 5px pink;
border: 1px dotted purple;
}

изображений как фон для какого-то элемента
Пример:
…

div {width:430px; position:

relative; left: 430px; top:275px;}
p{font-weight: bold;}
body {
background: url(tomJerry.jpg), url(rama.png);
background-repeat: no-repeat;
background-position:top right;}

…

цвета в другой цвет или несколько цветов
Использование градиента, для

определения цвета фона, уменьшает время загрузки страницы в браузере
В CSS3 можно определить два вида градиента
Linear Gradients (с изменением цветов down/up/left/right/diagonally)
Radial Gradients (градиент начинается с центра)
Не все версии браузеров поддерживают определение градиента

определены по крайней мере, два цвета - начальный и

конечный цвет
Синтаксис: background: linear-gradient(direcţia, c1, c2, ...);
Значение по умолчанию для градиента будет „Top to Bottom”
Пример:
#gradient {
height: 200px; width: 300px;
background: linear-gradient(pink, white); /* Стандартный синтаксис */
background: -webkit-linear-gradient(pink, white); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(pink, white); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(pink, white); /* Firefox 3.6 - 15 */
}

200px;
width: 300px;
background: linear-gradient(to right, purple,

pink); /*Стандартный синтаксис*/
background: -webkit-linear-gradient(left, purple, pink); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, purple, pink); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, purple, pink); /* Firefox 3.6 - 15 */
}

200px;
width: 300px;
background: linear-gradient(to bottom right,

purple, white); /* Стандартный синтаксис */
background: -webkit-linear-gradient(left top, purple, white); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, purple, white); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, purple, white); /* Firefox 3.6 - 15 */
}

200px;
width: 300px;
background: linear-gradient(white, purple, white);

/*Стандартный синтаксис*/
background: -webkit-linear-gradient(white, purple, white); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(white, purple, white); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(white, purple, white); /* Firefox 3.6 - 15 */
}

где α – может иметь значения от 0 до

1 (0 – без цвета, 1 – с цветом)
Пример:
#gradient {
height: 200px;
width: 300px;
background: linear-gradient(to right, rgba(200,50,0,0), rgba(200,50,0,0.8)); /*Стандартный синтаксис */
background: -webkit-linear-gradient(left, rgba(200,50,0,0), rgba(200,50,0,0.8)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, rgba(200,50,0,0), rgba(200,50,0,0.8)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, rgba(200,50,0,0), rgba(200,50,0,0.8)); /* Firefox 3.6 - 15 */
}

width: 300px;
background: radial-gradient(pink, white, pink); /*Стандартный синтаксис*/

background: -webkit-radial-gradient(pink, white, pink); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(pink, white, pink);/* Opera 11.1 - 12.0 */
background: -moz-radial-gradient(pink, white, pink); /* Firefox 3.6 - 15 */
}

определения тени по горизонтали, по вертикали, нечеткости и цвета

тени
Пример (Multiple Shadows):
h2{text-shadow: 1px 1px 2px black, 0 0 10px blue, 0 0 0.2em darkblue;
color: pink;
text-align: center;
}

вращение, масштабирование, наклоны
Для создания 2D преобразований в CSS3 используются

следующие методы преобразования:
translate()
rotate()
scale()
skewX()
skewY()
matrix()

позицию, перемещенную и по x и по y
Пример:
img:hover {

height: 250px;
width: 150px;
transform: translate(20px,30px);
}
Vezi exemplul

указанный угол
Пример:
img:hover {
height: 250px;
width: 150px;

transform: translate(20px,30px);
transform: rotate(20deg);
}

указанного HTML элемента
Пример:
img:hover {
height: 250px;
width:

150px;
transform: translate(20px,30px);
transform: scale(1.3,1.3);
}

height: 250px;
width: 150px;
transform: translate(20px,30px);

transform: skewX(20deg);
}

вертикали
Метод skew() деформирует элемент по горизонтали и по вертикали
Пример:
img:hover

{
height: 250px;
width: 150px;
transform: translate(20px,30px);
transform: skew(20deg, 10deg);
}

функции позволяющие вращение, перемещение, масштабирование и наклоны элемента
Пример:
img:hover {

height: 250px;
width: 150px;
transform: matrix(1, -0.3, 0, 1, 0, 0);
}

эффекта (если не указывается длительность эффект не произойдет, потому

что значение по умолчанию - 0)
Пример:
div {
background: linear-gradient(to right, rgba(10,250,0,0), rgba(10,250,0,0.8));
height: 250px; width: 350px; }
div:hover {
border: 2px solid green;
width: 550px; transition: width 2s; }
Rezultat

height: 100px;
}
img:hover {
border: 2px solid indigo;

height: 300px;
width: 230px;
transition: width 2s, height 2s, transform 2s;
transform: rotate(360deg);
}
Rezultat

той же анимации с элементами HTML, которую можно было

создать, до недавних пор, только с использованием JavaScript или Flash
Анимация представляет постепенное изменение одного стиля в другой, для какого-то HTML элемента
Можно изменить несколько свойств CSS и не только один раз, но и несколько раз
Для определения анимации в CSS3, необходимо сперва определить несколько ключевых кадров для размещения анимации
Правила перехода для анимации определяются в @keyframes имя
Другие примеры: http://www.w3schools.com/css/css3_animations.asp

@keyframes НазваниеАнимации  {keyframes-selector {css-styles;}}

from {background-color: pink; color:black; text-align: center;}
to {background-color:

purple; text-shadow: 1px 1px 2px black, 0 0 10px blue, 0 0 0.2em darkblue; color: pink; text-align: center;} }
@-webkit-keyframes titlu { from {background-color: pink; color:black; text-align: center;}
to {background-color: purple; text-shadow: 1px 1px 2px black, 0 0 10px blue, 0 0 0.2em darkblue; color: pink; text-align: center;} }
h1 { background-color: pink; color:black; text-align: center;
-webkit-animation-name: titlu; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-delay: 2s;
animation-iteration-count: infinite;
animation-name: titlu;
animation-duration: 4s;
animation-delay: 2s;
-webkit-animation-iteration-count: infinite; }

примеры:
http://daneden.github.io/animate.css/
https://css-tricks.com/snippets/css/keyframe-animation-syntax/