아름다운글 올리는 방법 13 - 1 신

그림자글자<DIV STYLE="width:520; height:50; font-size: 15pt; color:#FFCC00; filter:Shadow(Color=#666666, Direction=225)">
<CENTER><b>이게 많이쓰는 그림자 글자</b></CENTER>
</DIV>

 

 

width:520; height:50; ...... 은 글자가 나타날 가로 폭과 세로폭 지정
font-size: 15pt; ........... 글자의 크기 지정
color:#FFCC00; ............. 글자의 색 지정
Color=#666666 .............. 그림자의 색 지정
Direction=225 .............. 그림자의 방향지정 45 90 135 180 225 270 315 등으로 변경해보세요
※주의
: 와 ; 의 구별을 확실히 해야 합니다

 

 

 

 

결과보기

이게 많이쓰는 그림자 글자

 

 

 

 

그림자글자 다른예

각도를 135로 변경해볼까요
<DIV STYLE="width:520; height:50; font-size: 15pt; color:#FFFF00; filter:Shadow(Color=#666666, Direction=135)">
<CENTER><b>각도를 135로 글색#FFFF00 </b></CENTER>
</DIV>

 

 

 

결과보기

각도를 135로 글색#FFFF00

 

 

그림자글자 여러가지 예

각도 와 글색 글자의 크기 그림자의 방향을 마음대로 바꾸어 보세요

 

 

결과보기

각도를 45로 글색#FF0000 그림자 pink

각도를 315로 글색black 그림자 green 글자크기 11pt

글크기32pt 글색BLUE그림자#444444 각도90

 

 

 

 

 

2. Shadow 글자.
  그림자 글자와 비슷한 효과지만 그림자가 글자와 떨어져 있습니다.
  각 효과의 변경 방법은 위의 그림자 글자와 동일 합니다.

 

 

Drop Shadow 글자

<DIV STYLE="width:520; height:50; font-size: 32pt; color:blue; filter:DropShadow(Color=#CCCCCC, OffX=10, OffY=10, Positive=true)">
<CENTER>DropShadow 글자</CENTER>
</DIV>

 

 

OffX=10, OffY=10 ..... 수치는 글자와 그림자의 간격입니다. 적당히 고쳐보세요

결과보기 DropShadow 글자

 

 

3.Glow 글자
  글자의 주위에 스프레이 뿌리듯 나오는글자
  각 효과의 변경 방법은 위의 그림자 글자와 동일 합니다.

 

 

 

Glow 글자

<DIV ID="GlowId" STYLE="width:520; height:50; font-size: 32pt; color:#ffffff; filter:Glow(Color=red, Strength=10)">
<CENTER>불타는글 Glow 글자체</CENTER>
</DIV>

 

 

Strength=10 ..... 불타는 효과의 강도 조절. 1 부터100 까지 숫자를 바꾸어 실험해보세요

 

 

결과보기

불타는글 Glow 글자체

 

 

 

strength:2 의 결과

strength:2 로 했을때 이런 모양, 수채화로 그린 절망에 사용

 

 

4.alpha 글자
  뒤로 갈수록 점점 투명해지는 글자 입니다.

 

 

alpha 글자

<span style="font-family:돋움;font-size:15pt;font-weight:bold;color:red;width:500;height:50;Filter:Alpha(opacity=90,finishopacity=0,style=1,startX=0,startY=0,finishX=100,finishY=0)">
<center>알파채널 글자! 이런 모양입니다 멋있죠</center></span>

 

 

font-family:돋움; ..... 글자체
font-size:15pt; ....... 글자 크기
font-weight:bold; ..... 글자의 굵기
color:#8b8bff; ........ 글자의 색상 (처음색)
opacity=90, ........... 불투명도 기본값(default)은 100이며 0(완전히 투명한 경우)에서 100(완전히 불투명한 경우)까지의 값을 가집니다.
finishopacity=0, ...... 지정된 값에 이르면 불투명도 증감을 마치게 됩니다.
이것은 style 속성값이 1,2,3 일 때만 적용되며 0(기본값)에서 100까지의 값을 가집니다.
style=1, .............. 불투명도 증감 모양을 지정합니다. 0(기본값)에서 3까지의 값을 가지며, 0은 단일(uniform), 1은 선형(linear), 2는 방사형(radial), 3은 직사각형(rectangular) 모양으로 불투명도가 증감합니다. startX=0,startY=0,finishX=100,finishY=0)
불투명도 증감 시작(끝) x,y 좌표를 지정합니다.
그런데 style 속성값이 1,2,3 일 때 적용된다는 MS측의 설명과는 달리 style=1을 제외하고는 제대로 적용이 되지 않는 것 같습니다. 이것은 필터가 적용되는 대상의 % 값으로 예를 들어 startX=30 이면 가로 30%지점이 증감의 시작점이 됩니다

 

 

결과보기

알파채널 글자! 이런 모양입니다 멋있죠

 

5.Blur 필트 글자
위의 그림자 글자와 비슷한 효과를 내는것입니다
차이점은 그림자 글자는 그림자색을 지정해주어야 하지만 Blur필트는 글색만 지정해주면 글색과 유사한색을 블록으로 자동 생성 합니다

 

 

Blur필트 글자

<span style="font-family:돋움;font-size:20pt;font-weight:bold;color:#ff0000;width:600;height:50;Filter:Blur(add=1,direction=145,strength=6)">
<center>요건 Blur 필터로 처리한 글자여요</center></span>

 

 

add=1, .......... 0 과 1만 선택. 0 이면 거의 같은색 그림자, 1 이면 유사한색 그림자
direction=145, .. 그림자 생기는 방향설정
strength=6 ...... 그림자의 크기,14 정도면 그림자가 아주 길어집니다.

 

 

결과보기

요건 Blue 필터로 처리한 글자여요