HTML - Fiter 효과

필터(filter)에 대한 이야기를 하고자 합니다.
이것은 익스플로러 4.0 이상에서만 적용되지만 그래픽편집 프로그램에서만 볼 수 있는 특수한 효과를 아주 쉽게 구현할 수 있다는 점에서 배워두면 꽤 유용하게 사용할 수 있을 것 같군요. 그리고 필터를 인식하지 못하는 브라우저라도 에러가 나는 것은 아니니까 가슴 졸이며 사용할 필요는 없습니다...

포토샵이나 페인트샵을 사용해본 분들은 필터에 대해 들어본 적이 있을 겁니다.
웹 문서에서 필터란 이미지나 다른 HTML 요소에 다양한 효과를 주기위해 사용되는데 이를 이용하면 갖가지 흥미로운 효과를 얻을 수 있습니다. 익스플로러 4.0에서 제공되는 필터는 모두 17가지로 아래와 같습니다.

alpha	blendTrans	blur	chroma	dropShadow	flipH	flipV	glow	gray	invert
light	mask	redirect	revealTrans	shadow	wave	xray

* 위의 필터 중 blendTrans와 revealTrans는 transition(변환) 효과와 관련 있습니다

 

필터는 일반적으로 BODY, DIV, IMG, INPUT, MARQUEE, SPAN, TABLE, TD, TEXTAREA, TH 태그에서 사용될 수 있습니다. (단 dropShadow는 DIV, MARQUEE, SPAN, TABLE, TD, TH에만 적용됨)

 

속성(properties)	설 명
opacity(불투명도)	기본값(default)은 100이며 0(완전히 투명한 경우)에서 100(완전히 불투명한 경우)까지의 값을 가집니다.
style	불투명도 증감 모양을 지정합니다. 0(기본값)에서 3까지의 값을 가지며, 0은 단일(uniform), 1은 선형(linear), 2는 방사형(radial), 3은 직사각형(rectangular) 모양으로 불투명도가 증감합니다
finishOpacity	이 속성에 지정된 값에 이르면 불투명도 증감을 마치게 됩니다. 이것은 style 속성값이 1,2,3 일 때만 적용되며 0(기본값)에서 100까지의 값을 가집니다.
startX / startY (finishX / finishY)	불투명도 증감 시작(끝) x,y 좌표를 지정합니다. 그런데 style 속성값이 1,2,3 일 때 적용된다는 MS측의 설명과는 달리 style=1을 제외하고는 제대로 적용이 되지 않는 것 같습니다. 이것은 필터가 적용되는 대상의 % 값으로 예를 들어 startX=30 이면 가로 30%지점이 증감의 시작점이 됩니다.

http://msdn.microsoft.com/workshop/author/filter/reference/reference.asp