°³Ã¼¿¡ Àû¿ëµÈ ÇÊÅÍ(filter)³ª ÇÊÅ͵éÀÇ Ä÷º¼Ç(filters)À» ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.

Àμö
cssSelector : (½ºÅ¸ÀÏ ¼±ÅÃÀÚ)
¼Ó¼ºÀ» °¡Áú¼ö ÀÖ´Â ¿¤·¹¸àÆ®()³ª Ŭ¶ó½º(class) À̸§ ȤÀº ÀνÄÀÚ(id)ÀÌ´Ù.

: (¼Ó¼º ¹®ÀÚ¿­)
½ºÅ¸ÀÏ ¼Ó¼ºÀº °³Ã¼¿¡ Àû¿ëµÈ ÇÊÅÍ(filter)³ª ÇÊÅ͵éÀÇ Ä÷º¼Ç(filters)À» ³ªÅ¸³»´Â ¹®ÀÚ¿­ÀÌ´Ù.

filtertype1 (parameter1, parameter2,...) µî·ÏµÈ ÇÊÅÍÀÌ´Ù.
filtertype2 (parameter1, parameter2,...) µî·ÏµÈ ÇÊÅÍÀÌ´Ù.

ÀÌ ¼Ó¼ºÀº Àбâ/¾²±âÀÌ¸ç µðÆúÆ®°ªÀº ¾ø´Ù.

CSS(Cascading Style Sheets) ¾ÖÆ®¸®ºäÆ®´Â »ó¼ÓµÇÁö ¾Ê´Â´Ù.

Ư±â

ÇÊÆ®°¡ Ç¥ÇöµÇ±â À§Çؼ­´Â °³Ã¼´Â ¹èÄ¡(layout)¸¦ °¡Á®¿© ÇÑ´Ù. ¹èÄ¡¸¦ °®°ÔÇϱâ À§ÇÑ °£´ÜÇÑ ¹æ¹ýÀº ¿¤·¹¸àÆ®¿¡ height ȤÀº/°ú width ¼Ó¼ºÀ» ¼³Á¤ÇÏ´Â °ÍÀÌ´Ù. ´Ù¸¥ ¹æ½ÄÀ¸·Î ¿¤·¹¸àÆ®°¡ ¹èÄ¡¸¦ °®°ÔÇÏ´Â ¹æ¹ýµéÀÌ ÀÖ´Ù. Ãß°¡ÀûÀÎ Á¤º¸´Â hasLayout ¼Ó¼ºÀ» ÂüÁ¶Ç϶ó.

¿¹¸¦µé¾î À̹ÌÁö ¸ðü °³Ã¼¿¡ ÇÊÅ͸¦ ¼³Á¤ÇϹǷμ­ img °³Ã¼¿¡ Shadow ÇÊÅ͸¦ Àû¿ëÇÒ ¼ö ÀÖ´Ù.

ÀÌ ¼Ó¼ºÀº Macintosh Ç÷§Å©Æû¿¡¼­´Â Áö¿øµÇÁö ¾Ê´Â´Ù.

Àû¿ë
°³Ã¼scriptCSS IE ¹öÀü
Âü°í
filter ¸ñ·Ï

ÀÌ ¼Ó¼ºÀº CSS(Cascading Style Sheets)ÀÇ ºÎºÐ¿¡ Æ÷ÇÔ½Ãų °ÍÀÌ Á¦¾ÈµÇ¾ú´Ù.



<IMG id="imgObj" src="../../gif/flower.jpg" style="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=150)
  progid:DXImageTransform.Microsoft.BasicImage(mirror=2)" width="300px" border="0">
<BR>
<SCRIPT>
str='imgObj.filters.length='+imgObj.filters.length+'<BR>';
str+=imgObj.style.filter+'<BR>';
document.write(str)
</SCRIPT>

À̹ÌÁö¸¦ Ŭ¸¯Çغ¸¶ó.

<SCRIPT>
function doFilter(){
  filterFrom.filters.item(0).Apply();
  filterFrom.filters.item(0).Transition=12;
  imgOne.style.visibility='hidden';
  filterTo.style.visibility='';
  filterFrom.filters.item(0).play(10);
}
</SCRIPT>
<DIV id="filterFrom" onClick="doFilter()" style="position:absolute;width:300px;height:225px;filter:revealTrans()">
<IMG id="imgOne" style="position:absolute;width:300" src="../../gif/flower1.jpg">
<DIV id="filterTo" style="position:absolute;background:white;visibility:hidden;"></DIV>
</DIV>
<BUTTON style="position:relative"
  onclick="imgOne.style.visibility='';filterTo.style.visibility='hidden';doFilter()">´Ù½Ã ½ÃÀÛ</BUTTON>