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

text-shadow: X Y амплитуда цвет;

1. X - горизонтальное смещение тени к тексту (положительное значение - вправо, отрицательное - влево),


2. Y - вертикально смещение тени к тексту (положительное - вниз, отрицательно - вверх),


3. амплитуда - чем выше значение, тем больше степень размытия,


4. очевидно, цвет тени.


Вид шрифта, размер, цвет текста меняете на свое усмотрение,
(я люблю "Garamond", такой и поставила в образцах)
а "CSS тень текста"-это ваше содержание записи /скрин ниже/



Образцы текста с сайта(скрины)




Готовые коды текста(я составила по образцам)

1.CSS тень текста

<span style="font-family:Garamond;font-size:35px;text-shadow: 1px 1px 1px #000;color:#CDB38D;">CSS тень текста</span>

2.Тень на тёмном фоне

<span style="font-family:Garamond;font-size:35px;text-shadow: 4px 4px 5px #AAAAAA; color:#000;color:#1f1f1f;">Тень на тёмном фоне</span>

3.Фон и текст одного цвета

<span style="font-family:Garamond;font-size:35px;text-shadow: 0.1em 0.1em 0.2em black; color: aliceblue;color:#1f1f1f;">Фон и текст одного цвета</span>

4.Затемнение

<span style="font-family:Garamond;font-size:35px;text-shadow: 1px 2px 0 #456; color: #FFF;color:#CDB38D;">Затемнение</span>

5.Обтекаемый

<span style="font-family:Garamond;font-size:35px;text-shadow: 0 2px 2px rgba(0, 0, 30, 0.6); color: rgba(102, 0, 102, 0.5);color:#880000;">Обтекаемый</span>

6.Shpargalkablog.ru

<span style="font-family:Garamond;font-size:35px;text-shadow: 2px 2px black;color:#880000;">Shpargalkablog.ru</span>

7.Много оттенков

<span style="font-family:Garamond;font-size:35px;text-shadow: 3px 3px 10px red,-3px -3px 10px yellow;color:#000000;">Много оттенков</span>

8.Контур

<span style="font-family:Garamond;font-size:35px;text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;color:#CDB38D;">Контур</span>

9.Вдавленный

<span style="font-family:Garamond;font-size:35px;text-shadow: -1px -1px #666, 1px 1px #FFF;color:#CDB38D;">Вдавленный</span>

10.Объёмный

<span style="font-family:Garamond;font-size:35px;text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;color:#CDB38D;">Объёмный</span>

11.RETRO

<span style="font-family:Garamond;font-size:45px;text-shadow: 15px 5px 0px #EEE, 7px 7px 0px #707070;color:#CDB38D;">RETRO</span>

12.Слоёный - 1

<span style="font-family:Garamond;font-size:35px;text-shadow: -4px -2px 0 #ece2ca, -6px -4px 0 #5a5a5a;color:#CDB38D;">Слоёный - 1</span>

13.Слоёный - 2

<span style="font-family:Garamond;font-size:35px;text-shadow: 0 1px 0 #000000, 0 2px 0 #888888, 0 3px 0 #777777, 0 4px 0 #FFFFFF, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px #001135;color:#CDB38D;">Слоёный - 2</span>