텍스트에 그림자 효과 주기 (text-shadow)

입체감 있는 글자를 표현한다.

 

속성값

• none : 그림자를 없앤다 (지정하지 않았을 때 기본값임.)
• <가로 거리> <세로 거리> <번짐 정도> <색상>
  • 가로 거리 : 필수 속성. 양수는 글자의 오른쪽, 음수는 글자의 왼쪽에 그림자를 만든다.
  • 세로 거리 : 필수 속성. 양수는 글자의 아래쪽, 음수는 글자의 위쪽에 그림자를 만든다.
  • 번짐 정도 : 기본값은 0. 양수는 모든 방향으로 번짐, 음수는 모든 방향으로 축소.
  • 색상 : 기본값은 현재 글자 색.

<h1 style="text-shadow: 1px 1px black; color: red;"> ㅎㅎ </h1>
<h1 style="text-shadow: 5px 5px 3px #ffa500;"> ㅎㅎ </h1>
<h1 style="text-shadow: 7px -7px 20px #000; color: #fff;"> ㅎㅎ </h1>

 

출처 : 웹 표준의 정석 (고경희 저)