Поднимите ваш дизайн на новый уровень с CSS3

Вот было свободное время и я решил перевести статью "Take Your Design To The Next Level With CSS3" и причин тому несколько. Во первых я постоянно работаю с CSS и HTML и мне это интересно, во вторых все новости в этой области меня очень интересуют, а чтобы они лучше усвоились, достаточно один раз просто переписать, а ели еще при этом и переводить, то они отложатся на долго. Ну и в третьих я просто уверен, что это пригодится еще кому-нибудь. Есть и в четвертых и в пятых, но это уже не важно.

Если где накосячил, или просто нашли ошибку, прошу не поленитесь и отпишитесь в комментариях.

Селекторы (Selectors)

Аттрибутовые селекторы

CSS селекторы, невероятно-мощный инструмент: он позволяет нам определить нужный HTML элемент в нашем коде без добавления ему классов, ID и применения JavaScripts. Они позволяет сделать наш код более чистым и легким, т.к. позволяют избавиться от большого количества лишних классов и ID, что сильно упрощает работу для верстальщика.

• [att^="value"]
  Соответствует элементу аттрибут которого начинается с заданного значения.

• [att$="value"]
  Соответствует элементу аттрибут которого заканчивается на заданное значение.

• [att*="value"]
  Соответствует элементу аттрибут которого содержит заданное значение.

Пример: данный пример применит наши стили ко всем ссылкам у которых значение аттрибута title заканчивается на “tweetCC”:

a[title$="tweetCC"] {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 140px;
    height: 140px;
    text-indent: -9999px;
    }

Поддерживается браузерами:
Аттрибутовые селекторы не поддерживает только IE6. А вот уже в IE7 и IE8, Opera и Webkit- и Gecko они отлично работают. Таким образом использовать данный пример очень даже полезно и безопасно.

Комбинаторы

Определяют все родственные элементы которые имеют одинакового родителя.

Пример: Добавит серую рамку ко всем картинкам, которые находятся в div (и оба div и картинка имеют одного родителя):

div~img {
	border: 1px solid #ccc;
	}

Поддерживается браузерами:
Все главные браузеры поддерживают родственные селекторы, кроме как обычно IE6.

Псевдо-классы

Вероятно самым обширным новшеством в CSS3, было добавление псевдо-классов. Это очень интересный и полезный инструмент:

• :nth-child(n)
  Позволяет вам обратиться к элементам в родительском списке по его позиции. Вы можете использовать число, числовое выражение или четные или нечетные ключи(очень полезно для создания через-строчного окрашивания списка). Таким образом если вам надо выбрать группу из трех элементов следующу. после четвертого элемента в списке, вы просто можете написать так:

  name="code">:nth-child(3n+4) { background-color: #ccc; }

• :nth-last-child(n)
  Похожий на предыдущий селектор, но служит для обращения к последнему элементу родителя. Для примера, чтобы выбрать два последних параграфа в div-контейнере, достаточно написать так:

  name="code">div p:nth-last-child(-n+2)

• :last-child
  Обратиться к последнему элемент родителя:

  name="code">:nth-last-child(1)

• :checked
  Выбрать элементы которые "checked"; для примера чекбоксы "checked boxes".

• :empty
  Выбрать все элементы которые не имеют детей или пусты.

• :not(s)
  Выбрать все элементы которые не соответствуют указанному обьявлению.
  Например, если вы хотите сделать все параграфы у которых нет класса “lead” покрасить в черный цвет, вам нужно будет написать следующий код:

  name="code">p:not([class*="lead"]) { color: black; }

Поддерживается браузерами:
Браузеры на движке Webkit и Opera поддерживают все новые CSS3 псевдо-селекторы. Firefox 2 и 3 (на движке Gecko) поддерживают только :not(s), :last-child, nly-child, :root, :empty, :target, :checked, :enabled и :disabled, но уже Firefox 3.5 будет гораздо лучше поддерживать CSS3 селекторы. Браузеры на движке Trident (Internet Explorer) фактически не поддерживают псевдо-селекторы.

RGBA и прозрачность (Opacity)

RGBA позволяет вам не только устанавливать цвет, но также и прозрачность элемента. Некоторые браузеры все еще не поддерживают этого, но так как глубина прозрачности указывается после определения цвета элемента, то старые браузеры смогут правильно отображать цвет.

Чтобы установить RGBA цвет, мы должны определить значение для красного, синего и зеленого цвета в целых числах от 0 до 255 либо в процентах. Значение прозрачности же устанавливается от 0.0 до 1.0; к примеру, 0.5 - 50% прозрачности.

#networks li a:hover,
#networks li a:focus {
    background: rgba(164, 173, 183, .15);
    }

Поддерживается браузерами:
RGBA поддерживается браузерами на движке Webkit. Internet Explorer не поддерживают этого. Firefox 2 и ниже не поддерживает, в Firefox 3 работает, как и в Opera 9.5. Прозрачность работает в Opera и Webkit- и Gecko браузерах, но не поддерживается ранних версиях IE.

Много-колоночная разметка (Multi-Column)

Этот новый CSS3 селектор позволяет вам создавать много-колоночные сайты, без использования лишних div-контейнеров, что позволяет вам создавать отображать текст на странице в виде газетных полос.

Для примера на сайте tweetCC отображается текст в четыре колонки используя данный селектор:

.index #content div {
    -webkit-column-count : 4;
    -webkit-column-gap : 20px;
    -moz-column-count : 4;
    -moz-column-gap : 20px;
    }

Мы можем обозначить три вещи в этом селекторе: количество колонок (column-count), ширина каждой колонки(column-width, не используется в данном примере) и промежуток между колонками (column-gap). Если количество колонок (column-count) не установлено, то браузер попытается установить максимальное количество колонок, которое поместится на заданную ширину.

Чтобы добавить вертикальный разделитель между колонками, мы можем использовать (column-rule) свойство, которое очень похоже на свойство (border):

div {
    column-rule: 1px solid #00000;
    }

Связанные свойства: column-break-after, column-break-before, column-span, column-fill.
Поддерживается браузерами:
Браузеры которые не поддерживают данное свойство, просто отобразят текст в одну колонку. Работает в Safari 3 и 4 и Firefox 1.5+.

Много фонов (Multiple Backgrounds)

CSS3 позволяет вам применить несколько слоев фонов к одному элементу используя multiple свойство как background-image, background-repeat, background-size, background-position, background-origin и background-clip.

Простой способ добавить несколько фонов к элементу выглядит так:

div {
	background: url(example.jpg) top left (100% 2em) no-repeat,
		url(example2.jpg) bottom left (100% 2em) no-repeat,
		url(example3.jpg) center center (10em 10em) repeat-y;
	}

Первое изображение в списке, будет "ближе всего" к пользователю.
В данном примере (100% 2em) говорит о размере фона; Фоновый рисунок верхнем левом углу растянется на всю ширину div-элемента будет высотой в 2em.

Поддерживается браузерами:
multiple backgrounds работают только в Safari и Konqueror.

Перенос слов (Word Wrap)

Свойство word-wrap используется для предотвращения выхода за пределы контейнера длинных слов. Оно может иметь два значения: normal и break-word. В нормальном режиме(по умолчанию) перенос слов происходит только в местах где это возможно, таких как например дефис. Если же используется break-word, то слова могут быть разбиты в любом месте где понадобится, чтобы разместиться в свободном месте не вылезая за пределы контейнера.

.widefat * {
    word-wrap: break-word;
    }

Поддерживается браузерами:
word-wrap поддерживается такими браузерами как Internet Explorer и Safari. Firefox поддерживает его начиная с версии 3.5.

Тень от текста (Text Shadow)

При помощи данного свойства, тексту можно придать объемность и сделать более удобным его восприятие на сложных фоновых изображениях.

Пример использования:

.signup_area p {
	text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

Где цвет тени задается (используя RGBA, смотрите выше), потом идут координаты сдвига тени по (x координате) и (y координате), и в заключении идет значение радиуса размытия тени.

А если вы хотите применить несколько теней к одному элементу, достаточно разделить тени запятой. Пример:

p {
    text-shadow: red 4px 4px 2px,
		yellow -4px -4px 2px,
		green -4px 4px 2px;
    }

Поддерживается браузерами:
Webkit-браузеры и Opera 9.5 поддерживают text-shadow. Internet Explorer не поддерживает, и Firefox будет поддерживать только с версии 3.5.

Встраивание шрифтов @font-face-Attribute

позволяет вам встраивать любые шрифты в ваш сайт. Пример использования:

@font-face{
    font-family: 'DroidSans';
    src: url('../fonts/DroidSans.ttf') format('truetype');
    }

Для использования встроенного шрифта на вашем сайте, вы должны объявить каждый стиль отдельно (например: normal, bold и italic).

После объявления правила @font-face, вы можете обращаться к вашему шрифту в обычной манере:

p {
    font-family: "DroidSans";
    }

Если браузер не поддерживает свойство @font-face, он отобразит текст следующим указанным в свойстве font-family шрифтом (CSS font стеке).

Поддерживается браузерами:
@font-face работает в Safari 3.1+. Internet Explorer поддерживает только если используются EOT шрифты. Opera 10 и Firefox 3.5 должны поддерживать.

Закругленные уголки (Border Radius)

Border-radius добавляет закругленные уголки HTML элементам без использования картинок и других хитрых приемов. Сейчас, это возможно самое используемое CSS3 свойство для создания простых закругленных уголков которое не критично для дизайна и тем более для юзабилити.

Пример добавления закругленных уголков:

h2 span {
    color: #1a1a1a;
    padding: .5em;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    }

А если вы хотите задать закругленные уголки для определенных углов, вам нужно будет написать следующее:

div {
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    }

Поддерживается браузерами:border-radius поддерживается браузерами на движке Webkit- и Gecko, но не всеми версиями Internet Explorer и Opera.

Рамка из картинки (Border Image)

Свойство border-image позволяет вам определять любую картинку для рисования рамки элемента, что позволяет вам делать рамки не только обычные "solid", "dotted" и доугие стили, но и создавать свои собственные.

Пример использования:

#content .post img {
    border: 6px solid #f2e6d1;
    -webkit-border-image: url(main-border.png) 6 repeat;
    -moz-border-image: url(main-border.png) 6 repeat;
    border-image: url(main-border.png) 6 repeat;
    }

Для определения border-image, мы должны указать местоположение картинки, часть которой будет обрезаться и использоваться для каждой стороны нашего элемента и каким образом изображение будет масштабироваться и повторяться.

Чтобы создать div который использует картинку ниже как рамку, мы должны написать следующий код:

div {
    border-width: 18px 25px 25px 18px;
    -webkit-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -moz-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -o-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -khtml-border-image: url(example.png) 18 25 25 18 stretch stretch;
    border-image: url(example.png) 18 25 25 18 stretch stretch;
}

Последний параметр этого свойства может быть "stretch" (по умолчанию), "round" (только целое число повторяющихся изображений будет растянуто на доступное пространство) или будет повторяться. В нашем примере, верхний, нижний, левый и правый угол картинки растянется. Если мы хотим, чтобы растягивались только верхние и нижние стороны, мы должны использовать следующий код:

div {
    (...)
    border-image: url(example.png) 18 25 25 18 stretch repeat;
}

Мы также можем задать параметры для каждого угла по отдельности, если мы хотим использовать для каждого угла свое изображение:

div {
    border-top-image: url(example.png) 5 5 stretch;
    border-right-image: url(example.png) 5 5 stretch;
    border-bottom-image: url(example.png) 5 5 stretch;
    border-left-image: url(example.png) 5 5 stretch;
    border-top-left-image: url(example.png) 5 5 stretch;
    border-top-right-image: url(example.png) 5 5 stretch;
    border-bottom-left-image: url(example.png) 5 5 stretch;
    border-bottom-right-image: url(example.png) 5 5 stretch;
    }

Если браузер не поддерживает свойство border-image, оно будет проигнорировано и сработают только свойства такие как border-width и border-color.

Поддерживается браузерами:
border-image на данный момент поддерживается только Webkit-браузерами. Поддержка в следующих релизах Firefox не однозначна.

Тень (Box Shadow)

Свойство box-shadow добавляет тень HTML элементам без использования разных ухищрений и фоновых картинок. Также как и свойство text-shadow, оно позволяет улучшить дизайн вашего сайта;

Чтобы добавить простую тень для элемена при наведении курсора, достаточно написать такой код:

#navigation {
	-webkit-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	}
	#navigation li a:hover,
	#navigation li a:focus {
	-webkit-box-shadow: 0 0 5px #111;
	-moz-box-shadow: 0 0 5px #111;
	}

Свойство box-shadow может иметь сразу помногу таких параметров как: горизонтальный сдвиг, вертикальный сдвиг, радиус размытия, радиус распространения и цвет тени.

Чтобы сделать красную тень расположенную на 4 пиксепя вправо и вниз от нашего div, без размытия, нам понадобится написать следующий код:

div {
    -moz-box-shadow: 4px 4px 0 #f00;
    -webkit-box-shadow: 4px 4px 0 #f00;
    box-shadow: 4px 4px 0 #f00;
    }

Поддерживается браузерами:
box-shadowна данный момент поддерживается только браузерами на Webkit-движке, но уже Firefox 3.5 должен научиться работать с box-shadow.

Box Sizing

Согласно сппецификации CSS 2.1, когда расчитываются общие размеры блока, рамка(border) и внутренние отступы(padding) должны быть добавлены к ширине и высоте. Но как оказалось на практике, разные браузеры делают это по своему собственному усмотрению. Свойство box-sizing позволяет вам указать как браузер должен рассчитывать ширину и высоту элемента.

Пример использования:

input[type="text"],
	textarea {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

Третье свойство (-ms-box-sizing) работает только в Internet Explorer 8.
Свойство box-sizing может иметь одно из двух состояний: border-box и content-box. Content-box будет расчитывать ширину и высоту также как в спецификации CSS 2.1. Border-box же вычтет отступы(padding) и рамку (border) из указанной ширины и высоты.

Поддерживается браузерами:
Свойство box-sizing поддерживается IE8, Opera и Gecko- и Webkit-браузерах.

Медиа-запросы (Media Queries)

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

#sidebar {
	float: right;
	display: inline; /* IE двойной отступ Bugfix */
	}

@media all and (max-width:480px) {
	#sidebar {
		float: none;
		clear: both;
		}
	}

А вот таким способом вы можете покрасить ссылки в красный цвет, если экран устройства цветной:

a {
	color: grey;
	}

@media screen and (color) {
	a {
		color: red;
		}
	}

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

Поддерживается браузерами:
Media queries поддерживается Webkit-браузерами и Opera. Firefox планирует поддержку в версии 3.5. Internet Explorer не поддерживает и не планирует поддерживать этого в последующих версиях.

Речь (Speech)

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

• voice-volume
  Возможно установить уровень громкости от 0 до 100 (0 означает тишина), в процентах либо ключем(silent, x-soft, soft, medium, loud and x-loud).

• voice-balance
  Управление каналами звука (если звуковая система пользователя поддерживает стерео).

• Speak
  Объяснить экранному ридеру что именно надо проговаривать, слова, цифры или знаки пунктуации. Доступные ключи: none, normal, spell-out, digits, literal-punctuation, no-punctuation и inherit.

• Pauses and rests
  Устанавливает паузу до или после контента элемента который должен быть проговорен. Вы можете использовать любой тип временных интервалов (для примера, “2s” для 2 секунд) или ключевые слова (none, x-weak, weak, medium, strong and x-strong).

• Cues
  Использование звуков для разделения похожих элементов и управление их громкостью.

• voice-family
  Устанавливает определенные типы голосов и голосовых комбинаций(как вы обычно делаетете это со шрифтами)

• voice-rate
  Управление скоростью произношения определенных элементов. Оно может быть определено при помощи процентов и ключевых слов: x-slow, slow, medium, fast and x-fast.

• voice-stress
  Определяет тип акцента, который должен быть применен, используя ключи: none, moderate, strong and reduced.

Для примера, чтобы сказать экранному ридеру прочесть все заголовки H2 женским голосом из левого динамика мягким тоном и следом проиграть определенный звук, достаточно написать следующий код:

h2 {
	voice-family: female;
	voice-balance: left;
	voice-volume: soft;
	cue-after: url(sound.au);
	}

К несчастью, это свойство поддерживают пока еще очень мало браузеров, но определенно стоит помнить о будущеем.

Поддерживается браузерами:
По только Opera для Windows XP и 2000 поддерживает некоторые из свойств голосовых модулей. Для использования их, пользуйтесь -xv- префиксом; для примера, -xv-voice-balance: right.