|
Здравствуйте. Сегодня я хочу вам рассказать про некоторые новые
возможности 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 разметку к минимуму.
Общий комбинатор элементов одного уровня
Еще один тип комбинаторов появился в CSS3 - общий комбинатор элементов одного уровня.
Этот селектор нацелен на все элементы одного уровня заданного элемента.
Например, если вы хотите нацелиться на абзацы в той же категории как заголовки h1, вам необходимо:
h1~p {
color: red;
}
Селектор будет работать и предавать красный цвет первому элементу p под элементом h1.
Но не будет работать во втором p элементе, так как он не на том же уровне.
<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.
Пока работает только в браузере Сафари.
Этот код позволит маленькому треугольнику разместиться в правом нижнем углу элемента, с помощью которого и можно менять размер.
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 для Сафари и Хрома.
На заметку:
Сейчас уже много блогеров и уже давно создалась некая блогосфера.
Если вы тоже хотите стать блогером, то можете почитать про
блоггинг на esblog. | 
