css - 비쥬얼 필터 이해하기

<head>
<script type="text/javascript">
function init(direction) {
  if (direction > 270) {
          direction = 0;
      }
      else {
          direction += 30;
      }
      document.all.shadowText.style.filter = "shadow(color=#000000, direction=" + direction + ")";
      setTimeout("init(" + direction + ")", 100);
  }
</script >
<script type="text/javascript">
<!--

count = 0
function expandText(which, start, finish, step, speed) { 
      
      if (count!=1) {
          document.all(which).style.visibility = "visible" 
          if (start < finish) {      	   
              document.all(which).style.letterSpacing = start + "px";  
	      start = start + step; 
	      setTimeout("expandText('"+which+"',"+start+","+finish+","+step+","+speed+")",speed);
          }	       
         

      }
}
//-->
</script>
<style type="text/css">
  .example {
            width: 150; 
            height: 70;
            line-height:50pt;
            font-size: 40pt; 
            font-family: "Arial Black";
            color: #494910
           } 

  .subject {
           Filter: glow(color=#ffcc00) dropshadow(color=#BDBE92);
           line-height:25pt;
           width: 100%; 
           font-family: arial; 
           color: #503F2F
          }  
body {  font-family: "Tahoma", "굴림"; font-size: 9pt; line-height: 16pt; color: #2f6f75; text-decoration: none; text-align: justify}
</style>
</head>
<body  ONLOAD="init(20, 20, 1)">

Example 1

Text is spread

위의 텍스트에 마우스를 올려보세요. Glow filter랑 Dropshadow filer를 적용하고 자바스크립트로 expand효과를 주었습니다. 요런 css필터효과는 cgi에 적용하면 입력한 값에 따라 바로바로 적용할 수가 있어 꽤 괜찮은 효과를 냅니다. 익스4이상에서만 제대로 보이지만, 넷스4에서는 그냥 일반텍스트로 나타나므로 별 문제는 없는 듯. ^^; Example 2 shadow filter와 자바스크립트를 이용해서 그림자에다 에니메이션 효과를 주는 예 입니다. 일반 그래픽 프로그램으로는 이런 이미지 파일은 좀 만들기가 버겁지 않나 생각됩니다.

Animation Shadow

Filters 일반적으로 css 필터는 style="Filter:필터명(필터속성)"으로 정의하면 됩니다. 한번에 두세가지 필터를 동시에 적용할 수도 있고, 텍스트뿐만아니라 이미지에도 적용이 가능합니다. 백문이 불여일견.. --;; 자세한 활용예는 아래에서 직접 보시고, 이곳에 있는 필터들을 바탕으로 다양하게 응용해 보시기 바랍니다. 백견이 불여일행.. --;;

style="Filter: Blur(Add = 1, Direction = 225, Strength = 4)"
Blur

: style="Filter: DropShadow(color=#777777, offX=3, offY=3, positive=0)"
DropShadow

: style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)"
Alpha

style="Filter: shadow(color=#333333,direction=135)"
shadow

style="Filter: glow(color=#ffcc00,strength=5)"
Glow

style="Filter: Wave(Add=0, Freq=2, LightStrength=10, Phase=10, Strength=5)"
Wave

style="Filter: Gray()"
Gray

style="Filter: FlipV()"
FlipV

style="Filter: FlipH()"
FlipH

출처 : xpert.new21.net

Firejune

The Web is still changing.

28 2005/07 비쥬얼 필터 이해하기

Comments

Your Reaction Time!