CSS3 действительно начинает набирать обороты, многие из команд, изложенных в CSS3 working draft поддерживаются Firefox, Safari и Google Chrome. Мы подумали и я решил описать некоторые из понравившихся свойств. Прежде чем начать описание свойств CSS3 укажем синтаксис для работы для каждого отдельного браузера.

Для Mozilla Firefox нам нужно использовать -moz- префикс, например:

-moz-border-radius:

А для Safari -webkit- префикс, например:

-webkit-border-radius:

1. Border radius

CSS3 свойство border radius делает закругленные границы элементам. Instead of using 4 or more images to create curved corners use the following commands:


#box1 {
border: 1px solid #699;

/* для Safari и Google Chrome */
-webkit-border-radius: 20px;
}


2. Box shadow

Используя CSS3 box shadow command вы придаете тень нужному элементу. Тень характеризуется тремя числовыми значениями и соответственно цветом. Что представляют собой эти значения:

1. Горизонтальный отступ тени (может быть положительным и отрицательным)
2. Вертикальный отступ тени(может быть положительным и отрицательным)
3. Прозрачность тени

После добавления значения цвета тени, можно считать, что все готово:

#box2 {
/* не является обязательным для эффекта - тень */
border:1px solid #699;

/* для Safari и Google Chrome */
-webkit-box-shadow: 5x 5px 5px #b6ebf7;
}

3. Прозрачность или RGBA

C прозрачностью всегда были проблемы. Исторически различные браузеры по-разному понимают прозрачность. Дабы избежать этого попытались добавить свойство CSS3 фон RGBA, в принципе, это свойство является более логичным. Свойство состоит из 4 значений – 1-е, 2-е и 3-е это красный, зеленый и синий (значения от 0 до 255) и добавился альфа-канал или прозрачность (значения от 0 до 1).

Для задания фона RGBA специальные префиксы браузеров (-moz-, -webkit-) не нужны:

#box3 {
background-color: rgba(110, 142, 185, .5);
}

Цвет фона добавляет классный серовато-голубой фон с 0.5 или 50% прозрачностью для браузеров, понимающих CSS3 RGBA свойство.

#box3 {
/* Для всех браузеров */
background-color: #6e8eb9;
}

body:last-child #box3 {
/* Exclude all IE browsers using :last-child */
background-color: rgba(110, 142, 185, .5)!important;
}

4. Колонки

В CSS3 добавлена возможность разделения контента на столбцы. Вместо того, чтобы размещать элементы в разных дивах, мы можем установить количество колонок, ширину и правила внутри одного контейнера:

#box4 {
/* не является обязательным для свойства - колонки */
border: 1px solid #699;

/* для Safari и Google Chrome */
-webkit-column-count: 2;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #6e8eb9;
}

5. Несколько фоновых картинок

В предыдущих версиях CSS можно было задать только одну фоновую картинку для одного элемента. Теперь в CSS3 можно добавлять сколько угодно фоновых картинок, просто разделив их запятой.

Для помещения картинок слева и справа элемента можно написать код так:

#box5 blockquote{
background:url(/i/quotel.gif) no-repeat 0 0, url(/i/quoter.gif) no-repeat 100% 0;
border:1px solid #699;

padding:0 20px;
}

Это конечно же не работает в Internet Explorer и, если хотите узнать как обойти, т.е. хак, читайте оригинал статьи (ссылка в конце поста). Ненавижу IE.

6. Box-sizing

Это свойство позволяет указывать откуда будут считаться padding. Если от ширины контента, то в CSS3 нужно писать box-sizing: content-box.

#box6 {
width: 200px;
padding: 10px;

}

Также CSS3 позволяет использовать свойство box-sizing для расчетов отступов от границы дива border-box:p>

#box6b {
width: 200px;
padding: 10px;

/* для Safari и Google Chrome */
-webkit-box-sizing: border-box;
}

7. Outline (типа бордера что-то)

Outline — все значения пишутся также как и для бордера. Свойство outline-offset позволяет сдвигать эту границу внутрь или наружу элемента.

#box7 {
border: 1px solid #000;
outline: 1px solid #699;
outline-offset: -9px;
}

8. Градиент фона

CSS3 градиент фоена очень удобная и полезная штука для создания разнообразных палитр. Самым простейшим является создание градиента снизу-вверх и слева-направо.

В этом примере CSS3 градиент в Mozilla Firefox от голубого к белому снизу на 20% от высоты дива

#box8 {
/* для Mozilla Firefox */
background: -moz-linear-gradient(bottom, #b6ebf7, #fff 20%);
}

Для Safari написать тоже самое будет чуть посложнее:

#box8 {
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff));
}

9. Вращение

CSS3 позволяет добавить вращение для любых элементов вдоль своей оси путем задания необходимого параметра в свойство transform.

#box9 {
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}

Комментарий листолога:

Рекомендуем к прочтению оригинал, так как там десять новых свойств. CSS3 анимацию опустили пока, рановато.

Источник: webcredible

Смотреть оригинальный список