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 필터로 처리한 글자여요 |
위로가기 클릭
|
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" onMouseOver="this.style.color='blue'; this.style.fontSize='24'" onMouseOut="this.style.color='red'; this.style.fontSize='16'"> <b><i>색이변하면서 커져라.글꼴은 이탤릭체로 하고 </i></b></div>
|
결과보기
색이변하면서 커져라.글꼴은 이탤릭체로 하고
|
2. 마우스 이벤트
<span style="color:black;filter:glow(color=orange);height:10px" onmouseover="this.style.color='red';this.style.filter='shadow(color=blue)'" onmouseout="this.style.color='black';this.style.filter='glow(color=orange)'"> <font face="바탕" size="6"><b> Lee Yang-ho 여기에 마우스를 </b></font></span>
|
결과보기
여기에 마우스를
|
3. 마우스가오면 바탕색이 변해요
<table width=650><tr><td bgcolor=#000000> <p onMouseOver="this.style.backgroundColor='blue'" onMouseOut="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=bmi> 어느듯 가을이 나의 앞뜰에도 성큼 다가 왔군요</A><br> <A href="#" id=cmi> 개인 사정으로인하여 오랬동안 시집에 오지 못햇습니다</A><br></FONT> </body> </html>
|
결과보기
어느듯 가을이 나의 앞뜰에도 성큼 다가 왔군요 개인 사정으로인하여 오랬동안 시집에 오지 못햇습니다
|
위의것도 설명을 드려야할텐데 작성하다보니 글이 너무 길군요. 좀더 고급으로 올라가면 많은 글자효과가 있지만 지면이 모자라 이것으로 마감해야겠어요.
다음까지 안녕히...
|
위로가기 클릭
|