글자효과(shadow)

▒ 요 약

필터를 이용한 '글자효과' 세번째, 쉐도우(shadow) 필터입니다. '쉐도우' 필터는 글자에 그림자를 주어 그림자를 멋지게 조절하는 필터입니다. 쉐도우 필터는, 글자와 그림자의 색깔을 조절하거나 그림자의 각도, 굵기를 조절하여, 다양?효과를 나타냅니다. 다른 필터들과 마찬가지로 <span style> 와 </span> 태그를 사용하여 <span style> 안에 글자의 여러 속성과 쉐도우 필터를 끼워넣어 사용합니다. 태그 예제를 보며, 예제 해석과 함께 배워보도록합니다. ■ 소스 ■ <span style="font-size:20pt; color:black; width:200px; height:5px; filter:shadow(color=#8DC63F, direction=150, strength=20)"> 허자허자</span> 풀이: - <span style> 와 </span>로 '허자허자' 라는 글자를 감싸서 태그 적용을 하였습니다. - 글자 속성은, 크기는 20포인트, 색깔은 검정,    글자가 표현 될 영?가로폭은 200픽셀, 세로폭은 5픽셀로 지정하였습니다.    이 폭에 대해서 퍼센트(%), 픽셀(px) 모두 가능하지만 그 차이는 다릅니다. 초급에서 배웠습니다. - 필터는 쉐도우 필터를 적용하였으며 필터 효과는 괄호 안에 있는 내용으로 적용합니다.    쉐도우 필터가 적용되어 만들어지는 그림자는,    색깔은#8DC63F 이고, 기울기 각도는 150, 그림자 두께는 20입니다. - 위에 내용을 뜯어보면    (크기:15; 색깔:검정; 필터:쉐도우.....)    명령을 내리는 표시는 :를 사용하였고, 다음명령 구분을 ;로 하였습니다. - 쉐도우 필터는 글자 색깔, 그림자 색깔, 그림자 기울기, 그림자 두께를 조절하여    다양한 효과를 나타내는데,     color:색깔 - 글자의 색깔을 조절합니다.     color=색깔 - 쉐도우 필터로 인해 생기는 그림자 색깔을 조절합니다.     direction=숫자 - 그림자 의 기울기 각도를 조절합니다.     strength=숫자 - 그림자 두께를 조절할 수 있습니다. ■ 예제 ■ 그림자 기울기(direction) 조절 예제 허자허자 direction=0 허자허자 direction=50 허자허자 direction=100 허자허자 direction=150 허자허자 direction=200 허자허자 direction=250 허자허자 direction=300 허자허자 direction=360 그림자 두께(strength) 조절 예제 허자허자 strength=0 허자허자 strength=5 허자허자 strength=20 허자허자 strength=50 메인글자, 그림자 색상효과 예제 허자허자 color:black color=#C1C0FF 허자허자 color:#EAA5C3 color=#FCDAE9 허자허자 color:#7D4900 color=#F7941D 허자허자 color:#005E20 color=#8DC63F