Содержание страницы
домикГлавная / Элементы html и css / Тень текста css
тень текстаДля выразительности текста и придания ему классного эффекта, добавляют к нему тень на css, где в качестве свойства выступает text-shadow, с помощью значений которого, мы сможем задать любой внешний вид нашего текста.

Тень к тексту можно наложить как один, так и несколько слоёв одновременно через запятую, подставляя разные значения по цвету, отступу и размытию.
Как сделать тень shadow для текста, я покажу в ниже приведённых примерах.
значения для тени текста

Описание значений для тени в тексте:

  • 1 - смещение тени текста по горизонтали ( положительное: вправо, отрицательное: влево );
  • 2 - смещение тени текста по вертикали ( положительное: вниз, отрицательное: вверх );
  • 3 - радиус размытия тени для текста ( необязательное значение );
  • 4 - цвет тени для текста.
В отличие от тень для блока, в тени для текста нельзя использовать inset ( тень внутри блока ), а в остальном они примерно схожи между собой.
Далее рассмотрим конкретные примеры тени для текста css с исходным кодом для каждого, который можно быстро скопировать и вставить к себе.

Примеры тени текста на css.

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


<style>
.my_tekst {
  margin: 40px auto;
  text-align: center;
  padding: 30px 10px;
  color: #fff;
  font: 700 40px/1 'Source Sans Pro', Arial, sans-serif;
  background-color: #4343;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 hsl(174,5%,80%),
	0 2px 0 hsl(174,5%,75%),
	0 3px 0 hsl(174,5%,70%),
	0 4px 0 hsl(174,5%,66%),
	0 5px 0 hsl(174,5%,64%),
	0 6px 0 hsl(174,5%,62%),
	0 7px 0 hsl(174,5%,61%),
	0 8px 0 hsl(174,5%,60%),
	0 0 5px rgba(0,0,0,.05),
	0 1px 3px rgba(0,0,0,.2),
	0 3px 5px rgba(0,0,0,.2),
	0 5px 10px rgba(0,0,0,.2),
	0 10px 10px rgba(0,0,0,.2),
	0 20px 20px rgba(0,0,0,.3);
}
</style>

<p class="my_tekst">1. Тень текста</p>

2. Тень текста


<style>
.my_tekst-2 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px 24px;
  color: #131313;
  font: 100 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  background-color: #e7e5e4;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-shadow: 
	1px -1px 0 #767676, 
	-1px 1px 1px #737272, 
	-2px 2px 1px #767474, 
	-3px 3px 1px #787777, 
	-4px 4px 1px #7b7a7a, 
	-5px 5px 1px #7f7d7d, 
	-6px 6px 1px #828181, 
	-7px 7px 1px #868585, 
	-8px 8px 1px #8b8a89, 
	-9px 9px 1px #8f8e8d, 
	-10px 10px 1px #949392, 
	-11px 11px 1px #999897, 
	-12px 12px 1px #9e9c9c, 
	-13px 13px 1px #a3a1a1, 
	-14px 14px 1px #a8a6a6, 
	-15px 15px 1px #adabab, 
	-16px 16px 1px #b2b1b0, 
	-17px 17px 1px #b7b6b5, 
	-18px 18px 1px #bcbbba, 
	-19px 19px 1px #c1bfbf, 
	-20px 20px 1px #c6c4c4, 
	-21px 21px 1px #cbc9c8, 
	-22px 22px 1px #cfcdcd, 
	-23px 23px 1px #d4d2d1, 
	-24px 24px 1px #d8d6d5, 
	-25px 25px 1px #dbdad9, 
	-26px 26px 1px #dfdddc, 
	-27px 27px 1px #e2e0df, 
	-28px 28px 1px #e4e3e2;
}
</style>

<p class="my_tekst-2">2. Тень текста</p>

3. Тень текста


<style>
.my_tekst-3 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px;
  color: #e0dfdc;
  font: 100 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  background-color: #333;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 
	0 -1px 0 #fff, 
	0 1px 0 #2e2e2e, 
	0 2px 0 #2c2c2c, 
	0 3px 0 #2a2a2a, 
	0 4px 0 #282828, 
	0 5px 0 #262626, 
	0 6px 0 #242424, 
	0 7px 0 #222, 
	0 8px 0 #202020, 
	0 9px 0 #1e1e1e, 
	0 10px 0 #1c1c1c, 
	0 11px 0 #1a1a1a, 
	0 12px 0 #181818, 
	0 13px 0 #161616, 
	0 14px 0 #141414, 
	0 15px 0 #121212, 
	0 22px 30px rgba(0, 0, 0, 0.9);
}
</style>

<p class="my_tekst-3">3. Тень текста</p>

4. Тень текста


<style>
.my_tekst-4 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px;
  color: #000;
  font: 700 40px/1 sans-serif;
  background-color: #343434;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 
	-1px -1px 1px #111, 
	2px 2px 1px #999;
}
</style>

<p class="my_tekst-4">4. Тень текста</p>

5. Тень текста


<style>
.my_tekst-5 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px;
  color: #2c2c2c;
  font: 700 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  background-color: #d5d5d5;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-shadow: 
	4px 4px 0px #d5d5d5, 
	7px 7px 0px rgba(0, 0, 0, 0.2);
}
</style>

<p class="my_tekst-5">5. Тень текста</p>

6. Тень текста


<style>
.my_tekst-6 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px;
  color: #2c2c2c;
  font: 100 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  background-color: #eee;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
</style>

<p class="my_tekst-6">6. Тень текста</p>

7. Тень текста


<style>
.my_tekst-7 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px;
  color: white;
  font: 100 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  background: rgb(130, 45, 63);
  text-shadow: -2px 4px 0 rgba(0,0,0,0.3);
}
</style>

<p class="my_tekst-7">7. Тень текста</p>

8. Тень текста


<style>
.my_tekst-8 {
  margin: 40px auto;
  text-align: center;
  padding: 14px 10px 34px;
  color: white;
  font: 100 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  background-color: skyblue;
  text-shadow: 0px 3px 0px #b2a98f,
	0px 14px 10px rgba(0,0,0,0.15),
	0px 24px 2px rgba(0,0,0,0.1),
	0px 34px 30px rgba(0,0,0,0.1);
}
</style>

<p class="my_tekst-8">8. Тень текста</p>

9. Тень текста


<style>
.my_tekst-9 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px 20px;
  color: #f1f1f1;
  font: 100 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  background: rgb(30,233,66);
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
	0px 8px 13px rgba(0,0,0,0.1),
	0px 18px 23px rgba(0,0,0,0.1);
}
</style>

<p class="my_tekst-9">9. Тень текста</p>

10. Тень текста


<style>
.my_tekst-10 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px 20px;
  color: white;
  font: 100 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  background-color: orange;
  text-shadow: -0.0375em 0 0 rgba(48, 48, 48, 0.1);
  text-transform: capitalize;
}
</style>

<p class="my_tekst-10">10. Тень текста</p>

11. Тень текста


<style>
.my_tekst-11 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px 20px;
  color: transparent;
  font: 700 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  background-color: #222;
  text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
  background-clip: text;
}
</style>

<p class="my_tekst-11">11. Тень текста</p>

12. Тень текста


<style>
.my_tekst-12 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px 20px;
  color: rgba(0,0,0,0.6);
  font: 100 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  background-color: whitesmoke;
  text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
	0px -5px 16px rgba(255,255,255,0.3);
}
</style>

<p class="my_tekst-12">12. Тень текста</p>

13. Тень текста


<style>
.my_tekst-13 {
  margin: 40px auto;
  text-align: center;
  padding: 14px 10px 34px;
  color: white;
  font: 100 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  background-color: rgb(233,33,33);
  text-shadow: 0px 0px 0 rgb(239,239,239),
	-1px 1px 0 rgb(233,233,233),
	-2px 2px 0 rgb(228,228,228),
	-3px 3px 0 rgb(222,222,222),
	-4px 4px 0 rgb(216,216,216),
	-5px 5px 0 rgb(210,210,210),
	-6px 6px 0 rgb(204,204,204),
	-7px 7px 0 rgb(198,198,198),
	-8px 8px 0 rgb(193,193,193),
	-9px 9px 0 rgb(187,187,187),
	-10px 10px 0 rgb(181,181,181),
	-11px 11px 0 rgb(175,175,175),
	-12px 12px 0 rgb(169,169,169),
	-13px 13px 0 rgb(163,163,163),
	-14px 14px 0 rgb(157,157,157),
	-15px 15px 0 rgb(152,152,152),
	-16px 16px 0 rgb(146,146,146),
	-17px 17px 0 rgb(140,140,140), 
	-18px 18px 0 rgb(134,134,134),
	-19px 19px 18px rgba(0,0,0,0.25),
	-19px 19px 1px rgba(0,0,0,0.5),
	0px 0px 18px rgba(0,0,0,.2);
}
</style>

<p class="my_tekst-13">13. Тень текста</p>

14. Тень текста


<style>
.my_tekst-14 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px 20px;
  color: red;
  font: 100 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  background-color: #fff;
  letter-spacing: 5px;
  text-shadow: -1px -1px 0px #420000, 2px 2px 0px #eaeaea, 3px 3px 0px #814359;
}
</style>

<p class="my_tekst-14">14. Тень текста</p>

15. Тень текста


<style>
.my_tekst-15 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px 20px;
  color: #78452e;
  font: 900 34px/1 sans-serif;
  background-color: #999;
  letter-spacing: 3px;
  text-shadow: -1px 0 0 #3c261c,
	-4px 0 0 #d0b4a7,
	-6px 0 0 #78452e,
	-8px 0 0 #3c261c;
  text-transform: uppercase;
}
</style>

<p class="my_tekst-15">15. Тень текста</p>

16. Тень текста


<style>
.my_tekst-16 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px 20px;
  color: #000;
  font:  600 40px/40px sans-serif;
  background-color: #000;
  letter-spacing: 2px;
  text-shadow: -3px 0 0 rgba(255,0,0,.7),
	3px 0 0 rgba(0,255,255,.7);
}
</style>

<p class="my_tekst-16">16. Тень текста</p>

17. Тень текста


<style>
.my_tekst-17 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px 20px;
  color: #e1b38e;
  font:  800 40px/40px 'Sniglet', sans-serif;
  background-color: #00618f;
  text-shadow: -1px 1px 0 #9a653b,
	-2px 2px 0 #9a653b,
	-6px 1px 0 #690,
	2px 4px 0 #a10,
	-3px 3px 0 #e1b38e,
	-4px 4px 0 #9a653b,
	-5px 5px 0 #9a653b;
}
</style>

<p class="my_tekst-17">17. Тень текста</p>

18. Тень текста


<style>
.my_tekst-18 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px 24px;
  color: #000;
  font:  100 40px/40px 'Monoton', sans-serif;
  letter-spacing: 10px;
  background-color: #777;
  text-shadow: -2px 2px 0 #292322,
	-4px 4px 0 #f60,
	-6px 6px 0 #292322,
	-8px 8px 0 #fc0;
  text-transform: uppercase;
}
</style>

<p class="my_tekst-18">18. Тень текста</p>

19. Тень текста


<style>
.my_tekst-19 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px 20px;
  color: #000;
  font:  400 40px/40px 'Fredoka One', sans-serif;
  letter-spacing: 4px;
  background-color: #555;
  text-shadow: 0 -3px 0 #ddd,
	0 3px 0 #111,
	-3px 0 #666,
	3px 0 #666,
	-3px -3px 0 #999,
	3px -3px 0 #999,
	3px 3px 0 #333,
	-3px 3px 0 #333;
  text-transform: uppercase;
}
</style>

<p class="my_tekst-19">19. Тень текста</p>

20. Тень текста


<style>
.my_tekst-20 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px 24px;
  color: #f80;
  font:  400 40px/40px 'Fredoka One', sans-serif;
  background-color: #000;
  text-shadow: 0 2px 0 #292322,
	0 3px 0 #c40,
	0 4px 0 #c40,
	0 5px 0 #c40,
	0 6px 0 #c40;
  text-transform: uppercase;
}
</style>

<p class="my_tekst-20">20. Тень текста</p>

21. Тень текста


<style>
.my_tekst-21 {
  margin: 40px auto;
  text-align: center;
  padding: 14px 10px 34px;
  color: #fd6;
  font:  800 40px/40px sans-serif;
  background-color: #32a400;
  text-shadow: 0 2px 0 #292322,
	2px 2px 0 #292322,
	-2px 2px 0 #292322,
	0 4px 0 #fc0,
	3px 4px 0 #fc0,
	-3px 4px 0 #fc0,
	0 6px 0 #eb0,
	-4px 6px 0 #eb0,
	4px 6px 0 #eb0,
	0 8px 0 #da0,
	-5px 8px 0 #da0,
	5px 8px 0 #da0,
	0 10px 0 #c90,
	-6px 10px 0 #c90,
	6px 10px 0 #c90,
	0 12px 0 #b80,
	-7px 12px 0 #b80,
	7px 12px 0 #b80,
	0 14px 0 #a70,
	-8px 14px 0 #a70,
	8px 14px 0 #a70,
	0 16px 0 #960,
	-9px 16px 0 #960,
	9px 16px 0 #960,
	0 18px 0 #850,
	-10px 18px 0 #850,
	10px 18px 0 #850,
	0 20px 0 #740,
	-11px 20px 0 #740,
	11px 20px 0 #740;
  text-transform: uppercase;
}
</style>

<p class="my_tekst-21">21. Тень текста</p>

22. Тень текста


<style>
.my-box-back{
  margin:20px auto;
  padding: 0;
  background-color: #ccc;
}
.my_tekst-22 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px 20px;
  color: transparent;
  font:  700 40px/40px sans-serif;
  background-color: #565656;
  text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}
</style>

<div class="my-box-back">
	<p class="my_tekst-22">22. Тень текста</p>
</div>

23. Тень текста


@import url('https://fonts.googleapis.com/css?family=Syncopate:700');
<style>
.my_tekst-23 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px 20px;
  color: white;
  font:  700 40px/1.1 'Syncopate', sans-serif;
  background-color: skyblue;
  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, 0.10),
        0 0px 5px   rgba(0,0,0, 0.10),
        0 1px 3px   rgba(0,0,0, 0.30),
        0 3px 5px   rgba(0,0,0, 0.20),
        0 5px 10px  rgba(0,0,0, 0.25),
        0 10px 10px rgba(0,0,0, 0.20),
        0 20px 20px rgba(0,0,0, 0.15);
  text-transform: uppercase;
}
</style>

<p class="my_tekst-23">23. Тень текста</p>

Примеры тени текста при наведение.

24. Тень текста


@import url(https://fonts.googleapis.com/css?family=Oswald);
<style>
.my_tekst-24 {
  margin: 40px auto;
  text-align: center;
  padding: 14px 10px 34px;
  color: #ededed;
  background-color: #008dc5;
  font: 400 40px/40px Oswald;
  transition: 0.5s all ease;
  text-transform: uppercase;
  text-shadow: 
	1px 1px #61b4de, 2px 2px #61b4de, 3px 3px #61b4de, 4px 4px #61b4de, 5px 5px #61b4de,
	6px 6px #91c467, 7px 7px #91c467, 8px 8px #91c467, 9px 9px #91c467, 10px 10px #91c467,
	11px 11px #f3a14b, 12px 12px #f3a14b, 13px 13px #f3a14b, 14px 14px #f3a14b, 15px 15px #f3a14b,
	16px 16px #e84c50, 17px 17px #e84c50, 18px 18px #e84c50, 19px 19px #e84c50, 20px 20px #e84c50,
	21px 21px #4e5965, 22px 22px #4e5965, 23px 23px #4e5965, 24px 24px #4e5965, 25px 25px #4e5965;
}
.my_tekst-24:hover{
  color: #0a0a0a;
  text-shadow: 
    1px 1px #61b4de,
    2px 2px #91c467,
    3px 3px #f3a14b,
    4px 4px #e84c50,
    5px 5px #4e5965;
}
</style>

<p class="my_tekst-24">24. Тень текста</p>

Дата публикации: 28.03.2019
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!