Здравствуйте. Сегодня я хочу вам рассказать про некоторые новые возможности 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, вам необходимо:
Селектор будет работать и предавать красный цвет первому элементу p под элементом h1. Но не будет работать во втором p элементе, так как он не на том же уровне.
Code
<h1>Heading</h1>
<p>Красный параграф</p>
<div>
<p>Не красный параграф</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 для Сафари и Хрома.
