Text shadow css примеры: text-shadow | htmlbook.ru

Разное 

Содержание

Свойства CSS: text-shadow

В CSS имеется свойство text-shadow для добавления тени на каждую букву текста. Само свойство было представлено еще в CSS2, но не поддерживалось браузерами. Затем ситуация стала меняться к лучшему.

Свойство text-shadow хорошо тем, что позволяет создавать интересные эффекты с текстом без необходимости пользоваться изображениями. А значит текст доступен поисковикам и т.д.

Самый простой пример использования данного стиля выглядит следующим образом.


h3.shadow
{
    text-shadow: 2px 2px 1px red;
}

Пример заголовка с тенью

В этом примере мы добавляем к заголовку второго уровня красную тень, которая отбрасывается немного вправо и вниз относительно самого текста. В примере использовались параметры для отступов и цвета тени. Существует также возможность сделать тень размытой. Для этого добавляется еще один необязательный параметр после отступов (обратите внимание, что цвет тени должен указываться либо последним, либо первым). Можно использовать отрицательные значения, чтобы изменить направление тени (влево и вверх). Кстати, браузеры на движке WebKit поддерживают цвет в формате rgba, что позволяет использовать полупрозрачность.


h3.blurshadow
{
    text-shadow: 0.1em 0.1em 0.2em red;
}

Заголовок с размытой тенью

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


lightback {background-color: #F0F8FF}
.whitetext {color: white}
.whitetext-shadow {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Белый текст без тени на светлом фоне

Белый текст с тенью

Как видите, первую строчку практически невозможно разглядеть, а текст с тенью на второй строчке хорошо читается.

Многослойные тени

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

Создадим на сером фоне два варинта объемного текста.


.ThreeD
{
    background: #CCC;
}

.a
{
    color: #D1D1D1;
    text-shadow: -1px -1px white, 1px 1px #333;
    font-size: 24pt;
}

.b
{
    color: #D1D1D1;
    text-shadow: 1px 1px white, -1px -1px #333;
    font-size: 24pt;
}

Выпуклый текст
Вдавленный текст

Впрочем, нужно быть осторожным в использовании этих эффектов, так как не все браузеры поддерживают несколько теней.

Контуры

Используя несколько теней, можно добиться и другого эффекта — создание контуров для букв.


p.contur
{
    background: #CCF;
    padding: 1em;
}

.conturtext
{
    font-size: 24pt;
    color: #BBE;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

Текст с контуром

Неоновое свечение

Если создать тень без смещения и размыть ее, то получим эффект неонового свечения.


.neon
{
    text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F
}

Неоновое свечение

Использование сценариев JavaScript

Также вы можете использовать свойство text-shadow в сценариях JavaScript. Ниже приводятся два примера, взятых с сайта http://maettig.com

Старт/стоп.

Анимация тени

Горящий текст

Дополнительная информация

Интересный пример, демонстрирующий свойство text-shadow при помощи сценария.

Stylish text with the CSS text-shadow property (несколько примеров, в т.ч. пример огненного текста).

CSS Text-Shadow in Safari, Opera, Firefox and more — несколько интересных примеров.

Text-Shadow Exposed: Make cool and clever text effects with css text-shadow — еще несколько примеров

Несколько примеров на русском

Реклама

CSS свойство text-shadow

Свойство text-shadow дает возможность добавлять тени к тексту. Можете выбрать цвет отсюда: HTML Цвета.

Каждая тень может иметь две или три значения и <color>. Первое значение устанавливает горизонтальное смещение (x-offset), второе значение устанавливает вертикальное смещение (y-offset), а третье — радиус размытия и цвет тени.

Значения x-offset и y-offset обязательны, а третье значение является дополнительным.

Значение по умолчаниюnone
Применяется Ко всем элементам, а также к ::first-letter и ::first-line.
НаследуетсяДа
АнимируемоеДа
ВерсияCSS3
DOM синтаксис object.style.textShadow = «1px 3px 3px #8ebf42»;

Синтаксис¶

text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit;

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .shadow{   	
      text-shadow: 2px 2px #1c87c9;  
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства text-shadow</h3>
    <p>Какой-нибудь параграф.</p>
    <p>Какой-нибудь параграф со свойством text-shadow.</p>
  </body>
</html>
Попробуйте сами!

Рассмотрим пример, где указаны значения x-offset, y-offset, blur-radius и color:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      text-shadow: 5px 3px 2px #8ebf42;
      font: 1em Roboto, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства text-shadow</h3>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.  Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>
  </body>
</html>
Попробуйте сами!

Значения¶

ЗначениеОписание
h-shadowГоризонтальное смещение тени. При положительном значении тень располагается с правой стороны текста, а при отрицательном значении с левой стороны.
v-shadowВертикальное смещение тени (ось y). При положительном значении тень располагается снизу от текста, а при отрицательном — сверху.
blur-radiusОпределяет степень и размер размытия тени. Отрицательные значения недопустимы. Значение по умолчанию — 0.
colorДает возможность выбрать цвет тени. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla().
noneТень не устанавливается. Значение по умолчанию.
initialУстанавливает свойство в значение по умолчанию.
inheritЗначение элемента наследуется от родительского элемента.

Поддержка браузера

4.0+ 12.0+ 3.5+ 4.0+ 10.0+

Детальный обзор CSS свойства box-shadow

От автора: CSS свойство box-shadow позволяет сделать так, чтобы у блочных элементов появилась внешняя или внутренняя тень. Давайте познакомимся поближе с этим CSS свойством.

 

Далее представлены три разных примера применения CSS свойства box-shadow к элементу div.

Пример 1: Простая внешняя тень

Вот так вы можете задать для элемента div легкую серую внешнюю тень:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

box-shadow: 0 0 10px gray;

box-shadow: 0 0 10px gray;

Пример 2: Внутренняя тень

Внутренняя тень может быть задана с использованием значения inset.

box-shadow: inset 0 0 10px;

box-shadow: inset 0 0 10px;

Пример 3: Смешение внешней тени

В этом примере тень отбрасывается с наклоном от нижней правой части блока благодаря использованию горизонтального и вертикального смещения на 5px.

box-shadow: 5px 5px 10px;

box-shadow: 5px 5px 10px;

А что если вы хотите, чтобы тень отбрасывалась от верхней левой части блока? Это можно осуществить, используя отрицательные значения для горизонтального и вертикального смещения. В следующем примере горизонтальное и вертикальное смещение равно -5px.

box-shadow: -5px -5px 10px;

box-shadow: -5px -5px 10px;

Теперь, когда вы увидели несколько «живых» примеров использования CSS свойства box-shadow, давайте пойдем дальше.

Синтаксис

Общий синтаксис для свойства box-shadow выглядит так:

box-shadow: [inset] [horizontal offset] [vertical offset] [blur radius] [spread distance] [color];

box-shadow: [inset] [horizontal offset] [vertical offset] [blur radius] [spread distance] [color];

Значения CSS свойства box-shadow

CSS свойство box-shadow может иметь шесть возможных значений:

inset – отображение тени внутри элемента

horizontal offset – горизонтальное смещение

vertical offset – вертикальное смещение

blur radius – радиус размытия

spread distance – растяжение (толщина тени)

color – цвет

И только два значения являются обязательными: горизонтальное и вертикальное смещение.

Для четырех значений (горизонтальное смещение, вертикальное смещение, радиус размытия и растяжение) должны использоваться CSS единицы измерения (например, px, em, % и т. д.).

Цвет должен быть представлен в виде допустимого в CSS значения для определения цвета, например, шестнадцатеричного значения (#000000).

Описание значений свойства box-shadow

Inset

Если ключевое слово inset указано, тень будет отображаться внутри HTML элемента.

box-shadow: inset 0 0 5px 5px olive;

box-shadow: inset 0 0 5px 5px olive;

Для сравнения приведем тот же пример без указания inset:

box-shadow: 0 0 5px 5px olive;

box-shadow: 0 0 5px 5px olive;

Горизонтальное смещение

Значение горизонтального смещения отвечает за позицию тени по оси X. Положительное значение будет смещать тень вправо, а отрицательное – влево.

В следующем примере горизонтальное смещение равно 20px, т.е. в два раза больше, чем вертикальное смещение, которое равно 10px, поэтому по горизонтали тень будет в два раза шире.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вертикальное смещение

Значение вертикального смещения отвечает за позицию тени по оси Y. Положительное значение будет смещать тень вниз, а отрицательное – вверх.

В следующем примере вертикальное смещение равно -20px, т.е. в два раза больше, чем горизонтальное смещение, которое равно 10px, поэтому размер тени в два раза больше по вертикали. Также, поскольку указано отрицательное значение, то и тень смещается от верхней части блока.

Радиус размытия

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

Радиус размытия является необязательным значением. Если вы не укажите его, то по умолчанию он будет равен 0. А также он не может быть отрицательным значением, в отличии от горизонтального и вертикального смещения.

Если радиус размытия равен 0, то границы и цвет тени будут четкими. По мере того как вы будете увеличивать значение, тень будет становится более размытой.

В следующем примере радиус размытия равен 20px, поэтому эффект достаточно хорошо виден.

box-shadow: 5px 5px 20px;

box-shadow: 5px 5px 20px;

Растяжение (ширина)

Значение растяжения (ширины) увеличивает или уменьшает тень во всех направлениях. Если оно является положительным, тень будет увеличиваться со всех сторон. Если оно будет отрицательным, то наоборот тень будет уменьшаться.

Обратите внимание на то, что при положительном значении растяжения (10px), со всех сторон элемента появляется тень в 10px, при том, что горизонтальное и вертикальное смещение равно 0:

box-shadow: 0 0 10px 5px;

box-shadow: 0 0 10px 5px;

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

box-shadow: 0 10px 10px -5px;

box-shadow: 0 10px 10px -5px;

Цвет

Как вы уже могли догадаться по названию, значение цвета устанавливает цвет тени. Для него может использоваться любой допустимый в CSS формат представления цвета. Цвет является необязательным значением.

По умолчанию — другими словами, если вы явно не указали значение цвета для вашей тени — цвет у тени будет таким же, как и цвет HTML элемента, к которому применяется свойство box-shadow. Например, если у вас есть элемент div, для которого задано значение цвета red, то значение цвета у тени тоже будет red:

color: red; box-shadow: 0 0 10px 5px;

color: red;

box-shadow: 0 0 10px 5px;

Если вы хотите, чтобы у тени был другой цвет, тогда вам нужно будет указать его при объявлении свойства box-shadow. В следующем примере видно, что несмотря на то, что значение цвета для элемента div по-прежнему равно red, цвет тени теперь равен blue.

color: red; box-shadow: 0 0 10px 5px blue;

color: red;

box-shadow: 0 0 10px 5px blue;

Несколько теней

Вот тот случай, когда вы можете проявить свою креативность в использовании данного CSS свойства, т.е. вы можете создать больше одной тени для одного элемента. Синтаксис будет следующим:

box-shadow: [box shadow properties 1], [box shadow properties 2], [box shadow properties n];

box-shadow: [box shadow properties 1], [box shadow properties 2], [box shadow properties n];

Другими словами, вы можете назначать несколько теней, отделяя группу значений для каждой тени запятыми (,). В следующем примере созданы две тени: красная – в верхней левой части блока, а синяя – в нижней правой.

box-shadow: -5px -5px 30px 5px red, 5px 5px 30px 5px blue;

box-shadow: -5px -5px 30px 5px red,

             5px 5px 30px 5px blue;

Браузерная поддержка

CSS свойство box-shadow имеет хорошую браузерную поддержку. Считая браузер Internet Explorer наименьшим общим знаменателем, данное свойство поддерживается этим браузером с 9 версии (выпущенной в 2011 году).

Вы можете посмотреть демо-примеры использования свойства box-shadow, которые были приведены в данной статье, нажав по следующей ссылке.

Автор: Jacob Gube

Источник: //sixrevisions.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

CSS3.

Работа с тенями. Часть 2

Продолжаем погружаться в искусство владения тенями в новых модулях CSS3. Прошлый раз мы рассматривали работу с box-shadow, сегодня мы перейдем к text-shadow.

Напомню, что оба правила, хотя и описаны в разных модулях, работают практически идентичным образом, поэтому, если вы уже знакомы с box-shadow по первой части, в этой, второй, части вы увидите много знакомого. И, прежде, чем переходить непосредственно к примерам, давайте сразу разберемся, какие есть различия, чтобы не останавливаться на них далее.

text-shadow vs box-shadow

Если вы вернетесь к разделу про синтаксис box-shadow в первой части, вы найдете такое описание:

box-shadow: <shadow> [ , <shadow> ]*;
<shadow> = inset? && [ <length>{2,4} && <color>? ]

Где последнее разворачивается в полном виде в такую конструкцию:

box-shadow: inset? h-offset v-offset blur-radius spread-distance color;

Спецификация CSS3 Text, описывая text-shadow, говорит буквально следующее:

<shadow> is the same as defined for the ‘box-shadow’ property except that the
‘inset’ keyword is not allowed

В переводе на русский это означает, что для текста невозможны внутренние тени (inset) и синтаксис для text-shadow выглядит следующим образом:

text-shadow: <shadow> [ , <shadow> ]*;
<shadow> = [ <length>{2,4} && <color>? ]

Аналогично box-shadow возможны множественные тени накладываемые поверх друг друга так, что первая тень оказывается наверху. Теперь давайте смотреть, как это все работает.

text-shadow

Сдвиги и цвет

Начнем со сдвигов и работы с цветом. За сдвиги тени отвечают первые два линейных параметра, указывающих длинну (1.1–1.4):

Если вы указываете положительные значения, тень сдвигается влево и вниз (1.1):

text-shadow:10px 10px; width:300px;

Отрицательные значения сдвигают вправо и вверх (1. 2):

text-shadow:-5px -5px; width:300px; color:blue;

Аналогично box-shadow, все браузеры, кроме основанных на webkit, если цвет тени явно не задан, берут его из цвета текста (1.1–1.2). Это может быть полезным, например, если вы хотите автоматически делать тень цвета текста, но, например, размытой (см. примеры 2.3 и 2.4). Для явного задания цвета тени достаточно прописать нужное значение в правиле:

text-shadow:-1px -1px white; color:blue; background:#333; /* 1.3 */

text-shadow:1px 1px rgba(255,255,255, 0.5); color:blue; background:#eee; /* 1.4 */

Обратите внимание, что при указании цвета полностью применимы возможности CSS3 Color, включая указание уровня прозрачности цвета (alpha) через rgba или hsla.

Размытие

Третий линейный параметр описывает радиус размытия тени (2.1–2.4):

В полном согласии с определением box-shadow, размытие задается некоторым положительным числом — радиусом размытия. Само размытие может осуществляться UA по любому алгоритму с большой точностью аналогичному размытию по Гауссу с половинным радиусом относительно границы тени.

В первых двух примерах (2.1 и 2.2) задан разный радиус размытия:

text-shadow:5px 5px 3px darkred; color:red; /* 2.1 */

text-shadow:4px -4px 10px red; color:azure;  background:#333; /* 2.2 */  

Во второй паре примеров (2.3 и 2.4) различается только цвет текста и фона, а сами правила задания тени описаны через применяемый к блокам класс blured-shadow:

.blured-shadow {
 text-shadow:0px 0px 4px ; /* не зависит от цвета текста */
}

color:red; /* 2.3 */

color:lightgray; background:#333; /* 2.4 */  

(Этот пример некорректно работает в Chrome из-за описанных выше нюансов, впрочем спецификация говорит, что пропущенный цвет остается на усмотрение UA.)

Растяжение и сжатие

Четвертый линейный параметр, если он присутствует, отвечает за растяжение или сжатие тени.

Для увеличения тени spray-distance должен быть положительным (3. 1):

text-shadow:5px 5px 0px 3px lightgreen; color:green;

Для уменьшения — отрицательным (3.2):

text-shadow:8px 8px 2px -3px darkgreen; color:green; font-weight:900;  

Если отступ тени нулевой, ее можно использовать для обводки текста (3.3):

text-shadow:0 0 0 3px rgba(128, 255, 0, 0.75); color:green;  background:#333;

Важная деталь. Насколько мне известно, в настоящий момент (сюрприз!) параметр spray-distance для text-shadow поддерживается только в Internet Explorer 10, а остальные браузеры его не поддерживают (см. например, bug 655590 «[css3-text] Support the spread radius in text-shadow» в Mozilla Bug tracker). Это же верно и в отношении большинства учебников и статей в интернете, которые своевременно не были обновлены вслед за изменениями в спецификации. Поэтому в большинстве примеров, которые вы найдете в сети, вы даже не увидите упоминания возможности растяжения или сжатия тени текста 😉

И еще одна важная деталь. Наличие четвертого параметра сегодня трактуется неподдерживающими его браузерами как неправильное задание тени — в результате эти правила просто игнорируются. Поэтому для обеспечения хоть какого-то уровня совместимости, если вы используете spread-distance, необходимо дублировать правила, например, так:


text-shadow: 0px 0px 10px lightgreen; /* 3.4 */
text-shadow: 0px 0px 10px 10px lightgreen; /* 3.5 */

Если вы все же хотите смоделировать увеличение тени, в определенных пределах это можно сделать через множественные тени, рассматриваемые в следующем разделе (см. примеры 4.6 и 4.7).

Множественные тени


Наконец, аналогично теням для блоков, к тексту также можно применять несколько теней одновременно, добиваясь при этом различных эффектов (4.1–4.5):

Начиная с простейшей дублированной обводки (4.1):

text-shadow: 0 0 0 3px white, 0 0 0 4px gray; color:magenta;

И возможности смещения теней в разные стороны (4. 2):

text-shadow: 3px 3px 4px 2px rgba(255,255,255,0.35),
 6px -6px 4px 2px rgba(255,255,255,0.25),
 -3px -3px 4px 6px rgba(255,0,255,0.15);

Продолжая эффектами типа неона (4.3):

text-shadow: 0 0 0 3px white,
 0 0 2px 6px magenta,
 0 0 1px 9px white,
 0 0 6px 12px magenta;

И немного более изощренным вариантом (4.4)

text-shadow: 0 0 2px #fff,
 0 0 4px 2px rgba(255,255,255,0.5),
 0 0 6px 6px #f0f,
 0 0 4px 7px #fff,
 0 0 3px 15px #222,
 -4px 0 2px 9px #f0f,
 4px 0 2px 9px #f0f,
 0 -4px 2px 9px #f0f,
 0 4px 2px 9px #f0f;

Или же с ограниченным использованием предыдущего приема перекрытия смещенных теней — небольшое подчеркивание (4.5):

text-shadow: 0 -3px 3px 15px white, 0 1px 2px 9px;
color:magenta;

Эмуляция растяжения

Как было сказано в предыдущем разделе, технически множественные тени можно применять для эмулирования увеличения тени. Например, чтобы сделать что-то похожее на (4.6):

text-shadow: 0px 0px 0px 4px magenta;

Можно было бы применить одновременно несколько теней, сдвинутых в разных направлениях (4.7):

text-shadow: magenta 0px 2px,
 magenta 2px 0px,
 magenta -2px 0px,
 magenta 0px-2px,
 magenta -1.4px -1.4px,
 magenta 1.4px 1.4px,
 magenta 1.4px -1.4px,
 magenta -1.4px 1.4px;

Однако, если приглядеться, между ними заметна разница. Также важно понимать, что такой прием ограничен в применимости: он не только менее точен, но и отрицательно сказывается на производительности отрисовки страницы.

Интересные примеры


Теперь давайте рассмотрим еще несколько примеров использования теней для реализации различных интересных эффектов.

Начнем с классической радуги (5.1):

text-shadow: 0 0 2px 3px yellow,
 0 0 2px 6px orange,
 0 0 2px 9px red,
 0 0 2px 12px lime,
 0 0 2px 15px blue,
 0 0 2px 18px violet;

Двойная тень для стрелки (5. 2):

text-shadow: 0 0 2px 2px white,
 2px 0 2px 5px #222,
 3px 0 3px 6px #933,
 5px 0 2px 14px #222,
 6px 0 5px 16px #533;

Традиционная огненная тень (5.3):


text-shadow: 0 0 2px #eee,
 0 0 4px 2px #fff,
 0 -2px 4px 2px #ff3,
 2px -4px 6px 4px #fd3,
 -2px -6px 11px 6px #f80,
 2px -8px 18px 8px #f20;

Традиционный «letter-press», — здесь также важен контраст с фоном (5.4):


text-shadow: 0px 2px 3px #555;

Не менее традиционный 3d-text (5.5):


text-shadow: 0 0 1px #999,
 1px 1px 1px #888,
 2px 2px 1px #777,
 3px 3px 1px #666,
 4px 4px 1px #555,
 5px 5px 1px #444;

Двойная тень для винтажного эффекта (5.6)


text-shadow: 2px 2px #fff,
 3px 3px #666;

Проступающая надпись с прозрачным текстом и сжатой тенью, — также зависит от размера и гарнитуры шрифта (5.7)


text-shadow: 0 0 2px -3px rgba(196,255,0,0.3),
 0 0 6px -5px #9c6;
color:transparent;

Применение отдельной буквы для псевдо-класса ::first-letter (5.8)


.text {
 text-shadow:0 0 5px;
}
 
.text::first-letter {
 color:azure;
 text-shadow:0 0 5px, 0 0px 6px 3px blue, 0 -2px 6px 6px cyan, 0 -4px 9px 9px lightblue ;
}

Интерактив

Если вы хотите просто поиграться с тенями в интерактивном режиме, наши коллеги к прошедшей в сентябре конференции Build подготовили демонстрационную страницу: «Hands-on: text-shadow».

Internet Exlorer


text-shadow поддерживается в IE10+.

И повторю свой совет относительно использования фильтров: не используйте фильтры вообще, либо продумывайте верстку и стили так, чтобы для IE9+ они не применялись. Стандартные css-эффекты в IE в отличие от старых фильтров, начиная с 9й версии, работают с использованием аппаратного ускорения, к тому же фильтры часто оказываются несочетаемыми с новыми правилами свойствами CSS и их одновременное использование может приводить к неожиданным последствиям.

Смотрите также руководство для разработчиков по Internet Explorer 10.

Источник


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Используем text-shadow осмысленно

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

§Структура тени в CSS

text-shadow: 2px 5px 10px #fff;

  • 2px — смещение по оси X;
  • 5px — смещение по оси Y;
  • 10px — размытие;
  • #fff — цвет тени;

Все просто, однако, мы наблюдаем много случаев, когда тени применяются без понимания, казалось бы, очевидных вещей. Как то: источник света, цвет и размытие. Давайте на них остановимся подробнее.

§Смещение

Наиболее распространен прием, когда тень создается со смещением по осям, небольшим размытием или вовсе без него.

При создании смещения стоит сразу определиться, куда у вас будут «падать» тени на странице. Странно наблюдать, когда кнопки с расстоянием между собой в 200 пикселей имеют совершенно разные направления смещения теней. На одной посетитель «смотрит» сверху и слева, а на рядом стоящей — снизу.

Во flat эта ситуация намного критичней, так как природа long shadow — это мощный источник света, расположенный под малым углом к тексту(тени на закате солнца). Не стоит допускать такой несуразицы.

§Размытие

Большие значения этого параметра создают эффект левитирующего текста. 

Да, в каких-то случаях это может быть уместно в силу общей стилистики страницы. Но если такого текста много, то визуально это будет выглядеть грязно. Иногда размытие используют для придания объема тексту, однако это можно сделать реалистичней, используя множественные тени.

Пример

Так же размытие уместно использовать в long shadow, когда элемент не имеет никаких ограничителей, но тень необходимо ограничить. В этом случае поможет плавный переход в fade.

Пример

§Цвет

Цвет тени играет очень важную роль. Некоторые не особо утруждая себя заботой об эстетике, вешают «глухие» цвета, например #000 или #fff, для придания тексту эффектов объема или вдавленности соответственно. 

Однако, как и в случае со смещением, стоит думать о том, какой силы должен быть источник света, чтобы давать такую плотную тень или создавать настолько яркий блик. Для подобных эффектов в этом случае подходит задание цвета в формате rgba, т.е. включая альфа-канал. Такой цвет: rgba(255,255,255,.4-6) даст мягкий блик и создаст эффект вдавленности. Происходит это засчет наложения полупрозрачного белого на цвет фона элемента. Плюсом такого подхода является то, что тень всегда будет выполнять свое предназначение, даже при смене фона элемента и цвета текста, а одинаковые значения для всех элементов на странице воссоздадут эффект единого источника света с одинаковой интенсивностью.

Для создания эффекта вдавленности текст должен быть темней основного фона, а тень светлее его.

Пример

§Применение теней для больших объемов текста

Это самый неудачный пример использования теней. Не делайте так.

Пример

Такой прием используют либо при полном непонимании проблемы восприятия больших объемов текста, либо для имитации сглаживания шрифтов на странице. Друзья, пусть лучше шрифт останется таким как есть, но текст будет чистым и хорошо воспринимаемым.

Для сглаживания можно использовать text-stroke.

На этом рассказ заканчиваем и подведем краткое резюме.

При создании тени:

1. Думайте над расположением и интенсивностью мнимого источника света;

2. Не забывайте про альфа-канал для цвета тени;

3. Не применяйте чрезмерное размытие тени, если это не обусловлено его явным предназначением;

4. Не используйте тени для больших объемов текста;

§Для справки

Свойство text-shadow

Семь примеров с тенями

Реалистичный text-shadow inset

← Предыдущая статьяСледующая статья →

Создаем клевые текстовые эффекты теней с помощью text-shadow CSS3

Свойство text-shadow появилось в CSS3, благодаря Photoshop, для того, чтобы добавить тексту глубину, размер и подчеркнутость.

И это еще не все, на что способно свойство text-shadow. С помощью него можно добавить креативности и красок, поиграть со смещением и размытием.

Вот, что получилось сделать.

Введение

Шесть текстовых эффектов: vintage/retro, neon, inset, anaglyphic, fire и board game.

Просто скопируйте готовые сниппеты в таблицу стилей и на вашем сайте и вы получите те же самые эффекты, что и в примерах. Еще раз напоминаем, что данные стили будут работать только в браузерах, поддерживающих CSS3: Safari, Chrome, Firefox.

Пример

Как работает text-shadow

Свойство CSS text-shadow используется для добавления тени любому тексто-зависимому HTML элементу. В синтаксис свойства входят: сдвиг по X (X-offset), сдвиг по Y (Y-offset), размытость (blur) и цвет тени (color).

Еще стоит отметить, что вы можете назначать элементу не одну тень, а несколько, за счет чего мы и создадим пару клевых эффектов!

Текстовый эффект винтаж/ретро (Vintage / Retro)

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

Как это работает:

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

Пример

Текстовый эффект неона (Neon)

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

Как это работает:

Эффект неона выполнен с помощью 8 теней. Устанавливаем цвет текстового элемента белым, далее назначаем каждую тень, оставляя сдвижки не тронутыми, но увеличиваем размытость теней и меняем их цвет с белого на пурпурный (за счет размытости, пурпурный стремится к цвету фона, поэтому фон может быть любого цвета). Такая смесь между белым и пурпурным создает эффект неонового свечения.

Пример

Текстовый эффект вставки

text-shadow: 0px 2px 3px #666;

Как это работает:

Эффекты вставки или печати очень часто используются, когда хотят добавить тексту тени. Тень сдвигается по оси Y, чтобы получить эффект оттиска. На темном фоне тень должна быть светлой, а на светлом, наоборот темной.

Пример

Анаглифический текстовый эффект

text-shadow: 8px 8px 0 rgba(255,0,180,0.5);

Как это работает:

Анаглифический текстовый эффект воссоздает клевый эффект, используемый в старых 3D картинках. Он получен с помощью CSS, при этом использовалось и тень и RGBa. Использование RGBa на тексте и тени позволило добавить 50% прозрачность, из-за чего основной текст стал виден через тень.

Пример

Огненный текстовый эффект

text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

Как это работает:

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

Пример

Текстовый эффект настольной игры

text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;

Как это работает:

Эффект настольной игры воссоздан очень просто. Использована группа теней с фиксированным шагом смещения в одно направление с чередующимися цветами. Все тени без размытия, чтобы точно скопировать оригинальный текст.

Пример


Возможно, Вам будет интересно ↓↓↓

Свойство box-shadow | Учебник HTML5

Свойство box-shadow.

Итак, у нас есть симпатичные углы, и мы готовы попробовать нечто большее. Еще один великолепный эффект, которого было чрезвычайно трудно добиться, — это тени. Годами дизайнерам приходилось комбинировать изображения, элементы и некоторые свойства CSS для создания эффекта тени. Благодаря CSS3 и новому свойств box-shadow мы добавим тень к нашему полю, написав всего одну строку кода.

Листинг 3.6. Добавление к полю тени

Body {

Text-align: center;

}

#mainbox {

Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;

-moz-border-radius: 20px;

-webkit-border-radius: 20px; border-radius: 20px;

-moz-box-shadow: rgb(150,150,150) 5px 5px;

-webkit-box-shadow: rgb(150,150,150) 5px 5px; box-shadow: rgb(150,150,150) 5px 5px;

}

#title {

Font: bold 36px verdana, sans-serif;

}

Свойству box-shadow необходимо передать минимум три значения. Первое, которое вы видите в листинге 3.6, — это цвет. Для формирования данного значения мы использовали функцию rgb(), передав ей необходимые аргументы в десятичной системе счисления, однако вы можете просто записать нужный цвет в шестнадцатеричном представлении (как мы делали раньше в этой книге для других параметров).

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

Для тестирования различных параметров и возможностей создания тени рядом с полем скопируйте код из листинга 3.5 в CSS-файл и откройте HTML-файл с шаблоном из листинга 3.1 в своем браузере. Теперь поэкспериментируйте со значениями свойства box-shadow. Тот же самый код вы сможете использовать для проверки новых параметров, которые мы изучим в дальнейшем.

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

Листинг 3.7. Добавление радиуса размытия к свойству box-shadow box-shadow: rgb(150,150,150) 5px 5px 10px;

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

Добавьте значение 20px в конце стиля из листинга 3.7, объедините этот код с кодом из листинга 3.6 и протестируйте в браузере.

Не забывайте, что эти свойства пока что находятся на этапе разработки. Если вы планируете использовать их, всегда добавляйте к ним префикс — moz — или — webkit — в зависимости от того, какой браузер используете (то есть Firefox или Google Chrome).

Последнее возможное значение свойства box-shadow — это не число, а ключевое слово inset. Оно превращает внешнюю тень во внутреннюю, создавая эффект вдавленного поля.

Листинг 3.8. Внутренняя тень box-shadow: rgb(150,150,150) 5px 5px 10px inset;

Стиль из листинга 3.8 определяет внутреннюю тень на расстоянии 5 пикселов от рамки поля, которая дополнительно размывается на 10 пикселов.

Стили из листингов 3.7 и 3.8 — это всего лишь примеры.

Для проверки эффекта в браузере вам понадобится внести соответствующие изменения в полный набор правил из листинга 3.6.

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

Вам также могут быть интересны следующие статьи:

16 CSS Text Shadow Effects

Коллекция отобранных вручную бесплатных HTML и CSS text shadow effect примеров кода.

  1. Текстовые эффекты CSS
  2. CSS эффекты свечения текста
  3. CSS 3D текстовые эффекты
  4. Анимация текста CSS
  5. Эффекты сбоя текста CSS
Автор
  • Филдинг Джонстон
О коде

Трехмерный мультяшный текст с тенью текста CSS

Играем с CSS text-shadow и шрифтом Google «Luckiest Guy».

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Лиам Иган
О коде

Миксин 3D текста SCSS

Это простой миксин SCSS, который создает трехмерный блочный текст с текстовыми тенями .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Эрин Э. Салливан
О коде

Анимированная тень текста

Забавная CSS-анимация, которая создает отскок, имитируя разделение RGB во время процесса.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Мартин Пикод
Сделано с
  • HTML / CSS (SCSS) / JavaScript
О коде

Тень текста с учетом направления

Ориентация text-shadow , использование переменных CSS для создания перспективы и трехмерного светового эффекта на тексте.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Даниэль Гонсалес
О коде

Groovy CSS-эффект

Эффект шрифта 1960-х годов с использованием свойства CSS text-shadow вместе с функцией SASS и миксинами для сохранения кода DRY.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Нурай Йемон
О коде

Анимация текста в стиле Netflix с помощью CSS

Текстовая анимация в стиле Netflix с CSS и функцией SCSS, чтобы иметь длинную тень текста .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Необычная тень текста

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

CSS тень текста

Современный эффект тени для текста с помощью CSS text-shadow .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Алекс Мур
О коде

Pretty Shadow

Красивая тень текста.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Дарио Корси
О коде

Variable Longshadow с градиентами Mixin

Этого не должно быть. Но теперь вы можете определять длинные тени с разными цветами и размахами с помощью одного микшина Sass.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Эрик Юнг
О коде

Неоновые эффекты

Neon текстовая тень эффекты.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Нгуен Хоанг Нам
О коде

Потрясающая тень текста

Эффект плоской и простой тени для текста.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Маюр Эльбхар
О коде

Текст-тень

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Микс с градиентом длинных теней

Примесь Sass (SCSS) для быстрой генерации длинных теневых градиентов.Подходит для text-shadow и box-shadow .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Хорхе Эпуньян
О коде

CSS3 Эффекты тени текста

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Лукас Беббер
О коде

CSS пунктирная тень

Чистая хипстерская типографская пунктирная тень на CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

CSS Text Shadow: Пошаговое руководство

Добавление теней к элементу является одним из компонентов создания привлекательного заголовка. Например, если вы разрабатываете веб-сайт, вы можете добавить тень к каждому верхнему заголовку, чтобы он выделялся среди другого текста заголовка на веб-странице.

Вот тут и пригодится свойство CSS text-shadow.Свойство text-shadow позволяет добавить эффект тени к текстовому элементу. В этом руководстве с примерами обсуждаются основы теней текста и то, как использовать свойство text-shadow для добавления тени к тексту на веб-странице.

CSS Text Shadow

Тени — это один из способов отличить элемент на веб-странице. Например, строка текста с зеленой тенью с большей вероятностью привлечет внимание пользователя, чем стандартная строка черного текста.

Свойство text-shadow позволяет добавить тень вокруг текстового элемента в CSS.Вы можете применить элемент text-shadow к заголовкам, тексту абзаца и другим текстовым элементам в HTML.

Найдите свой учебный лагерь