Css тень текста

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

Как сделать тень для текста

• Содержание:
• 1. Синтаксис свойства text-shadow
• 2. Примеры тени для текста
• 3. Эффекты для тени при наведении
• 4. Анимация тени

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

IE: 10.0
Edge: 12.0
Firefox: 3.5
Chrome: 4.0
Safari: 4.0
Opera: 10.1
iOS Safari: 3.2
Android Browser: 2.1
Chrome for Android: 55.0

1. Синтаксис свойства text-shadow

Каждая тень применяется как к самому тексту, так и к элементам его оформления (свойство text-decoration). Одновременно можно задавать несколько теней, указывая их через запятую. Тени накладываются друг на друга, но не перекрывают сам текст. Первая тень всегда расположена сверху над остальными тенями. Свойство наследуется.

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

Первая длина задаёт смещение по оси Х, вторая — смещение по оси Y. Если значения длин отрицательные, то тень смещается влево и вверх от текста.

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

text-shadow
Значения:
x-offset	Обязательное значение. Смещение тени по горизонтали относительно текста. Может принимать как положительные, так и отрицательные значения.
y-offset	Обязательное значение. Смещение тени по вертикали относительно текста. Может принимать как положительные, так и отрицательные значения.
blur	Необязательное значение. Определяет радиус размытия тени. Чем больше радиус, тем сильнее размыта тень.
цвет	Необязательное значение. По умолчанию принимает цвет текста. Для установления значения можно использовать следующие форматы записи цвета: #RRGGBB, rgb(red, green, blue), rgba(red, green, blue, alpha).
none	Значение по умолчанию, означает отсутствие тени текста. Убирает тень элемента из группы элементов с заданным свойством.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

2. Примеры тени для текста

2.1. Плакатная тень

Тень текста

.text-shadow-1 {   background: #77F7DE;   color: white;   text-shadow: -2px -2px 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px 2px 0 #4D4644, 4px 4px 0 white, 5px 5px 0 white, 6px 6px 0 white;   letter-spacing: 0.1em;  }

2.2. 3D тень

Тень текста

.text-shadow-2 {   background: linear-gradient(-45deg, #FEE864, #F5965E);   color: #f4f4f4;   text-shadow: -1px -1px white, 1px 1px gray, 2px 2px #7a7a7a, 3px 3px #757575, 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757, 10px 10px #525252, 11px 11px #4d4d4d, 18px 18px 30px rgba(0, 0, 0, .4), 18px 18px 10px rgba(0, 0, 0, .4);  }

2.3. Тень-текст

Тень текста

.text-shadow-3 {   background: #FFE6DB;   color: #FFE6DB;   letter-spacing: .1em;   text-shadow: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142, .4), 9px 0 rgba(250, 111, 142, .3), 12px 0 rgba(250, 111, 142, .2), 15px 0 rgba(250, 111, 142, .1);  }

2.4. Ретро-тень

Тень текста

.text-shadow-4 {   color: #FB631E;   letter-spacing: .1em;   text-shadow: 4px 4px white, 6px 6px #D7CC88;  }

2.5. Многослойная тень

Тень текста

.text-shadow-5 {   background: #f1f1f1;   color: #fcc105;   letter-spacing: .1em;   text-shadow: 4px 4px #ff981d, 7px 7px rgba(200, 120, 22, .2);  }

2.6. Прозрачная тень

Тень текста

.text-shadow-6 {   color: transparent;   text-shadow: 4px -4px rgba(157, 217, 227, .7), -2px -2px rgba(159, 141, 105, .7), 0 2px rgba(254, 216, 21, .7);  }

2.7. Тень-зебра

Тень текста

.text-shadow-7 {   background: #E02A91;   color: white;   text-shadow: 2px 2px black, 4px 4px white, 6px 6px black, 8px 8px white, 10px 10px black, 12px 12px white, 14px 14px black, 16px 16px white, 18px 18px black, 20px 20px white, 22px 22px black, 24px 24px white, 26px 26px black;  }

2.8. Неоновая тень

Тень текста

.text-shadow-8 {   background: black;   color: white;   text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px crimson, 0 0 35px crimson, 0 0 40px crimson, 0 0 50px crimson, 0 0 75px crimson;  }

2.9. Тень-обводка

Тень текста

.text-shadow-9 {   color: white;   text-shadow: 1px 1px #732372, 1px -1px #732372, -1px 1px #732372, -1px -1px #732372, 3px 3px 6px rgba(0,0,0,.5);  }

2.10. Стиль LETTERPRESS

Тень текста

.text-shadow-10 {   background: #F9C941;   color: #F9C941;    letter-spacing: 2px;   text-shadow: 1px 1px #F3E7CF, -1px -1px #56433D;  }

2.11. Стиль ТВИТТЕР

Тень текста

.text-shadow-11 {   color: #3CF;    text-shadow: -1px 0 1px white, 0 -1px 1px white, 0 1px 1px white, 1px 0 1px white, 0 0 8px white, 0 0 8px white, 0 0 8px white, 2px 2px 3px black;  }

2.12. Тень с обводкой

Тень текста

.text-shadow-12 {   color:#E34C38;   text-shadow: 1px 1px white, 2px 2px white, -1px -1px white, -2px -2px white, -1px 1px white, 1px -1px white, -2px 2px white, 2px -2px white, -3px -3px 4px rgba(0,0,0,.3), -3px 3px 4px rgba(0,0,0,.3), 3px 3px 4px rgba(0,0,0,.3), 3px -3px 4px rgba(0,0,0,.3);   }

3. Эффекты для тени при наведении

See the Pen ENjrvy by Elena (@html5book) on CodePen.

See the Pen yVYOdY by Elena (@html5book) on CodePen.

html5book.ru

CSS тень текста на примере заголовка

Код примера:

<head> <title>CSS текст с тенью на примере заголовка</title> </head> <body> <h1 style="text-shadow:#6699ff 1px 1px 1px">CSS тень текста на примере заголовка</h1> </body>

Рассмотрим строчку кода text-shadow:#ff9933 1px 1px 1px. Значение #ff9933 определяет цвет тени, участок кода 1px 1px 1px определяет соответственно: смещение тени вправо, смещение тени вниз и размытие тени.

Сместим тень текста по горизонтали и по вертикали на отрицательную величину:

Как сделать текст с тенью при помощи CSS?

Код примера:

<head> <title>CSS тень текста на примере заголовка</title> </head> <body> <h1 style="text-shadow:#cccccc -15px -20px 2px">Как сделать текст с тенью при помощи CSS? </h1> </body>

Теперь вы знаете, как сделать эффект «Текст с тенью» при помощи CSS. Еще: Тень блока в CSS.

ab-w.net

Arcade Love

В первом примере мы попробуем сделать выпуклые буквы на специальной подложке. И начнем с того, что у нас просто будет надпись нужного нам цвета:

color: hsl(80, 70%, 55%);

Далее начинается последовательная работа по формированию выпуклости букв, за счет последовательного наложения теней со сдвигом в 1px по диагонали (обратите внимание на то, как задается цвет тени относительно цвета текста!):

text-shadow: -1px -1px 0 hsl(80, 70%, 35%),  -2px -2px 1px hsl(80, 70%, 35%);  

  
 

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

text-shadow: 0 0 2px #fff,   -1px -1px 0 hsl(80, 70%, 35%),  -2px -2px 1px hsl(80, 70%, 35%),  -2px -2px 2px hsl(80, 10%, 15%);

Теперь, чтобы сделать подложку, необходимо расширить тень (4-й параметр — spray-distance):

text-shadow: ...  -3px -3px 0 7px hsl(60, 10%, 65%),  -4px -4px 0 7px hsl(60, 10%, 65%),  -5px -5px 0 7px hsl(60, 10%, 65%),  -6px -6px 0 7px hsl(60, 10%, 65%);

Наконец, чтобы надпись вместе с подложкой аккуратно приземлилась на фон, нужно добавить небольшое затенение внизу:

text-shadow: ...  -7px -7px 4px 8px hsl(60, 10%, 40%),  -8px -8px 6px 9px hsl(60, 10%, 55%);

Финальный результат

color: hsl(80, 70%, 55%); text-shadow: 0 0 2px #fff,   /* выпуклость надписи */  -1px -1px 0 hsl(80, 70%, 35%),  -2px -2px 1px hsl(80, 70%, 35%),  /* переход к подложке */   -2px -2px 2px hsl(80, 10%, 15%),   /* подложка */   -2px -2px 0 7px hsl(60, 80%, 95%),  -3px -3px 0 7px hsl(60, 10%, 65%),  -4px -4px 0 7px hsl(60, 10%, 65%),  -5px -5px 0 7px hsl(60, 10%, 65%),  -6px -6px 0 7px hsl(60, 10%, 65%),  /* тень подложки */   -7px -7px 4px 8px hsl(60, 10%, 40%),  -8px -8px 6px 9px hsl(60, 10%, 55%);  

  
 

Color Happiness

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

color: hsl(330, 100%, 50%);

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

text-shadow: 0 2px 0 0px hsl(330, 100%, 25%),  0 3px 2px 0px hsla(330, 100%, 15%, 0.5);

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

text-shadow: 0 2px 0 0px hsl(330, 100%, 25%),  0 3px 2px 0px hsla(330, 100%, 15%, 0.5),  0 3px 0 3px hsl(350, 100%, 50%),  0 5px 0 3px hsl(350, 100%, 25%),  0 6px 2px 3px hsla(350, 100%, 15%, 0.5);  

  
 

Осталось повторить этот же прием еще несколько раз, увеличивая размер подложки и смещая ее оттенок в нужную сторону:

text-shadow: ...  0 6px 0 9px hsl(20, 100%, 50%),  0 8px 0 9px hsl(20, 100%, 25%),  0 9px 2px 9px hsla(20, 100%, 15%, 0.5),  ...  0 15px 0 45px hsl(90, 100%, 50%),  0 17px 0 45px hsl(90, 100%, 25%),  0 17px 2px 45px hsla(90, 100%, 15%, 0.5);

Финальный результат

color: hsl(330, 100%, 50%); text-shadow: 0 2px 0 0px hsl(330, 100%, 25%),  0 3px 2px 0px hsla(330, 100%, 15%, 0.5),  /* next */  0 3px 0 3px hsl(350, 100%, 50%),  0 5px 0 3px hsl(350, 100%, 25%),  0 6px 2px 3px hsla(350, 100%, 15%, 0.5),  /* next */  0 6px 0 9px hsl(20, 100%, 50%),  0 8px 0 9px hsl(20, 100%, 25%),  0 9px 2px 9px hsla(20, 100%, 15%, 0.5),  /* next */  0 9px 0 18px hsl(50, 100%, 50%)  0 11px 0 18px hsl(50, 100%, 25%),  0 12px 2px 18px hsla(50, 100%, 15%, 0.5),  /* next */  0 12px 0 30px hsl(70, 100%, 50%),  0 14px 0 30px hsl(70, 100%, 25%),  0 15px 2px 30px hsla(70, 100%, 15%, 0.5),  /* next */  0 15px 0 45px hsl(90, 100%, 50%),  0 17px 0 45px hsl(90, 100%, 25%),  0 17px 2px 45px hsla(90, 100%, 15%, 0.5);  

 

Chocolate

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

color: hsl(20, 100%, 20%);

Первая вещь, с которой я начал, это классическая 3D-надпись:

text-shadow: -1px 1px 0 0 hsl(20, 100%, 16%),  -2px 2px 0 0 hsl(20, 100%, 16%),  -3px 3px 0 0 hsl(20, 100%, 16%),  -4px 4px 0 0 hsl(20, 100%, 16%),  -5px 5px 0 0 hsl(20, 100%, 16%),  -6px 6px 0 0 hsl(20, 100%, 16%);

Далее я решил постепенно затемнить тень, убирая яркость, и раздвинуть ее, увеличив сдвиг по диагонали (при этом как раз получается лесенка, о которой я писал выше):

text-shadow: -0px 0px 0 0 hsl(20, 100%, 16%),  -2px 2px 0 0 hsl(20, 100%, 14%),  -4px 4px 0 0 hsl(20, 100%, 12%),  -6px 6px 0 0 hsl(20, 100%, 10%),  -8px 8px 0 0 hsl(20, 100%, 8%),  -10px 10px 0 0 hsl(20, 100%, 6%);

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

text-shadow: -0px 0px 0 0 hsl(20, 100%, 16%),  -2px 2px 0 -1px hsl(20, 100%, 14%),  -4px 4px 0 -2px hsl(20, 100%, 12%),  -6px 6px 0 -3px hsl(20, 100%, 10%),  -8px 8px 0 -4px hsl(20, 100%, 8%),  -10px 10px 0 -5px hsl(20, 100%, 6%);

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

text-shadow: -0px 0px 1px 0 hsl(20, 100%, 16%),  -2px 2px 2px -1px hsl(20, 100%, 14%),  -4px 4px 2px -2px hsl(20, 100%, 12%),  -6px 6px 3px -3px hsl(20, 100%, 10%),  -8px 8px 2px -4px hsl(20, 100%, 8%),  -10px 10px 2px -5px hsl(20, 100%, 6%);

Слегка еще поигравшись над небольшими нюансами, я получил следующий результат…

Финальный результат

color: hsl(20, 100%, 20%); text-shadow: 0 0 1px hsl(20, 100%, 18%),  -1px 1px 0 hsl(20, 100%, 16%),   -2px 2px 2px -1px hsl(20, 100%, 14%),   -4px 4px 2px -2px hsl(20, 100%, 12%),  -6px 6px 3px -3px hsl(20, 100%, 10%),  -8px 8px 2px -4px hsl(20, 100%, 9%),  -10px 10px 3px -5px hsl(20, 100%, 8%),  -12px 12px 2px -6px hsl(20, 100%, 7%),  -14px 14px 2px -7px hsl(20, 100%, 6%),   -15px 15px 2px -8px hsl(20, 100%, 5%),   -15px 15px 0 -8px hsla(20, 50%, 10%, 0.25);

Cream Cake

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

color: hsl(35, 100%, 30%); background: hsl(35, 60%, 80%);

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

text-shadow: 0 0 2px 1px hsl(35, 70%, 30%),  0 0 4px 4px hsla(30, 100%, 55%, 0.5);

Далее мы добавляем светлую кремовую подложку (оттенок смещен к желтому, а цвет сделан с повышенной светлостью):

text-shadow: ...  -1px 1px 2px 7px hsl(45, 60%, 95%);

Теперь надо добавить подложке немного объема, для чего задаем тень со смещением, делаем ее того же цвета, что и сам текст, но немного менее насыщенным. Обратите внимание, что за счет того, что подложка к надписи расширена больше, чем тень к ней (7px против 4px), получается что последняя тень меньше подложки:

text-shadow: ...  -3px 3px 1px 4px hsl(35, 70%, 30%);

И последний штрих: аналогичное размытие подложки для более мягкого сочетания с фоном:

text-shadow: ...  -3px 3px 4px 8px hsla(30, 90%, 55%, 0.5);

Финальный результат

color: hsl(35, 100%, 30%); background: hsl(35, 60%, 80%); text-shadow: 0 0 2px 1px hsl(35, 70%, 30%),  /* переход к подложке */  0 0 4px 4px hsla(30, 100%, 55%, 0.5),  /* подложка */  -1px 1px 2px 7px hsl(45, 60%, 95%),  /* объем подложки */  -3px 3px 1px 4px hsl(35, 70%, 30%),  /* переход к фону */  -3px 3px 4px 8px hsla(30, 90%, 55%, 0.5); 

Plastic

Так… потом я начал играться с последним примером, думая, куда это все может привести. И, определенно, как и во многих других примерах, здесь были важны две составляющие: сам шрифт (в данном примере это CabinSketch) и эффекты с тенью, применяемые к нему. Давайте еще раз начнем с простого текста, чтобы отследить все трансформации:

color: hsl(65, 60%, 20%); background: hsl(65, 60%,95%);

Первым делом, давайте добавим небольшое размытие вокруг самой надписи (обратите внимание, что тут цвет тени заметно светлее исходной надписи, поэтому последняя с примененной тень выглядит несколько насыщеннее и светлее:

text-shadow: 0 0 3px 2px hsl(65, 60%,75%);

Далее можно добавить дополнительную обводку с небольшим размытием (обратите внимание на увеличение размера тени и пониженную светлость):

text-shadow: 0 0 3px 2px hsl(65, 60%,75%),  0 0 1px 9px hsl(65, 60%, 20%);

Получилось темновато — надо вставить между двумя тенями еще одну для осветления:

text-shadow: 0 0 3px 2px hsl(65, 60%,75%),  0 0 1px 5px hsl(65, 60%,95%),  0 0 1px 9px hsl(65, 60%, 20%);

Теперь начинается самое интересное — на самом деле мне нужна не целиком вся обводка, а только ее части. Чтобы скрыть лишнее, поверх нее можно нарисовать несколько теней цвета фона (обратите внимание, что эти тени меньше по размеру, чем обводка, зато сдвинуты в ту или иную сторону сильнее):

text-shadow: 0 0 3px 2px hsl(65, 60%,75%),  0 0 1px 5px hsl(65, 60%,95%),  6px 6px 4px 7px hsl(65, 60%,95%),  -4px -6px 4px 6px hsl(65, 60%,95%),  0 0 1px 9px hsl(65, 60%, 20%);

При необходимости можно добавить еще несколько дополнительных штрихов, чтобы сгладить переход от обводки к тени.

Финальный результат

color: hsl(65, 60%, 20%); background: hsl(65, 60%,95%); text-shadow: 0 0 3px 2px hsl(65, 60%,75%),  /* светлая подложка */  0 0 1px 5px hsl(65, 60%,95%),  /* небольшое размыте для подложки */  0 0 4px 4px hsla(65, 100%, 30%, 0.4),  /* вырезаем обводку */  6px 6px 4px 7px hsl(65, 60%,95%),  -4px -6px 4px 6px hsl(65, 60%,95%),  /* темная обводка */  0 0 1px 9px hsl(65, 60%, 20%);

Painting

Последующие два эксперимента касаются большей работы с прозрачностью. Начнем с такой задачи — как сделать что-либо с тенью внутри текста? На самом деле, напрямую никак, потому что для text-shadow, в отличие от box-shadow, нет параметра inset. Все тени, которые вы рисуете, выстраиваются в стек и отрисовываются одна поверх другой, причем сам текст всегда располагается сверху! Текст, как бы мешается… Поэтому надо начать с того, чтобы убрать текст. Правильно, надо сделать его прозрачным:

color: transparent; background: hsl(0, 75%,45%);

Теперь дорога расчищена! Сразу скажу, чтобы вы обратили на это внимание: рисовать мы будем белым цветом, поэтому единственное, что имеет значение, это выставленная на 100% светлость. Чтобы сделать штрих внутри текста, достаточно уменьшить размет тени:

text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75);

Добавим еще несколько штрихов, варьируя прозрачность, сдвиг и размер:

text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75),  -1px -1px 1px -4px hsla(0, 60%, 100%, 0.65),  1px 1px 1px -4px hsla(0, 60%, 100%, 0.65);

Для придания формы и усиления закраски можно добавить общую размытую (и частично прозрачную) тень:

text-shadow: ...  0 0 1px 2px hsla(0, 60%, 100%, 0.65);

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

Финальный результат

color: transparent; background: hsl(0, 75%,45%); text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75),  -1px -1px 1px -4px hsla(0, 60%, 100%, 0.65),  1px 1px 1px -4px hsla(0, 60%, 100%, 0.65),  /* общий фон */  0 0 1px 2px hsla(0, 60%, 100%, 0.65),  /* легкие внешние штрихи */  -3px -3px 1px 2px hsla(0, 60%, 100%, 0.25),  3px 3px 1px 2px hsla(0, 60%, 100%, 0.25);

Up & Down

Заключительный эффект продолжает эксплуатировать прозрачность текста 🙂 Здесь мы тоже начнем с полностью прозрачного текста (я его выделил, чтобы отличить от фона):

color: transparent;

Первым делом мы сделаем их текста обычный 3D-текст (можете дополнительно поиграться с прозрачностью). Обратите внимание на небольшой скачок в светлости в середине — это помогает сделать небольшую риску в середине текста (попробуйте увеличить светлость, чтобы это стало более заметным):

text-shadow: 1px -1px hsla(0, 0%, 30%, .6),  2px -2px hsla(0, 0%, 30%, .7),  3px -3px hsla(0, 0%, 32%, .8),  4px -4px hsla(0, 0%, 30%, .9),  5px -5px hsla(0, 0%, 30%, 1.0);

Теперь, чтобы придать большей формы, я добавлю тень сверху, в общем-то повторяющую форму исходного текста:

text-shadow: 0px 0px hsla(0, 0%, 50%, .5),  1px -1px hsla(0, 0%, 30%, .6),  ...

Наконец, аналогично нижней части, давайте добавим верхнюю 3D-тень, но более светлую и более прозрачную (для увеличения резкости самая верхняя тень сделана чуть менее прозрачной, чем остальные):

text-shadow: -4px 4px hsla(0, 0%, 70%, .4),  -3px 3px hsla(0, 0%, 60%, .2),  -2px 2px hsla(0, 0%, 70%, .2),  -1px 1px hsla(0, 0%, 70%, .2),  ...

Финальный результат

color: transparent; text-shadow: -4px 4px hsla(0, 0%, 70%, .4),  -3px 3px hsla(0, 0%, 60%, .2),  -2px 2px hsla(0, 0%, 70%, .2),  -1px 1px hsla(0, 0%, 70%, .2),  0px 0px hsla(0, 0%, 50%, .5),  1px -1px hsla(0, 0%, 30%, .6),  2px -2px hsla(0, 0%, 30%, .7),  3px -3px hsla(0, 0%, 32%, .8),  4px -4px hsla(0, 0%, 30%, .9),  5px -5px hsla(0, 0%, 30%, 1.0);

Вы также можете поиграться с оттенками и насыщенности, например, сделав низ красным, а верх синим, или как-нибудь еще…

Internet Explorer

Чтобы попробовать все это самостоятельно, не забудьте поставить себе «Platform Preview»-версию Internet Explorer 10. Да пребудет с вами тень!

habr.com

Свойство text-shadow — задает тень для текста.

Запись вида text-shadow:5px 5px 1px #777; означает

• — первое значение — смещение по горизонтали:
• положительное — смещение вправо
• отрицательное — смещение влево
• «0» — без смещения
• — второе значение — смещение по вертикали:
• положительное — смещение вниз
• отрицательное — смещение вверх
• «0» — без смещения
• — третье значение — величина (размер тени)
• — четвертое значение — цвет

Также, как и свойство box-shadow свойство text-shadow имеет 2 обязательных параметра.

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

Смотрите сами, перед Вами один и тот же текст, но у второго присутствует тень.

С помощью свойства text-shadow можно создавать красочные оформления текста, вот несколько примеров:

Винтажный текст

  text-shadow: 4px 4px 0px #ccc, 6px 6px 0px #707070;

Первая тень — цвет фона, вторая — цвет шрифта, в результате вот такой эффект:

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

  text-shadow: -1px -1px #666, 1px 1px #fff;

Выпуклый текст

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

Анаглитический текст

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

3D-текст

  text-shadow:1px -1px 0 #666, 2px -2px 0 #666, 3px -3px 0 #666, 4px -4px 0 #666;

Текст в огне

  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;

Очень красивый текст

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

  text-shadow: 0 1px 0 #ccc,   0 2px 0 #c9c9c9,   0 3px 0 #bbb,   0 4px 0 #b9b9b9,   0 5px 0 #aaa,   0 6px 1px rgba(0,0,0,.1),   0 0 5px rgba(0,0,0,.1),   0 1px 3px rgba(0,0,0,.3),   0 3px 5px rgba(0,0,0,.2),   0 5px 10px rgba(0,0,0,.25),   0 10px 10px rgba(0,0,0,.2),   0 20px 20px rgba(0,0,0,.15);

Длинные тени у текста

   text-shadow: rgb(141, 141, 141) 1px 1px,   rgb(141, 141, 141) 2px 2px,   rgb(141, 141, 141) 3px 3px,   rgb(141, 141, 141) 4px 4px,   rgb(141, 141, 141) 5px 5px,   rgb(141, 141, 141) 6px 6px,   rgb(141, 141, 141) 7px 7px,   rgb(141, 141, 141) 8px 8px,   rgb(141, 141, 141) 9px 9px,   rgb(141, 141, 141) 10px 10px,   rgb(141, 141, 141) 11px 11px,   rgb(142, 142, 142) 12px 12px,   rgb(143, 143, 143) 13px 13px,   rgb(144, 144, 144) 14px 14px,   rgb(146, 146, 146) 15px 15px,   rgb(147, 147, 147) 16px 16px,   rgb(148, 148, 148) 17px 17px,   rgb(150, 150, 150) 18px 18px,   rgb(151, 151, 151) 19px 19px,   rgb(152, 152, 152) 20px 20px,   rgb(153, 153, 153) 21px 21px,   rgb(155, 155, 155) 22px 22px,   rgb(156, 156, 156) 23px 23px,   rgb(157, 157, 157) 24px 24px,   rgb(159, 159, 159) 25px 25px,   rgb(160, 160, 160) 26px 26px,   rgb(161, 161, 161) 27px 27px,   rgb(162, 162, 162) 28px 28px,   rgb(164, 164, 164) 29px 29px,   rgb(165, 165, 165) 30px 30px,   rgb(166, 166, 166) 31px 31px,   rgb(168, 168, 168) 32px 32px,   rgb(169, 169, 169) 33px 33px,   rgb(170, 170, 170) 34px 34px,   rgb(171, 171, 171) 35px 35px,   rgb(173, 173, 173) 36px 36px,   rgb(174, 174, 174) 37px 37px,   rgb(175, 175, 175) 38px 38px,   rgb(177, 177, 177) 39px 39px,   rgb(178, 178, 178) 40px 40px,   rgb(179, 179, 179) 41px 41px,   rgb(180, 180, 180) 42px 42px,   rgb(182, 182, 182) 43px 43px,   rgb(183, 183, 183) 44px 44px,   rgb(184, 184, 184) 45px 45px,   rgb(186, 186, 186) 46px 46px,   rgb(187, 187, 187) 47px 47px,   rgb(188, 188, 188) 48px 48px,   rgb(189, 189, 189) 49px 49px,   rgb(191, 191, 191) 50px 50px,   rgb(192, 192, 192) 51px 51px,   rgb(193, 193, 193) 52px 52px,   rgb(195, 195, 195) 53px 53px,   rgb(196, 196, 196) 54px 54px,   rgb(197, 197, 197) 55px 55px,   rgb(198, 198, 198) 56px 56px,   rgb(200, 200, 200) 57px 57px,   rgb(201, 201, 201) 58px 58px,   rgb(202, 202, 202) 59px 59px,   rgb(204, 204, 204) 60px 60px;

А как этот вариант?

  text-shadow:   0 -1px 0 #858585,   0 1px 10px rgba(0,0,0,0.6),   0 6px 1px rgba(0,0,0,0.1),   0 0 5px rgba(0,0,0,0.2),   0 1px 3px rgba(0,0,0,0.3),   0 3px 5px rgba(0,0,0,0.2),   0 7px 10px rgba(0,0,0,0.25),   0 15px 10px rgba(0,0,0,0.2),   0 25px 15px rgba(0,0,0,0.15);

Внутренние тени для текста

Для создания внутренней тени используется inset, но для text-shadow это не работает.
Но решение существует. Для этого тексту устанавливаем темный фон и светлую тень, цвет текста делаем прозрачным и используем background-clip: text;

   background-color: rgb(71, 90, 96);   color: transparent;   text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.5);   -webkit-background-clip: text;   -moz-background-clip: text;   background-clip: text;

Вот так, с помощью свойства text-shadow можно преобразовать обычный текст в что то такое….!

Другие варианты (способы) оформления текста в CSS3 рассмотрены в статье Эффекты при оформлении текста

shabloncss.ru

Основы использования теней

Свойство text-shadow очень просто использовать. Оно поддерживается всеми современными браузерами и даже без использования префиксов. Но поддержка в IE (даже в IE9) отсутствует. Можно использовать инструменты, например, Modernizr, которые помогут вытянуть эффекты CSS3 даже в старых версиях IE.

Синтаксис

Для создания тени текста используется синтаксис свойства text-shadow, который приводится ниже. Нужно определить четыре параметра: первые два задают положение тени, третий устанавливает уровень размытия, а четвертый определяет цвет тени.

Ниже приводится пример тени текста, которая смещена на два пикселя вниз и на четыре пикселя вправо, размыта на три пикселя и имеет черный цвет с уровнем непрозрачности 30%.

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

 

Почему используется rgba?

Вам не обязательно использовать rgba для задания цвета тени при определении свойства. Однако, rgba добавляет еще одну размерность при определении тени — уровень прозрачности.

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

 

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

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

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

Цвет фона #222, а цвет текста имеет уровень непрозрачности 60%. Белая тень позиционируется немного вниз и вправо с уровнем непрозрачности 10%.

 

Четкая тень

Совсем необязательно размывать тень. Четкая тень может отлично сочетаться с дизайном сайта.

Двойная тень

Настоящее веселье начинается, когда вы отринете прочь ограничение наличия только одной тени. Используя запятую для разделения определений вы можете использовать столько теней, сколько нужно!

Вот пример использования двух теней. Первая имеет тот же цвет, что и фон.

Смещение вниз на большое расстояние

Как только вы освоите использование нескольких теней, результат будет все более и более выразительным. Очень просто создать 3D эффект для текста.

В примере используется четыре тени, все смещены вниз на разные дистанции и размыты.

 

Смещение вниз на небольшое расстояние и сильное размытие

Вот другое воплощение той же идеи. Три тени смещены на меньшее расстояние и сильнее размыты.

 

3D текст от Mark Dotto

Эффект используется на сайте MarkDotto.com. В нем используется 12 различных теней для создания отличного эффекта 3D.

 

Вдавленный текст от Gordon Hall

Notice in the example above I called my technique the “quick and dirty” letterpress effect. That’s because there’s a much more involved way to create some seriously inset text that’s much more believable.

Gordon uses some serious CSS voodoo to pull off not only an outer shadow but a genuine inner shadow as well. Check out his blog post for a full explanation of the technique.

 

Свечение

 

Супергерой

 

Множественные источники света

 

Мягкое тиснение

 

Заключение

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

ruseller.com

Задача

Сделать тень для текста средствами CSS, без использования картинок. Чего мы этим добьемся?

• гибкость — без использования картинок, текст легко менять
• скорость — меньше картинок — меньше вес страницы, меньше обращений к серверу
• SEO — текст лучше картинок оптимизируется, и надежней, чем использование техники замены текста картинкой

Текстовые тени для нормальных браузеров

Под нормальные браузеры попали все современные браузеры, которые шагают более-менее в ногу с рекомендациями W3C. В данном случае, эти браузеры понимают CSS3 свойство text-shadow, которое было рекомендовано еще в далеком 2003 году.

Итак, перечень браузеров, которые поддерживают свойство text-shadow:

• Safari 3.1 (Mac/Win) — поддерживает, не поддерживаются множественные тени
• Safari 4 (Mac/Win) — поддерживает полностью
• Opera 9.5+ (Mac/Win/Lin) — поддерживает полностью
• Firefox 3.1/3.5 (Mac/Win/Lin) — поддерживает полностью
• Google Chrome 2 (Win) — поддерживает полностью
• Shiira (Mac) — поддерживает, не поддерживаются множественные тени
• Konqueror (Lin/Mac/Win) — поддерживает полностью
• iCab (Mac) — поддерживает, не поддерживаются множественные тени
• Safari on iPhone — поддерживает, не поддерживаются множественные тени
• Nokia Symbian-Smartphones (Series 60) — поддерживает
• Opera Mini 4.1 — поддерживает, не поддерживает размытость тени

Для этих браузеров, чтобы сделать тень тексту достаточно одной строки в CSS:

Получим вот такой модный заголовок:

Подробный синтаксис смотри в описании CSS свойства text-shadow.

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

Размытый текст

Дублирование текста

Множественные тени позволяют добиться еще нескольких эффектов:

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

Выпуклый текст

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

Теперь о грустном — что делать с горячо всеми "любимым" IE?

Текстовые тени в IE

Хотя IE вплоть до 8-й версии не понимает text-shadow, у него хватает своих "примочек". В частности для создания теней есть фильтр dropShadow (подробное описание фильтра dropShadow). Чтобы тени появились, у элемента должен быть установлен layout. Устанавить можно несколькими способами:

• задав элементу свойства display: block + высоту(height) или ширину (width))
• задав элементу position: absolute
• задав float: left/right
• задав zoom: 1

Казалось, что можно кричать «Ура!!!» и радоваться жизни, но посмотри, как этот фильтр в реальности работает:

Для тех кто не понял, по пуктам недостаки этого фильтра:

• тень выглядит ужасно: угловатая, нет плавного, с полупрозрачностью перехода в фон
• искажается начертание шрифта
• тень практически не поддается регулированию (управлять можно только положением тени) — это можно частично обойти применив фильтр shadow вместо dropShadow, но критичные первые два недостатка остаются
• обязательное наличие layout несколько ограничивает разработчика

Такой результат не приемлем в реальных проектах. Непонятно кто и как принял такую работу у разработчиков.

Kilian Valkhof предложил использовать эмуляцию тени:

1. не применять фильтр непосредственно к тексту
2. использовать вместо dropShadow и shadow комбинацию фильров glow и blur

Это позволит избежать искажения текста и сделать тень более гибкой.

Но даже с таким подходом, все равно остается ряд недостатков:

• несемантический код — лишний элемент, да еще и с дублированием текста скажется не лучшим образом на логичной структурности содержимого, СЕО оптимизации. Эту проблему можено решить с помощью javascript, который будет вставлять для IE дополнительный элемент при загрузке страницы
• не соотвествие отображению в других браузерах (которые понимают text-shadow) — фильтры позволяют проэмулировать тень, с минимальными настройками. Схожести тени с другими браузерами далеко не всегда получиться добиться
• меньшая гибкость — фильтры не дадут всех возможностей text-shadow, например не получится реализовать множественные тени

Для создания теней для IE можно воспользоваться javascript (не в первый раз javascript спасает)

Тени для текста с помощью javascript

Из скриптов, что протестировал, для себя остановился на плагине для jquery "Drop Shadow". Его достоинства:

• эмулирует тени с помощью вставки множества контенйнеров, т.е. без использования фильтров для IE. Это дает возможность сделать максимально схожими тени в IE с другими браузерами + нет нужды беспокоится о layout для IE
• создает тени не только для IE, что иногда может быть полезно
• малый вес скрипта — 4Kb (если удалить комментарии из кода), а если применить сжатие, еще меньше будет. В писаниии скрипта есть требовани — наличие скрипта jquery.dimensions.js, но я так и не понял зачем он. Тени создаются, удаляются, определеяются id и без него.
• прост и понятен в использовании
• можно с некоторым успехом проэмулировать множественные тени

Недостатки:

• нельзя инициализировать скрипт по id элемента
• если элементу задан фон, тень будет создана не для текста, а для элемента в целом
• обязательное подключение библиотеки jquery (а это более 50Kb). Но популярность jquery практически ниверлирует этот недостаток
• по опсианию скрипта так же требуется подключение jquery.dimensions.js (еще 2Kb). Но не понял зачем эта библиотека, вроде и без нее все нормально работает

Применение плагина Drop Shadow

Синтаксис:

Опции:

Параметры left и top — координаты начала тени относительно верхнего левого угла надписи (или объекта). Положительные значения сдвигаеют тень вправо и вниз, отрицательные — влево и вверх.

Blur определяет размер, дисперсию тени. Нормльная тень будет при значениях 1 или 2. При больших значения тень будет размытая (не желетльно использовать такие значения, т.к. влияет на скорость работы скрипта.

Opacity задает степень прозрачности. В основном изменять значение по умочанию стоит когда хочется добиться необычного отображения тени.

Color — имя или шестнадцатиричный код цвета тени.

Swap &mdahs; инвесия цветов основного текста и тени. В описании написано, что этот парметр предназанчен для особых эффектов, вроде рельефной или гравированной надписи…но я не въехал как можно такого добиться, с помощью этого праметра.

Пример:

• скачать jquery
• скачать jquery.dropshadow.js
• скачать jquery.dimensions.min.js

Выводы об использовании теней для текста в реальных проектах

Тени для текста уже сейчас применять можно, но следует помнить об IE, который не так хорошо с ними дружит. Для IE есть два вараинта решения:

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

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

xiper.net

Синтаксис

Можно задать несколько теней, записывая их через запятую:

Значения

Значения «сдвиг_по_x», «сдвиг_по_y», «размытие» задаются в любых CSS единицах (кроме %), а цвет — в любых единицах для цвета (в том числе и rgba для полупрозрачной тени).

Значение none убирает тень.

Значение	Описание
Сдвиг_по_x	Задает смещение тени по оси X. Положительное значение смещает вправо, отрицательное — влево. Обязательный параметр.
Сдвиг_по_y	Задает смещение тени по оси Y. Положительное значение смещает вниз, отрицательное — вверх (обратите внимание на это — не так, как в математике!). Обязательный параметр.
Размытие	Задает размытие тени. Чем больше значение — тем более размытой будет тень (см. примеры для лучшего понимания). Необязательный параметр. Если не задан — тень будет четкой.
Цвет	Цвет тени в любом CSS формате. Необязательный параметр. Если не задан — цвет тени совпадает с цветом текста.

Значение по умолчанию: none.

Как реализовать inset в text-shadow (как в box-shadow) смотрите по ссылке, подпункт «Inset в text-shadow».

Примеры

Пример

В данном примере тень сдвинута вниз и влево и добавлено небольшое размытие:

Результат выполнения кода:

Пример . Четкая тень

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

Результат выполнения кода:

Пример . Равномерная тень

В данном примере тень не сдвинута, но к ней добавлено размытие:

Результат выполнения кода:

Пример . Две тени сразу

В данном примере заданы сразу две тени:

Результат выполнения кода: