Сегодня я хочу вам рассказать про некоторые новые возможности CSS3, которые стоит использовать при создание современного сайта. Хотя стоит заметить, что еще не все браузеры полностью поддерживают CSS3.

Я хочу рассказать про шесть нововведений: множество фонов, селекторы, ресайз элементов, любые шрифты, текстовые тени и закругленные углы. Итак, приступим.

Множество фонов

В CSS3 есть возможность применять несколько фонов, перечисляя их через запятую.

body {
background:
url(../images/top-left.png) bottom left fixed no-repeat,
url(../images/top-right.png) bottom right fixed no-repeat;
url(../images/bottom-left.png) top right fixed no-repeat,
url(../images/bottom-right.png) top left fixed no-repeat,

}

Селекторы

Селекторы позволяют выбирать элементы для применения свойств стиля более точно, давая возможность выбора сложных групп элементов. Они экономят ваше время, сводя HTML разметку к минимуму.

Общий комбинатор элементов одного уровня

h1~p {
color: red;

}

Селектор будет работать и предавать красный цвет первому элементу p под элементом h1. Но не будет работать во втором p элементе, так как он не на том же уровне.

<h1>Heading</h1>
<p>Красный параграф</p>
<div>
<p>Не красный параграф</p>
</div>

Новые псевдо классы для более высокой специфичности без скриптов

Новые псевдо классы в CSS 3 позволяют выбирать такие группы элементов, которые раньше было возможно выбрать, только используя JS или дополнительные rkfccs\ID.

Несколько примеров новых псевдо классов:

1. :last-child - выбирает только последний дочерний элемент.
2. :nth-child(n) - выбирает n-ный дочерний элемент (например, для создания таблиц-зебр).
3. :not(e) - выбирает все, кроме е.

Полный список CSS 3 псевдо классов здесь.

Ресайз элементов

По сути это изменение размеров элементов. Задается с помощью свойства CSS3 resize. Пока работает только в браузере Сафари. Этот код позволит маленькому треугольнику разместиться в правом нижнем углу элемента, с помощью которого и можно менять размер.

div {
resize: both;

}

Любые шрифты

В интернете наиболее распространенные шрифты это Arial, Helvetica, Verdana и Georgia потому что они есть у всех на компьютере. CSS 3 позволяет использовать любые другие шрифты с помощью свойства @font-face.

@font-face {
font-family: SketchRockwell;
src: url('http://example.com/fonts/SketchRockwell.ttf');
}
h1 {
font-family: SketchRockwell;
font-size: 3.2em;
letter-spacing: 1px;
text-align: center;

}

Текстовые тени

Задаются свойством text-shadow.

В этом примере мы применим темно-синюю тень, смещенную вправо на 2px, вниз на 5px и имеет размытие радиусом 2px для всех тегов p.

p {
text-shadow: #003471 /* цвет тени */ 2px /* смещение вправо */ 5px /* смещение вниз */ 2px /* размытие*/;

}

Закругленные углы

Закруглить углы не так уж и просто сделать. Однако, с помощью CSS3, сделать это становится очень легко, используя новое свойство border-radius.

Например, код ниже сделает 10-ти пиксельное закругление для тега div:

div {
border: 2px solid #434343;
padding: 10px;
background: #e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 500px;

}

-moz для FF и -webkit для Сафари и Хрома.