[CSS] text-shadow 속성

text-shadow는 글자 그대로 글자에 그림자 효과를 적용해 주는 속성입니다.

 

| 사용

1. 기본 사용법

text-shadow는 기본적으로

그림자의 x축 거리, y축 거리, 블러효과 반경, 색상으로 구성이 됩니다.

text-shadow: offset-x | offset-y | blur-radius | color
text-shadow: 1px 5px 5px green;

안녕하세요

x축 거리와 y축 거리는 필수 요소입니다.

 

 

2. 디자인적 응용?

-형광효과

<div>
  <h1>안녕하세요</h1>
</div>

div {
  background-color: black;
  width: 200px;
  text-align: center;
}

h1 {
  text-shadow: 1px 1px 7px white;
  color: white;
}

안녕하세요

이런 식으로 형광 느낌의 효과도 줄 수 있습니다.

 

- 그림자 중첩하기

<h1>안녕하세요</h1>

h1 {
  text-shadow: 3px 3px green, 6px 6px red, 9px 9px blue;
}

안녕하세요

이런 식으로 쉼표로 구분하여 그림자를 중첩시킬 수 있습니다.