Новый год
/ Ваше разрешение экрана: px / Ваш Ip адрес: {ip}

Shop Scripts

Текст и тень

3-06-2018, 21:18

В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство 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>

 

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


Нашли ошибку?
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Рекомендуем Вам зарегистрироваться или войти на сайт под своим логином, чтобы полноправно пользоваться сайтом и иметь доступ ко всем материалам.
Категория: Текстовые эффекты

Важно: если не отображается страница новости или ее часть просьба отключить блокировщик рекламы. Проблема может возникать из-за того что скрипт сайта реагирует на программы подобного типа.
Также Вы можете сообщить о проблеме или ошибке и ознакомиться с ответами пользователей.

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

Имя:*
E-Mail:
Комментарий:
Введите два слова, показанных на изображении: *
Это интересно
Заработок в Интернет
Поиск и оплата штрафов ГИБДД/Налогов/Исполнительных производств
Новости Портала

Украшения сайта к Новому году

Простые скрипты, которые украсят Ваш сайт в Новогодние и Рождественские праздники.

ADEN VIDEO. Мега набор видеоуроков. Художественная обработка (2017-2019) WEBRip

Большой сборник видеоуроков Алексея Денисова. В котором Вы найдете авторские видеоуроки по обработке фотографии и не только. В уроках использованы программы Photoshop, Lightroom, Camera Raw, After ...

Вооружённые силы стран мира (подшивка №01-250)

Еженедельная коллекция журналов "Вооруженные силы стран мира" расскажет о военных соединениях разных стран мира, познакомит читателя с видами войск и военной техники, историей военных кампаний 20-21 ...
Реклама Партнеров
Поддержите проект
Статистика

 
Скрипт социальных кнопок