свойство text-shadow

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

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

—първастойност—хоризонтално отместване:
положително - изместване надясно
отрицателен - изместване наляво
"0" - без отместване
—вторастойност—вертикално отместване:
положително - понижаване на предавките
отрицателен - изместване нагоре
"0" - без отместване
—третастойност—стойност (размер на сянката)
- четвъртастойност - цвят

Точно като свойството box-shadow, свойството text-shadow има 2 задължителни параметъра.

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

Вижте сами, имате същия текст пред вас, но вторият има сянка.

Текст за показване на свойството text-shadow

С помощта на свойството text-shadow можете да създавате цветни текстови декорации, ето няколко примера:

Винтидж текст

Първата сянка е цветът на фона, втората е цветът на шрифта, което води до този ефект:

text-shadow СВОЙСТВО

Вграден текст

text-shadow СВОЙСТВО

Повдигнат текст

text-shadow СВОЙСТВО

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

text-shadow СВОЙСТВО

Горящ текст

text-shadow СВОЙСТВО

Много хубав текст

В необятността на Интернет, или по-скоро в сайта markdotto.com, попаднах на очарователен ефект, който предлагам на вашето внимание.

text-shadow СВОЙСТВО

Дълги сенки върху текста

text-shadow СВОЙСТВО

Какво ще кажете за тази опция?

text-shadow СВОЙСТВО

Вътрешни сенки затекст

Inset се използва за създаване на вътрешна сянка, но това не работи за text-shadow. Но има решение. За да направите това, задайте текста на тъмен фон и светла сянка, направете цвета на текста прозрачен и използвайте background-clip: text;

text-shadow СВОЙСТВО

И така, използвайки свойството text-shadow, можете да трансформирате обикновен текст в нещо подобно ....!

Други опции (методи) за декориране на текст в CSS3 са обсъдени в статията Текстови стилови ефекти

Препоръчвам за четене.

Както обикновено, всеки избира външен вид, размер, съдържание, тук е посочено само описанието на самия ефект.