Благодаря новым свойствам CSS стало возможным украсить текст разными способами.
text-shadow
Свойство text-shadow способно придавать тексту тень, так же можно одновременно предавать одному тексту сразу несколько теней и менять угол их наклона.
Пример:
<style type='text/css'>
#shadow1,#shadow2,#shadow3 {
font-size:2.5em;
font-family:Arial;
}
#shadow1 {
text-shadow:3px 2px #FFAE00;
}
#shadow2 {
text-shadow:1px 1px 10px #FFAE00;
}
#shadow3 {
text-shadow:2px 2px 2px #FFAE00, 2px 2px 15px #1435AD;
}
</style>
</head>
<body>
<p id="shadow1">Пример простой тени</p>
<p id="shadow2">Пример тени с размытием</p>
<p id="shadow3">Несколько теней одновременно</p>
</body>
</html>
text-overflow
Данное свойство указывает, как должен прерываться текст, если он не влазиет в блок.
- ellipsis – текст заканчивается многоточием, после последнего вместившегося слова.
- clip – текст просто прерывается по окончании области.
Проще показать на примере:
<head>
<style type='text/css'>
#wrap1 {
width:450px;
border:1px #000 solid;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
#wrap2 {
width:450px;
border:1px #000 solid;
text-overflow:clip;
overflow:hidden;
white-space:nowrap;
}
</style>
</head>
<body>
<p id="wrap1"><b>text-overflow:ellipsis</b> - Текст выходящий за пределы родительского элемента</p>
<p id="wrap2"><b>text-overflow:clip</b> - Текст выходящий за пределы родительского элемента</p>
</body>
</html>
word-wrap
Свойство word-wrap позволяет разделять длинные слова и переносить их на новую строчку, может преследовать три значения:
- Normal - Строки не переносятся или переносятся в тех местах, где явно задан перенос.
- break-word - Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.
- Inherit - Наследует значение родителя.
Пример:
<head>
<style type='text/css'>
#wrap1{
width:200px;
height:150px;
padding:10px;
border:1px #000 solid;
}
#wrap2{
width:200px;
height:150px;
padding:10px;
border:1px #000 solid;
word-wrap:break-word;
}
</style>
</head>
<body>
<p id="wrap1">Данный текст вполне обычен, но он имеет <b>оченьоченьоченьоченьоченьдлинноеслово</b>, которое выходит за пределы его содержимого.</p>
<p id="wrap2">С помощью нового CSS3 свойства word-wrap:break-word мы можем разделить <b>оченьоченьоченьоченьоченьдлинноеслово</b> и перенести его на новую строку.</p>
</body>
</html>
font-face
В старой версии CSS можно было использовать только стандартные типы шрифтов, с приходом CSS 3 стало возможным подключить к сайту свой собственный авторский шрифт.
Важно помнить что браузер IE читает только форматы шрифтов написанные в формате EOT, все остальные браузеры могут прочитать форматы TTF и OTF.
Правильное подключение своего шрифта к сайту:
font-family:opensans; /* Задаем имя шрифта */
src:url('opensans.woff') /* Указываем местонахождение нашего шрифта */
}
Далее всё как обычно:
Пример использование авторского шрифта с различными эффектами:
<head>
<style type='text/css'>
@font-face {
font-family:"opensans"; /* Имя шрифта */
src:url('opensans.woff') /* Местонахождение шрифта */
}
/* Подключим курсивную версию шрифта */
@font-face {
font-family:"opensans";
font-style:italic;
src:url('opensans-italic.woff'),;
}
/* Подключим жирную версию шрифта */
@font-face {
font-family:"opensans";
font-style:bold;
src:url('opensans-bold.woff'),;
}
/* Применим подключенный шрифт к абзацам */
p {
font-family:"opensans";
font-size:1em;
}
</style>
</head>
<body>
<p>Для обычного текста будет использован шрифт opensans.</p>
<p><i>Для курсивного текста будет использован шрифт opensans-italic.</i></p>
<p><b>Для жирного текста будет использован шрифт opensans-bold.</b></p>
<p>А это обычный текст с <i>"вставками"</i> курсивного и <b>жирного</b> текста.</p>
</body>
</html>
- Что такое CSS 3 и что в нём изменилось
- Фон и цвет в CSS 3
- Границы и рамки в CSS 3
- Текст и шрифт в CSS 3
- Создание прозрачных элементов и картинок
- Трансформирование в CSS 3
- Линейные градиенты в CSS 3
- Переходы в CSS 3
- Анимация в CSS 3
- Разбивание текста на столбцы
- Заключение