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

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

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


Селекторы

Селекторы позволяют выбирать элементы для применения свойств стиля более точно, давая возможность выбора сложных групп элементов.Они экономят ваше время, сводя HTML разметку к минимуму.
Общий комбинатор элементов одного уровня
Еще один тип комбинаторов появился в CSS3 - общий комбинатор элементов одного уровня.Этот селектор нацелен на все элементы одного уровня заданного элемента.Например, если вы хотите нацелиться на абзацы в той же категории как заголовки h1, вам необходимо:



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


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

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

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

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

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


Любые шрифты

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

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

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

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

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

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

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

-moz для FF и -webkit для Сафари и Хрома. [ Скриншот ] Метки: возможности, Новые, CSS3