Тени

С помощью тени текста можно сделать его поистине ужастным, но если использовать этот эффект грамотно, можно получить достаточно эстетичный текстовый блок либо загаловок. В данный момент тени поддерживают Firefox 3.1/3.5, Google Chrome, Opera 9.5, Safari 1.1+. IE 6,7,8 увы не поддерживает данный эффект.
Пример:

.text_shadow {
color: #897048;
background-color: #fff;
text-shadow: 2px 2px 2px #ddccb5;
font-size: 15px;
}

Разделимость слов

В настоящее время если слово достаточно длинное, то оно вылезет за границы блока. Это конечно правильно, но бывают ситуации, когда необходимо чтобы браузер переносил часть слова на другую строчку.
Пример:

.text_wrap {
word-wrap:  break-word;
}

В заключение

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

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

Скругление границ

Достижение скругления углов с использованием “классического” CSS достаточно сложно – для этого обычно используются изображения каждого из углов. Используя CSS3, сверстать скруглённые углы очень просто. Достаточно лишь использовать нужное CSS-свойство. Скругление может применяться к каждому углу отдельно, радиус скругления, цвет легко изменяются.
Пример:

.border_rounded {
background-color: #ddccb5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;
padding: 10px;
width: 310px;
}

Градиенты

Использование градиентов в бордерах может быть эффективным, если использовать их правильно. Но CSS код здесь усложняется тем, что требудется определить каждый цвет градиента:

.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b 
                                      #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b 
                                   #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b 
                                  #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b 
                                  #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}

Тени

В настоящее время тени – один из “трудноверстаемых” элементов страницы. В CSS3 всё гораздо проще:

.border_shadow {
-webkit-box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
width: 300px;
}

Изображения

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

.border_image {
-webkit-border-image: url(border.png) 27 27 27 27 round round;
}

В заключение

Это революция бордеров! Эти CSS3 свойства съэкономят немало времени веб-мастера. Они в значительной степени упрощают верстку многих элементов дизайна.
В следующей статье я расскажу про текстовые эффекты.

Что же это такое, CSS3?

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

• Блочная модель
• Списки
• Ссылки
• Границы и бэкграунды
• Текстовые эффекты

Список всех модулей

Когда всё это будет работать?

Некоторые из модулей уже завершены, например SVG (Масштабируемая векторная графика), в одной из статей я рассказывал о плагине jqPlot, который применял SVG. Большинство модулей по прежнему в процессе разработки.
Нельзя дать точной даты, когда стандарт CSS3 будет полностью работоспособен, но некоторые современные браузеры уже сейчас поддерживают некоторые CSS3 свойства.
Новые свойства будут постепенно поддерживаться браузерами, помодульно. Что, в принципе, вполне логично. Предположительно через 2-3 года большинство функций CSS3 будут поддерживаться всеми браузерами.

Как CSS3 повлияет на веб-разработку?

Будем надеяться, в основном позитивным образом. CSS3 несомненно, будет полностью обратно совместима, это значит, что не будет необходимости изменять существующие стили своих сайтов для их работоспособности при стандарте CSS3. Браузеры всегда будут поддерживать CSS2-стили. По этому поводу можно не волноваться.
С поддержкой CSS3 появится возможность использовать новые селекторы и свойства. Это позволит достичь новых конструктивных особенностей веб-страниц (например,анимация или градиент) только с помощью стилей, и усовершенствование нынешних техник верстки в сторону их упрощения (например, границы, многоколлоная верстка).
В будущих статьях этой серии я сосредоточу внимание на отдельных частях нового стандарта CSS. Следующая статья будет посвящана границам (border).