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