CSS3 – Часть 3: Текстовые эффекты

Статья от 30.06.09 в категории CSS3
Теги: CSS3, текстовые эффекты, тень

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

Рассмотрим более детально грядущие нововведения.

Тени

С помощью тени текста можно сделать его поистине ужастным, но если использовать этот эффект грамотно, можно получить достаточно эстетичный текстовый блок либо загаловок. В данный момент тени поддерживают 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;
}

text_wrap

В заключение

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

Подпишись на обновления

Если вам понравилась статья, подпишитесь на обновления через RSS (?), чтобы не пропустить новые интересные статьи. Также Вы можете зафолловить меня в Twitter или подписаться на обновления по email.

Закладки

Оставить комментарий

Подпишись на обновления
через rss или email.

WEBduty.ru css html javascript jquery