[스크랩] 이쁜 글씨 만들기

▶ 테두리 글씨
<span style="font-family:휴먼엽서체;font-size:10pt;color:white;width:100%;height:20; Filter:Glow(color=orange,strength:2)">이쁜글씨</span> 결과는 이쁜글씨

<span style="font-family:휴먼엽서체;font-size:12pt;color:white;width:100%;height:20; Filter:Glow(color=red,strength:2)">이쁜글씨</span> 결과는 이쁜글씨

<span style="font-family:휴먼엽서체;font-size:14pt;color:white;width:100%;height:20; Filter:Glow(color=ff99ff,strength:2)">이쁜글씨</span> 결과는 이쁜글씨

<span style="font-family:휴먼엽서체;font-size:16pt;color:white;width:100%;height:20; Filter:Glow(color=00cc99,strength:2)">이쁜글씨</span> 결과는 이쁜글씨

 

 

▶ 파스텔 글씨
<DIV style="width:320; height:50; font-size:18pt; filter:glow(color=blue, strength=8)"> <font color=deeppink face=휴먼매직체>이쁜글씨</font></DIV> 결과는

이쁜글씨

<DIV style="width:320; height:50; font-size:20pt; filter:glow(color=pink, strength=8)"> <font color=deeppink face=휴먼매직체>이쁜글씨</font></DIV> 결과는

이쁜글씨

<DIV style="width:320; height:50; font-size:21pt; filter:glow(color=red, strength=8)"> <font color=blue face=휴먼매직체>이쁜글씨</font></DIV> 결과는

이쁜글씨

 

 

▶ 테두리와 파스텔의 중간 정도 되는 것
<span style=color:ffffff;filter:glow(color=ff99ff);height:0px> <font face=고딕체 size=3>반가워요!</font></span> 결과는 반가워요!

<span style=color:ffffff;filter:glow(color=green);height:0px> <font face=고딕체 size=4>반가워요!</font></span> 결과는 반가워요!

 

 

▶ 그림자 글씨

아래 예제에서 direction=135는 그림자 각도 입니다. 
<span style="font-weight:none; color:White; width:100%; height: 20; font-size: 15pt;Filter: shadow(color=red,direction=135)">빨간색 그림자 글씨</span> 결과는 빨간색 그림자 글씨

<span style="font-weight:none; color:White; width:100%; height: 20; font-size: 15pt;Filter: shadow(color=green,direction=135)"> 녹색 그림자 글씨</span> 결과는 녹색 그림자 글씨

<span style="font-weight:none; color:White; width:100%; height: 20; font-size: 15pt;Filter: shadow(color=660099,direction=135)"> 보라색 그림자 글씨</span> 결과는 보라색 그림자 글씨

<span style="font-weight:none; color:White; width:100%; height: 20; font-size: 15pt;Filter: shadow(color=magenta,direction=135)"> 핑크색 그림자 글씨</span> 결과는 핑크색 그림자 글씨

<span style="font-weight:none; color:White; width:100%; height: 20; font-size: 15pt;Filter: shadow(color=orange,direction=135)"> 오렌지색 그림자 글씨</span> 결과는 오렌지색 그림자 글씨

 

 

▶ Shadow 글자.
  그림자 글자와 비슷한 효과지만 그림자가 글자와 떨어져 있습니다.
  각 효과의 변경 방법은 위의 그림자 글자와 동일 합니다.
<DIV STYLE="width:520; height:50; font-size: 20pt; color:RED; filter:DropShadow(Color=#CCCCCC, OffX=10, OffY=10, Positive=true)">
<CENTER>DropShadow 글자</CENTER>
</DIV> 결과는

DropShadow 글자

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

 

 

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

불타는글 Glow 글자체

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

 

 

▶ 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%지점이 증감의 시작점이 됩니다

 

 

▶ Wave 글자
<span style="font-family:돋움체;font-size:20pt;font-weight:bold;color:#ff0000;width:650;height:10;Filter:Wave(add=0,freq=2,lightstrength=5,phase=50,strength=3)"> <center>이런걸 Wave라고 합니다 알아보시겠어요?</center></span>
  결과는

이런걸 Wave라고 합니다 알아보시겠어요?

  ▶ 옆으로 누운 글자
<font color=plum face=@궁서 size=4>
이렇게 face=@하고 글씨체를 써 넣으면 글자가 눕게 됩니다
</font>
  결과는
이렇게 face=@하고 글씨체를 써 넣으면 글자가 눕게 됩니다

출처 : 지나의 쉼터

글쓴이 : 지나 원글보기

메모 :