Эффекты текста HTML и CSS | Свет и Тень

Рейтинг:  4 / 5

Подробности

Категория: вебдизайнер

Автор: Администрация веб-студии

Текст (text) с тенью (shadow) ранее можно было встретить практически на всех сайтах, такое свойство было очень модным в свое время. Возьмем например графический редактор, в каждом редакторе используется данный эффект и выглядит он просто и стильно. Поэтому свойство text-shadow добавляли на сайты, вне зависимости от того было ли это проявлением необходимости и подходило ли к стилю самого сайта. Некоторое время спустя большинство браузеров начали поддерживать свойство текста и тени (text-shadow), но интерес к данному эффекту угас. И в наши дни встречается крайне редко. При том, что текст с тенью имеет много других способов применения и интересных свойств: свечение текста, контурные рамки, размытие текста, тиснение текста, трехмерный текст и др.

Нижеприведенные эффекты текста настраиваются в файлах .CSS или под тегами "style" в HTML страницах.

Использование text-shadow

Свойство используется в любом формате CSS и имеет 4 параметра: смещение по горизонтали и смещение по вертикали, радиус размытия и цвет тени. Полупрозрачную тень можно сделать применив формат rgba. Радиус размытия определяет резкость тени, т.е. чем больше радиус, тем мягче выглядит тень. Смещение тени вправо и вниз имеет положительное значение, обратно влево и вверх имеет отрицательное значение, при этом при необходимости добавить тень вокруг всего текста значение смещения должно равняться 0.

Главным достоинством свойства текста с тенью (text-shadow) является возможность применения нескольких теней, просто добавив дополнительные параметры через запятую. Такая особенность позволит разнообразить эффекты тени.

Как упоминалось выше эффект текста с тенью используется большинством браузеров, исключение составляют IE (internet explorer) до 10 версии.

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

Особенность контурного текста заключается в линии обводящей каждую букву. Цвет линии выбирается отдельно и предназначен для выделения текста эффектным контуром. Применяется в основном только для больших размеров шрифта в заголовках, т.к. основному тексту контур будет только мешать при чтении.

Контурный текст создается 2 способами:
1. Смещение тени равно 0, а радиус размытия 1-2 px (px — pix element — пиксель или пиксел);
2. Если увеличить уровень размытия текста контур превратиться в эффект свечения.

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>

• < Назад