Тень текста.
CSS 3 позволяет без труда имитировать тень падающую от того или иного текста. Для того что бы текст начал отбрасывать тень к нему необходимо применить свойство text-shadow с группой нужных нам значений определяющих параметры этой самой тени.
Значений в группе может быть всего четыре, причём два из них обязательны где:
- Первое значение - определяет сдвиг тени относительно текста по горизонтали, указывается в пикселях или любых других единицах измерения CSS, может иметь как положительное, так и отрицательное значение, является обязательным параметром.
- Второе значение - на сей раз определяет смещение тени относительно текста уже по вертикали тоже может быть как положительным, так и отрицательным и так же является обязательным параметром.
- Третье значение - делает тень тенью, а не просто сдвинутой копией текста - оно определяет радиус сглаживания тени, делая её более чёткой или же наоборот размытой. Чем большее значение имеет данный параметр, тем больше расфокусируется отбрасываемая от текста тень. Данный параметр не является обязательным и его можно не указывать в этом случае размытость тени по умолчанию примет 0.
- Четвёртое значение - задаёт цвет тени, тоже необязательный параметр и в случае если он не указан тень будет того же цвета что и сам тест.
Так же свойство text-shadow может принимать одно единственное значение none -отменяет добавление тени.
Пример кода CSS:
.shadow {text-shadow: 10px 5px 2px;}
.shadow1 { text-shadow: 10px 5px 2px #609; }
.shadow2 { text-shadow: 10px 12px 3px green, 10px -8px 3px blue, -8px 4px 3px red; font-size: 22px; font-weight: bolder; }
p:first-letter {text-shadow: 0px 0px 5px green;}
Пример кода HTML:
<head>
<title>My CSS</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="shadow">Текст с простой тенью</div><br>
<div class="shadow1">Текст с фиолетовой тенью</div><br>
<div class="shadow2">Текст с тройной тенью</div><br>
<p>Первая буква с тенью</p>
</body>
</html>
В примере с обычной тенью мы указали три значения где: 10px - сдвиг по оси X, 5px - сдвиг по оси Y, 2px - радиус размытия тени.
В следующем примере мы добавим четвертое значение определяющее цвет тени.
Напомню, что цвет может быть указан следующими способами:
#ff0000 - шестнадцатеричное значение цвета RGB.
red - именное значение цвета.
RGB(255,0,0) - значение цвета RGB.
HSL - значение цвета HSL.
Ещё одной интересной особенностью свойства text-shadow является тот факт, что текст с этим свойством может одновременно отбрасывать не одну а сразу несколько теней с разными параметрами!
Для того чтобы указать несколько теней одновременно мы просто перечисляем группы параметров для каждой отдельно взятой тени через запятую.
Так же хотелось бы добавить что свойство text-shadow вполне нормально уживается с псевдоэлементами :first-letter и :first-line
Браузер 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 – цвет тени.
Перенос длинных слов.
Свойство word-wrap позволяет переносить длинные слова и прочие группы символов, неразделённые пробелами на следующую строку, если такое слово не помещается в блок с фиксировано заданной шириной.
Свойство word-wrap имеет следующие значения:
normal - перенос строки не происходит там, где нет пробелов или переносов строк.
break-word - перенос строки происходит в тех местах, где это становится необходимо.
inherit - наследует значение от блока родителя.
Пример кода CSS:
.blok { border: ridge 6px blue; width: 160px; font-size: 20px; padding-right: 10px; padding-left: 10px; word-wrap: break-word; }
.blok1 { border: ridge 6px #e0023a; width: 160px; font-size: 20px; padding-right: 10px; padding-left: 10px; word-wrap: normal; }
Пример кода HTML:
<head>
<title>My CSS</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="blok">
<p>Общеупотребительными</p>
</div>
<br>
<div class="blok1">
<p>Общеупотребительными</p>
</div>
</body>
</html>
Видимость текста.
Свойство text-overflow позволяет указать браузеру, что делать с длинным текстом, если области, в которой он находится, присвоено свойство overflow и установлено одно из его значений: auto, scroll или hidden.
Свойства:
clip - обрезает текст по размеру области.
ellipsis - обрезает текст по размеру области и добавляет к концу строки многоточие.
Пример кода CSS:
.ellipsis {text-overflow: ellipsis; overflow: auto; white-space: nowrap; width: 400px; border: solid 2px #dddddd;}
Пример кода HTML:
<head>
<title>My CSS</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="ellipsis"> Свойство text-overflow позволяет указать браузеру, что делать с длинным текстом, если области, в которой он находится, присвоено свойство overflow и установлено одно из его значений: auto, scroll или hidden.
</div>
</body>
</html>
Задания:
Создайте текст с разными типами теней
Создайте блок в котором длинные слова автоматически переноситься наследующею строку
Создайте полосу прокрутки для длинного текста: вертикальную и горизонтальную
