인터넷 익스플로러 5.5 이상부터는 CSS상에 필터 코드를 삽입하여 이미지에 멋진 특수 효과를 적용할 수가 있다. 지난 시간엔 쉐도우 필터를 이용하는 방법에 대해 살펴 보았다. 이번 시간엔 크로마 필터(chroma filter)를 어떻게 이용하는지 살펴 보도록 하자.
크로마 필터는 객체의 특정 색상을 투명하게 만드는 필터이다. 간단히 예를 들어 아래 원본 이미지에서 #f6cd0c에 해당하는 색상만 투명하게 하면 다음 결과 이미지와 같다.
|
|
|
|
원본 이미지 |
결과 이미지 |
위 결과 이미지는 포토샵에서 #f6cd0c에 해당하는 색상을 투명하게 한 것이 아니라 CSS 코드 상에서 chroma 필터를 이용한 것이다.
위 결과에 대한 소스 코드는 다음과 같다.
|
<style>
#cf{
filter:progid:DXImageTransform.Microsoft.Chroma(color=#f6cd0c)
}
</style>
<img src="http://korea.internet.com/images/photoshop/020220p_01.gif" id="cf"> |
크로마 필터의 다른 예를 살펴 보자. 아래 선택 상자에서 제거하고 싶은 색상을 선택하면 해당 색상이 투명해지는 것을 확인할 수 있을 것이다.
색상:
Chroma 필터 테스트
Tomato
YellowGreen
Gold
#99CCFF
위 결과에 대한 소스 코드는 다음과 같다.
|
<B> 색상:</B>
<SELECT onchange="objDiv.filters.item('DXImageTransform.Microsoft.chroma').color=this.options[this.selectedIndex].value">
<OPTION VALUE="pink">제거할 색상 선택</OPTION>>
<OPTION VALUE="black">Black</OPTION>
<OPTION VALUE="tomato">Tomato</OPTION>
<OPTION VALUE="yellowgreen">Yellow-green</OPTION>
<OPTION VALUE="gold">Gold</OPTION>
<OPTION VALUE="#99CCFF">#99CCFF</OPTION>
<OPTION VALUE="#EFEFEF">#EFEFEF</OPTION>
</SELECT><BR><BR>
<DIV ID="objDiv" STYLE="position:relative; width:240; height: 180;
background: #EFEFEF; padding:5px; font-size:20px; border:3px solid black;
filter: progid:DXImageTransform.Microsoft.chroma(color='') ; color:navy; text-align:center; font-weight:bold ">
Chroma 필터 테스트
<FONT COLOR="black" size="2">
<DIV STYLE="position:relative; top:15; width:95%; height:20px; background:tomato; border:3px solid black; margin:5">Tomato</DIV>
<DIV STYLE="position:relative; top:15; width:95%; height:20px; background:yellowgreen; border:3px solid black;margin:5">YellowGreen</DIV>
<DIV STYLE="position:relative; top:15; width:95%; height:20px; background:gold; border:3px solid black; margin:5">Gold</DIV>
<DIV STYLE="position:relative; top:15; width:95%; height:20px; background:#99CCFF; border:3px solid black;margin:5">#99CCFF</DIV>
</FONT>
</DIV> |
