Эффекты текста HTML и CSS | Свет и Тень
Рейтинг: 4 / 5
- Подробности
- Категория: вебдизайнер
- Автор: SEO & WEB — KELL4
Текст (text) с тенью (shadow) ранее можно было встретить практически на всех сайтах, такое свойство было очень модным в свое время. Возьмем например графический редактор, в каждом редакторе используется данный эффект и выглядит он просто и стильно. Поэтому свойство text-shadow добавляли на сайты, вне зависимости от того было ли это проявлением необходимости и подходило ли к стилю самого сайта. Некоторое время спустя большинство браузеров начали поддерживать свойство текста и тени (text-shadow), но интерес к данному эффекту угас. И в наши дни встречается крайне редко. При том, что текст с тенью имеет много других способов применения и интересных свойств: свечение текста, контурные рамки, размытие текста, тиснение текста, трехмерный текст и др.
Нижеприведенные эффекты текста настраиваются в файлах .CSS или под тегами "style" в HTML страницах.
Использование text-shadow
Свойство используется в любом формате CSS и имеет 4 параметра: смещение по горизонтали и смещение по вертикали, радиус размытия и цвет тени. Полупрозрачную тень можно сделать применив формат rgba. Радиус размытия определяет резкость тени, т.е. чем больше радиус, тем мягче выглядит тень. Смещение тени вправо и вниз имеет положительное значение, обратно влево и вверх имеет отрицательное значение, при этом при необходимости добавить тень вокруг всего текста значение смещения должно равняться 0.
Главным достоинством свойства текста с тенью (text-shadow) является возможность применения нескольких теней, просто добавив дополнительные параметры через запятую. Такая особенность позволит разнообразить эффекты тени.
Как упоминалось выше эффект текста с тенью используется большинством браузеров, исключение составляют IE (internet explorer) до 10 версии.
Контурный текст
Особенность контурного текста заключается в линии обводящей каждую букву. Цвет линии выбирается отдельно и предназначен для выделения текста эффектным контуром. Применяется в основном только для больших размеров шрифта в заголовках, т.к. основному тексту контур будет только мешать при чтении.
- Контурный текст создается 2 способами:
- Смещение тени равно 0, а радиус размытия 1-2 px (px — pix element — пиксель или пиксел);
- Если увеличить уровень размытия текста контур превратиться в эффект свечения.
HTML5 CSS3 IE9 IE10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст</title>
<style>
.stroka {
font: 2em Arial, sans-serif;
text-shadow: red 0 0 2px;
}
</style>
</head>
<body>
<p class="stroka">Создание и продвижение сайтов в ИНТЕРНЕТЕ</p>
</body>
</html>ОБРАТИТЕ ВНИМАНИЕ! В ПОСЛЕДУЮЩИХ ПРИМЕРАХ СТРУКТУРА HTML СТРАНИЦЫ НЕ БУДЕТ ПОКАЗАНА, ТОЛЬКО НЕОБХОДИМЫЕ КОМАНДЫ.
Контур вокруг текста будет несколько размытым, если необходима четкая линия можно воспользоваться другим способом. Используя 4 резких тени одинакового цвета и смещение разных углов. Тем самым получая выразительный и четкий контур.
<style>
.stroka {
font: 2em Arial, sans-serif;
text-shadow: red 1px 1px 0, red -1px -1px 0,
red -1px 1px 0, red 1px -1px 0;
}
</style>Трехмерный текст
Эффект 3D текста. В трехмерности текста используется смещение нескольких теней по горизонтали и вертикали. Что также в основном применимо в заголовках веб-страниц.
Эффект трехмерности зависит от количества теней, чем их больше тем сильнее трехмерность. Установив размытие на 0 и используя тени одного цвета, настраиваем смещение до необходимого вида.
<style>
.stroka {
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>Рельеф текста
Эффект рельефа текста или тиснения создается при совпадении цвета фона и текста. Оставляя одну часть текста с одним цветом тени выбираем другой цвет для второй части, тем самым регулируем освещенность букв. Этот эффект использует две тени и выглядит лучше на сером фоне.
<style>
body {
background: #f0f0f0; /* Цвет фона веб-страницы */
}
.stroka {
font: bold 3em Arial, sans-serif;
color: #f0f0f0; /* Цвет текста, совпадает с цветом фона */
text-shadow: #fff -1px -1px 0,
#333 1px 1px 0;
}
</style>Свечение текста
Для эффекта свечения тоже используется тень, единственное отличие заключается в ярких и контрастных тонах. Изменив цвет тени и устанавливая радиус размытия получаем эффект свечения, но при этом необходимо учитывать, параметр смещения необходимо приравнять к 0 для равномерного распределения вокруг текста.
<style>
.light {
text-shadow: #5dc8e5 0 0 10px; /* Свечение голубого цвета */
color: #0083bd;
}
.dark {
text-shadow: red 0 0 10px; /* Свечение красного цвета */
}
</style>
</head>
<body>
<h2 class="light">Светлая сторона</h2>
<h2 class="dark">Тёмная сторона</h2>
</body>Размытие текста
Эффект размытия текста очень прост, ведь тень имеет данное свойство, поэтому необходимо скрыть сам текст. Используя команду для цвета transparent делаем текст прозрачным и на месте букв остается только тень, а регулируя радиус размытия выбираем степень резкости текста.
<style>
.stroka {
text-shadow: #000 0 0 5px;
color: transparent; /* Прозрачный цвет текста */
}
</style>Тень и псевдоклассы
Используя псевдоклассы :hover и :first-letter можно получить великолепные эффекты: свечение при наведении курсора или контурная первая буква абзаца. А свойство текста с тенью (text-shadow) отлично с ними работает.
<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>
