Новые возможности CSS3 - Уроки CSS - Главная - MegaScript.Net.Ru

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

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

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

Code

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 разметку к минимуму.
Общий комбинатор элементов одного уровня
Еще один тип комбинаторов появился в CSS3 - общий комбинатор элементов одного уровня. Этот селектор нацелен на все элементы одного уровня заданного элемента. Например, если вы хотите нацелиться на абзацы в той же категории как заголовки h1, вам необходимо:

Code

h1~p {
color: red;
}

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

Code

<h1>Heading</h1>

Красный параграф</p>
<div>

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

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

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

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

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

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

Code

div {
resize: both;
}

Любые шрифты

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

Code

@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.

Code

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

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

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

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

Code

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

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

HTML
BB-Code
Ссылка