⑧ Примеры тени текста

Продолжим изучение темы CSS3 - оформление текста. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Оформление линии: подчеркивание, обводка и зачеркивание
• ② Вид линии оформления: свойство text-decoration-line
• ③ Стиль линии оформления: свойство text-decoration-style
• ④ Цвет линии оформления: свойство text-decoration-color
• ⑤ Краткая запись свойств линии оформления: свойство text-decoration
• ⑥ Расположение линии оформления: свойство text-underline-position
• ⑦ Тень текста: свойство text-shadow

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

CSS

.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;
}

3D тень

CSS

.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);
}

Тень-текст

CSS

.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);
}

Ретро-тень

CSS

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

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

CSS

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

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

CSS

.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);
}

Тень-зебра

CSS

.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;
}

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

CSS

.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;
}

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

CSS

.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);
}

Стиль LETTERPRESS

CSS

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

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

CSS

.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;
}

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

CSS

.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); 
}

Продолжение в следующей статье!