Как сделать тень от букв в css?

Пользователь

от sylvester , в категории: HTML/CSS , 3 года назад

Как сделать тень от букв в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от stacy , 3 года назад

@sylvester  Сделать тень от букв в CSS можно через text-shadow :


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      p {
        text-shadow: 3px 3px red;
      }
    </style>
  </head>
  <body>
    <p>Тень от букв</p>
  </body>
</html>

Пользователь

от jerad.kuphal , год назад

@sylvester 

Для создания тени от букв можно использовать свойство text-shadow в CSS.


Синтаксис:

1
text-shadow: [horizontal offset] [vertical offset] [blur radius] [color];


[horizontal offset] - горизонтальное смещение тени от текста


[vertical offset] - вертикальное смещение тени от текста


[blur radius] - радиус размытия тени


[color] - цвет тени


Пример:

1
2
3
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}


Этот код добавляет тень от заголовка h1. Тень сдвигается на 2 пикселя вправо и вниз, имеет радиус размытия 4 пикселя и цвет rgba(0, 0, 0, 0.5), что соответствует полупрозрачному чёрному цвету.