Свойства текста.

Тень текста.

CSS 3 позволяет без труда имитировать тень падающую от того или иного текста. Для того что бы текст начал отбрасывать тень к нему необходимо применить свойство text-shadow с группой нужных нам значений определяющих параметры этой самой тени.

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

Первое значение - определяет сдвиг тени относительно текста по горизонтали, указывается в пикселях или любых других единицах измерения CSS, может иметь как положительное, так и отрицательное значение, является обязательным параметром.
Второе значение - на сей раз определяет смещение тени относительно текста уже по вертикали тоже может быть как положительным, так и отрицательным и так же является обязательным параметром.
Третье значение - делает тень тенью, а не просто сдвинутой копией текста - оно определяет радиус сглаживания тени, делая её более чёткой или же наоборот размытой. Чем большее значение имеет данный параметр, тем больше расфокусируется отбрасываемая от текста тень. Данный параметр не является обязательным и его можно не указывать в этом случае размытость тени по умолчанию примет 0.
Четвёртое значение - задаёт цвет тени, тоже необязательный параметр и в случае если он не указан тень будет того же цвета что и сам тест.

Так же свойство text-shadow может принимать одно единственное значение none которое, как Вы уже наверное догадались, отменяет добавление тени.

Пример:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст с тенью</title>
<style>
.shadow {
text-shadow: 10px 5px 2px;
}
</style>
</head>
<body>
<p class="shadow">Текст с простой тенью</p>
</body>
</html>

смотреть пример

В этом примере мы указали три значения где: 10px - сдвиг по оси X, 5px - сдвиг по оси Y, 2px - радиус размытия тени.. как видите всё достаточно просто.

В следующем примере мы добавим четвертое значение определяющее цвет тени.

Напомню, что цвет может быть указан следующими способами:

#ff0000 - шестнадцатеричное значение цвета RGB.
red - именное значение цвета.
RGB(255,0,0) - значение цвета RGB.
HSL - значение цвета HSL. ^{*примечание}

Пример в котором текст отбрасывает зелёную тень:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст с цветной тенью</title>
<style>
.shadow {
text-shadow: 10px 5px 2px green;
font-size: 22px;
}
</style>
</head>
<body>
<p class="shadow">Текст с цветной тенью</p>
</body>
</html>

смотреть пример

Ещё одной интересной особенностью свойства text-shadow является тот факт, что текст с этим свойством может одновременно отбрасывать не одну а сразу несколько теней с разными параметрами!

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

Пример:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Несколько теней</title>
<style>
.shadow {
text-shadow: 10px 12px 3px green, 10px -8px 3px blue, -8px 4px 3px red;
font-size: 22px;
font-weight: bolder;
}
</style>
</head>
<body>
<p class="shadow">Этот текст одновременно имеет три тени.</p>
</body>
</html>

смотреть пример

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

Так же хотелось бы добавить что свойство text-shadow вполне нормально уживается с псевдоэлементами :first-letter и :first-line

Ну вот один из примеров использования на всякий случай:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тень и псевдоэлементы</title>
<style>
p:first-letter {
text-shadow: 0px 0px 5px green;
}
</style>
</head>
<body>
<p>Первая буква этого параграфа имеет тень.</p>
<p>И этого тоже..</p>
<p>И этого..</p>
</body>
</html>

смотреть пример

Браузер Internet Explorer воспринемает свойство text-shadow начиная только с 10.0 версии, однако, для создания эффекта тени текста может использовать один из своих собственных фильтров - свойство: filter: Shadow() или filter: DropShadow():

Тень:

filter: Shadow(Color=#ff0000, Direction=45, Strength=3);

Где:

color - цвет тени.
direction - направление тени в градусах.
strength - величина смещения тени в пикселях.

Резкая тень:

filter: DropShadow(OffX=5, OffY=5, Color=#ff0000);

Где:

offX - смещение тени по горизонтали.
offY – смещение тени по вертикали.
color – цвет тени.

P.S. Для того, чтобы применение фильтра дало результат, для блока надо задать либо позиционирование, либо ширину.

Так что специально для старых IE можно дополнительно указывать подобную строчку.

Перенос длинных слов.

Свойство word-wrap позволяет переносить длинные слова и прочие группы символов, неразделённые пробелами на следующую строку, если такое слово не помещается в блок с фиксировано заданной шириной.

Свойство word-wrap имеет следующие значения:

normal - перенос строки не происходит там, где нет пробелов или переносов строк.
break-word - перенос строки происходит в тех местах, где это становится необходимо.
inherit - наследует значение от блока родителя.

Пример:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Перенос слова на следующую строку</title>
<style type="text/css">
.blok {
border: green 6px ridge;
width: 220px;
padding: 10px;
font-size: 20px;
word-wrap: break-word;
}
.blok1 {
border: green 6px ridge;
width: 220px;
padding: 10px;
font-size: 20px;
word-wrap: normal;
}
</style>
</head>
<body>
<div class="blok">
<p>Мы производим ультравысокотемпературнообработанное витаминизированное молоко.</p>
</div>
<br>
<div class="blok1">
<p>Мы производим ультравысокотемпературнообработанное витаминизированное молоко.</p>
</div>
</body>
</html>

смотреть пример

Видимость текста.

На сей раз мы поговорим о том, что делать с длинным текстом в блоке, которому присвоено свойство overflow.

Свойство text-overflow позволяет указать браузеру, что делать с длинным текстом, если области, в которой он находится, присвоено свойство overflow и установлено одно из его значений: auto, scroll или hidden.

А делать собственно это свойство может следующее:

clip - обрезает текст по размеру области.
ellipsis - обрезает текст по размеру области и добавляет к концу строки многоточие.

- вот собственно и всё что может это свойство..

Пример:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Добавляем многоточие</title>
<style type="text/css">
.ellipsis {
text-overflow: ellipsis;
overflow: auto;
white-space: nowrap;
width: 400px;
border: solid 2px #dddddd;
}
</style>
</head>
<body>
<div class="ellipsis">На дощатой террасе, близ конопляника, небезызвестная вдова Агриппина Саввечна, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками и другими яствами, под аккомпанемент виолончели.</div>
</body>
</html>

смотреть пример

Есть ещё два свойства из категории "текст" о которых упоминается в разрабатываемой спецификации CSS3.. это свойство tab-size которое позволяет установить ширину отступа табуляции и свойство text-align-last которое позволяет выравнивать последнюю строку текста, у которого свойство text-align установлено как justify. Однако говорить мы о них сейчас не будем по той простой причине что подавляющее большинство современных браузеров пока что, увы, игнорируют данные свойства..

Полезные советы:

Как сказано выше один и тот же текст может иметь одновременно несколько теней, однако не стоит их указывать уж слишком много (более 8-10) для одного и того же куска текста, так как это может сказаться на производительности браузера.
Имейте в виду, что в разных браузерах тень текста может слегка отличатся друг от друга, это происходит, потому что различные браузеры используют свои алгоритмы при создании тени.
Браузер Internet Explorer имеет своё собственное свойство filter: - которое позволяет создавать целый ряд различных эффектов, так что в последующих главах мы ещё не раз вернёмся к нему и будем использовать как альтернативу некоторым свойствам CSS 3 для данного браузера, однако имейте ввиду что свойство filter: во-первых, поддерживает только лишь браузер Internet Explorer, а во-вторых, оно не входит ни в одну в спецификацию CSS и соответственно не валидно.