Программы
Музыка
Игры
Заработок и Раскрутка
GPS навигация
» » Текст и тень
Информация к новости
  • Просмотров: 1 562
  • Автор: hazardcd
  • Дата: 23-04-2014, 12:26
  • Не нравится
  • +4
  • Нравится
23-04-2014, 12:26

Текст и тень

Категория: Вебмастер / Скрипты, Коды / Текст

В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow, мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое
В качестве значений text-shadow пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени:
text-shadow
 
 
 
 
 
 
 
 
 
 
 
 
Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.
Большим плюсом text-shadow является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.
К сожалению, IE до версии 10.0 не поддерживает text-shadow, так что в этом браузере мы никаких красивостей не увидим.
 

Контурный текст

 
Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста. Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.
Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.
Пример 1. Контурный текст

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст</title>
<style>
.stroke {
font: 2em Arial, sans-serif;
text-shadow: red 0 0 2px;
}
</style>
</head>
<body>
<p class="stroke">Контурный текст</p>
</body>
</html>

Контурный текст

Контур получается слегка размытым, поэтому для тех, кто хочет получить чёткую линию, предназначен второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (пример 2).
Пример 2. Четыре тени для контура

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст</title>
<style>
.stroke
{
font: 2em Arial, sans-serif;
text-shadow: red 1px 1px 0,
red -1px -1px 0,
red -1px 1px 0,
red 1px -1px 0;
}
</style>
</head>
<body>
<p class="stroke">Контурный текст</p>
</body>
</html>

Контурный текст

Заметно, что контур получается более выразительным.
 

Трёхмерный текст

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст</title>
<style>
.stroke {
font: bold 3em Arial, sans-serif;
color: #0d3967;
text-shadow: #cad5e2 1px 1px 0,
#cad5e2 2px 2px 0,
#cad5e2 3px 3px 0,
#cad5e2 4px 4px 0,
#cad5e2 5px 5px 0;
}
</style>
</head>
<body>
<h1 class="stroke">Трёхмерный текст</h1>
</body>
</html>

Трёхмерный текст

Для всех теней ставим нулевой радиус размытия и одинаковый цвет. Различаются тени только значениями смещения.
 

Тиснение текста

 
Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв словно освещена, другая же часть находится в тени. Для добавления подобного эффекта нам понадобится две тени — белую тень мы смещаем влево вверх на один пиксел, а тёмно-серую вправо вниз.
Рельефный текст

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст</title>
<style>
body {
background: #f0f0f0; /* Цвет фона веб-страницы */
}
.stroke {
font: bold 3em Arial, sans-serif;
color: #f0f0f0; /* Цвет текста, совпадает с цветом фона */
text-shadow: #fff -1px -1px 0,
#333 1px 1px 0;
}
</style>
</head>
<body>
<h1 class="stroke">Рельефный текст</h1>
</body>
</html>

Рельефный текст

Рельеф выигрышнее всего смотрится именно на сером фоне, поэтому эффект подойдёт не для каждой цветовой схемы сайта. Кстати, легко получить вдавленный, а не выдавленный текст, достаточно поменять местами цвета тени.

text-shadow: #333 -1px -1px 0,
#fff 1px 1px 0;

 

Свечение

 
Свечение вокруг текста — это та же самая тень, только она яркая и контрастная. Таким образом, для создания эффекта свечения достаточно изменить цвет тени и поставить желаемый радиус размытия. Поскольку свечение вокруг текста должно быть равномерным, то смещение тени надо задать нулевым. На примере показан пример свечения разных цветов.
Свечение

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст</title>
<style>
.light {
text-shadow: #5dc8e5 0 0 10px; /* Свечение голубого цвета */
color: #0083bd;
}
.dark {
text-shadow: red 0 0 10px; /* Свечение красного цвета */
}
</style>
</head>
<body>
<h1 class="light">Светлая сторона</h1>
<h1 class="dark">Тёмная сторона</h1>
</body>
</html>

Размытие

 
Тень сама по себе размывается, так что если оставить только тень, а сам текст скрыть, то мы получим размытые буквы, причём степень размытия легко регулировать через параметр text-shadow. Для сокрытия оригинального текста достаточно задать цвет как transparent. Цвет тени после этого выступает цветом текста, а радиус размытия устанавливает степень нерезкости букв.
Размытие текста

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст</title>
<style>
.blur {
text-shadow: #000 0 0 5px;
color: transparent; /* Прозрачный цвет текста */
}
</style>
</head>
<body>
<h1 class="blur">Нерезкий текст</h1>
</body>
</html>

Текст с размытием

 

Тень и псевдоклассы

 
Тень не обязательно добавлять непосредственно к тексту, свойство text-shadow прекрасно сочетается с псевдоклассами :hover и :first-letter. За счёт этого получаются интересные эффекты с текстом вроде контурной первой буквы абзаца или свечения ссылки при наведении на неё курсора мыши. В примере показаны такие приёмы.
Использование псевдоклассов

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст</title>
<style>
a:hover { /* Вид ссылки при наведении на неё курсора */
text-shadow: #5dc8e5 0 0 5px;
color: #000;
}
p:first-letter { /* Первая буква абзаца */
font-size: 2em;
text-shadow: red 1px 1px 0, red -1px -1px 0,
red -1px 1px 0, red 1px -1px 0;
}
</style>
</head>
<body>
<p>Нишевый проект тормозит <a href="#">традиционный канал</a>, не считаясь с затратами.</p>
</body>
</html>

 

Влад Мержевич

Метки к статье: Текст тень

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
HTML-cсылка:
BB-cсылка:
Прямая ссылка:

Добавление комментария

Имя:*
E-Mail:
Комментарий:
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Подтвердите что вы не робот: *