이미지 특수 효과 : 알파 필터 (CSS 사용)

인터넷 익스플로러 5.5 이상부터는 CSS상에 필터 코드를 삽입하여 이미지에 멋진 특수 효과를 적용할 수가 있다. 지난 시간엔 모션 블러 필터를 이용하는 방법에 대해 살펴 보았다. 이번 시간엔 알파 필터(alpha filter)를 어떻게 이용하는지 살펴 보도록 하자.

알파 필터는 해당 필터를 적용하려는 객체의 투명도를 조절하는 필터이다. 쉽게 감을 잡기 위해 간단한 예제를 살펴 보자.

원본 이미지	결과 이미지

위 결과 이미지를 보면 마치 포토샵에서 이미지에 opacity(투명도) 값을 줄인 것과 같은 효과를 보여 준다. 위 결과 이미지는 포토샵에서 opacity를 조절한 것이 아니라 CSS 코드 상에서 alpha 필터를 이용하여 투명도를 줄인 것이다.

위 결과에 대한 소스 코드는 다음과 같다.

<style> #af{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30) } </style> <img src="http://korea.internet.com/images/photoshop/020116p_01.jpg" id="af">

이번엔 좀 더 이 알파 필터를 응용해 보도록 하자. 다음 결과를 보기 바란다.

원본 이미지	결과 이미지

위 결과에 대한 소스 코드는 다음과 같다.

<style> #af1{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50, FinishOpacity=0, Style=2) } </style> <img src="http://korea.internet.com/images/photoshop/011126p_01.gif" id="af1">

위 Alpha() 함수 내에는 각종 알파 필터와 관련된 속성들을 삽입할 수 있는데, Style은 투명도를 어떤 스타일로 적용시킬지를 알려주는 속성이다. Style은 디폴트가 0으로 전체적으로 균일하게 투명도를 적용시키는 것이고, 1이면 리니어(linear)하게, 2면 원형(radial)으로, 3이면 사각형 형태로 투명도를 적용한다. 이 스타일 속성에 따라 사용할 수 있는 다른 속성들이 있는데 Style이 2일 경우 FinishOpacity를 사용할 수가 있다.  FinishOpacity는 투명도를 스타일에 따라 적용시켜 나갈 때 마지막 부분의 투명도를 어떻게 할 것인지를 결정해 준다. 여기서는 FinishOpacity를 0으로 설정했으므로 실제로는 원본 사진이 사각형임에도 이 필터를 적용함으로써 원형의 사진인 것처럼 보이게 할 수가 있다.

이번엔 알파 필터의 Style을 3으로 변경해 보자.

원본 이미지	결과 이미지

위 결과에 대한 소스 코드는 다음과 같다.

<style> #af2{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40, FinishOpacity=0, Style=3) } </style> <img src="http://korea.internet.com/images/photoshop/011126p_01.gif" id="af2">

이 필터를 어디까지 적용해볼 수 있을까? 이런 필터를 사용할 때 대부분의 사람들은 이미지에만 적용하는 것으로 생각하지만 지난 시간에 배웠던 모션 블러도 그렇고 이번 시간에 배우고 있는 알파 필터도 그렇고 이미지가 아닌 다른 객체에도 얼마든지 적용할 수가 있다. 그 예를 보도록 하자. 다음은 버튼에 알파 필터를 적용한 예이다.

원본 객체 요소	결과 객체 요소

위 결과에 대한 소스 코드는 다음과 같다.

<style> INPUT.af3{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50, FinishOpacity=0, Style=2) } </style> <input type="button" value="알파테스트" class="af3">

위의 결과를 보면서 예측할 수 있겠지만 스타일을 적용할 수 있는 곳에는 이 알파 채널을 거의 모두 적용할 수 있으므로 상상하기에 따라 다양한 효과를 만들어 낼 수 있을 것이다.