소스 여러가지 글씨체 만들기 소스

[겨울나그네]

안녕하세요
이양호 입니다.
오늘은 글자의 특별한 효과에 대하여 알아보겠습니다

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

Blue필트 글자

<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>요건 Blue 필터로 처리한 글자여요</center></span>

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

결과보기

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

위로가기 클릭

6. 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라고 합니다 알아보시겠어요?

7. Flip 글자

<DIV STYLE="width:520; height:50; font-size: 32pt; filter:FlipV() FlipH();">
<CENTER>글자야 꺼꾸로 서봐</CENTER> </DIV>

결과보기

글자야 꺼꾸로 서봐

8. 간단한 팁

<font color=plum face=@궁서 size=7>
이렇게 face=@하고 글씨체를 써 넣으면 글자가 눕게 됩니다
</font>

결과보기

이렇게 face=@하고 글씨체를 써 넣으면 글자가 눕게 됩니다

이제부터는 조금더 고급으로 넘어 갑니다
1. 마우스를 올리면 글색과 크기가 변해요

<div style="font-size:16; color:red" [안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxonMouseOver="this.style.color='blue'; this.style.fontSize='24'" [안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxonMouseOut="this.style.color='red'; this.style.fontSize='16'">
<b><i>색이변하면서 커져라.글꼴은 이탤릭체로 하고
</i></b></div>

결과보기

색이변하면서 커져라.글꼴은 이탤릭체로 하고

2. 마우스 이벤트

<span style="color:black;filter:glow(color=orange);height:10px" [안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxonmouseover="this.style.color='red';this.style.filter='shadow(color=blue)'" [안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxonmouseout="this.style.color='black';this.style.filter='glow(color=orange)'">
<font face="바탕" size="6"><b>
Lee Yang-ho 여기에 마우스를
</b></font></span>

결과보기

Lee Yang-ho 여기에 마우스를

3. 마우스가오면 바탕색이 변해요

<table width=650><tr><td bgcolor=#000000>
<p [안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxonMouseOver="this.style.backgroundColor='blue'" [안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxonMouseOut="this.style.backgroundColor=''">
<font color=#ffffff size=3 fase="샘물체">
홈페이지를 만들다 궁금한 사항이 생긴다면 저에게 물어 보시기 바랍니다. 양과 질에서 최고의 해답을 제시해 드리도록 노력 하겠습니다. 곧 홈이 완성되면 여러분울 초대 하겠읍니다. 시간이 없어 조금씩 하다보니 많이 기다리셔야 겠어요. 마우스를 여기에
</font></p></td></tr></table>

결과보기

홈페이지를 만들다 궁금한 사항이 생긴다면 저에게 물어 보시기 바랍니다. 양과 질에서 최고의 해답을 제시해 드리도록 노력 하겠습니다. 곧 홈이 완성되면 여러분울 초대 하겠읍니다. 시간이 없어 조금씩 하다보니 많이 기다리셔야 겠어요. 마우스를 여기에

4. 마우스가오면 글자색 변하는 또다른 여러가지 방법

<html>
<head>
<STYLE type=text/css>
   #ami:hover {COLOR: blue; FONT-WEIGHT: bolder}
   #bmi:hover {COLOR: green; FONT-WEIGHT: bolder}
   #cmi:hover {COLOR: gold; FONT-SIZE: 12pt; FONT-WEIGHT: bolder}
</STYLE>
</head>
<body bgcolor="white" link="blue" vlink="purple">
<FONT size=2>
<A href="#" id=ami>
안녕하세요? 이양호 입니다. 마우스를 여기에 올려보세요</A><br>
<A href="#" id=bmi>
어느듯 가을이 나의 앞뜰에도 성큼 다가 왔군요</A><br>
<A href="#" id=cmi>
개인 사정으로인하여 오랬동안 시집에 오지 못햇습니다</A><br></FONT>
</body>
</html>

결과보기

안녕하세요? 이양호 입니다. 마우스를 여기에 올려보세요
어느듯 가을이 나의 앞뜰에도 성큼 다가 왔군요
개인 사정으로인하여 오랬동안 시집에 오지 못햇습니다

위의것도 설명을 드려야할텐데 작성하다보니 글이 너무 길군요.
좀더 고급으로 올라가면 많은 글자효과가 있지만 지면이 모자라 이것으로 마감해야겠어요.

다음까지 안녕히...

위로가기 클릭

Copyright 2001 Lee Yang Ho,Inc. All right reserved.
For more Information,mail to dimmerm@hanmail.net