CSS3, это должен знать каждый.

Опубликовано 09 2 2010 Начлаб

css2 В этой записи будет описано несколько техник в CSS3, которые должен знать каждый. Они работают в большинстве популярных браузеров, включая Firefox и Safari. (IE отдыхает, уж извините :-) )

Поскольку CSS3 еще пока не полностью поддерживается, будем использовать специальные префиксы:

Mozilla/Firefox/Gecko: -moz-
Webkit (Safari/Chrome): -webkit-

Итак, поехали:

Отбрасывание тени

Учитывается несколько параметров. Первый – цвет тени, следующие два - размеры сдвига по горизонтали и вертикали, и последний – степень размытости.

box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

Градиенты.

Используя -moz мы задаем направление градиента, а затем указываем начальный и конечный цвета. -webkit требует больше кода, сперва определяем тип градиента, следующие два значения определяют направление, а последние два - начальный и конечный цвета.

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));

Градиент в качестве фона:

background-image: -moz-linear-gradient(-90deg,#1aa6de,#022147);

Под IE можно использовать следующее:

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr=’#EFC381?, EndColorStr=’#E6A542?);

RGBA

Указание цвета в палитре RGBA состоит из 4х значений: количества красного, зеленого, синего и степени прозрачности. Она имеет значения от 0 до 1, в примере указано .5, что соответствует 50% прозрачности. RGBA не требует браузерных префиксов.

background-color: rgba(0, 54, 105, .5);

HSL

Нам ныне доступна и цветовая модель HSL. Она основана на понятиях Тон, Насыщенность и Яркость. Также, не требует префиксов.

background-color: hsl(209,41.2%, 20.6%);

Цвет рамки

Определяем отдельно цвета для всех сторон рамки, border-top, border-right, border-bottom, и border-left. Можно заметить, что для всех 8 пк ширины рамки указано 8 цветов.

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

Эффект выделения текста цветом.

По сути, заголовком все сказано.

::selection {
background: #3C0; /* Safari */
color: #90C;
}
::-moz-selection {
background: #3C0; /* Firefox */
color: #90C;
}

Трансформация

Эффект увеличения при наведении. С каждым значение больше 1, элемент будет увеличиваться, со значением меньше 1 – уменьшаться.

-moz-transform: scale(1.15);
-webkit-transform: scale(1.15);

Расположение текста в несколько колонок.

Этим эффектом можно придать веб-странице сходство с газетной. Указываем, сколько сделаем колонок (верхняя строка), разделитель (вторая строка), интервал (нижняя строка).

-moz-column-count:3;
-moz-column-rule: solid 1px black;
-moz-column-gap: 20px;

-webkit-column-width: 13em;
-webkit-column-gap: 1em;

Примечание: некоторые не работают в Safari/NightlyBuild 4.0.4, Chromium 5.0.316.0
______________________________________________
на основе статьи от Andrew Roberts

Понравилась запись? Подпишись на RSS!