이미지 특수 효과 : 쉐도우 필터 (CSS 사용)

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

쉐도우 필터는 말 그대로 객체에 음영 효과를 주는 필터이다. 이 필터를 통해 음영 크기 및 방향을 조절할 수 있다. 실제 예를 먼저 살펴 보도록 하자.

원본 이미지	결과 이미지

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

<style> #sf{ filter:progid:DXImageTransform.Microsoft.Shadow(color='gray', Direction=135, Strength=5) } </style> <img src="/images/photoshop/011126p_01.gif" id="sf">

위 Shadow() 필터 함수 내에는 각종 쉐도우 필터와 관련한 속성들을 삽입할 수 있는데, color는 음영색을, Direction은 음영의 방향을, Strength는 음영의 크기를 나타낸다.

이 쉐도우 필터 역시 다른 필터와 마찬가지로 이미지 객체만이 아니라 일반 텍스트에도 다음과 같이 적용할 수가 있다.

korea.internet.com

<div style="filter:progid:DXImageTransform.Microsoft.Shadow(color='gray', Direction=135, Strength=3); font:bold 20px verdana;width:100%">korea.internet.com</div>

이 필터를 이용하면 그림자 있는 글상자를 쉽게 만들 수 있다. 이미 지난 시간에 DIV와 스타일 속성을 이용하여 그림자 있는 글상자를 쉽게 만드는 방법에 대해 살펴본 적이 있는데 이번 시간에 배운 이 필터를 이용해서도 쉽게 만들 수 있다. 물론 인터넷 익스플로러 5.5 이상을 사용한다는 전제가 있어야 하지만 말이다.

◆ 쉐도우 필터를 이용한 그림자 있는 글상자 만들기

 

<그림자 있는 글상자>

쉐도우 필터를 이용한
그림자 있는 글상자입니다!
인터넷 익스플로러 5.5
이상에서만 동작합니다!
쉽게 만들 수 있습니다.

 

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

<DIV STYLE="width:240px; height:180px; padding:20px; border:1px solid black; filter:progid:DXImageTransform.Microsoft.shadow(color='#666666', Direction=135,  Strength=4);background-color:white;"> <p><b><font color="#D03636"><그림자 있는 글상자></font></b></p> <p>쉐도우 필터를 이용한<br> 그림자 있는 글상자입니다!<br> 인터넷 익스플로러 5.5<br> 이상에서만 동작합니다!<br> 쉽게 만들 수 있습니다. </DIV>

위 소스코드에서 background-color:white로 준 부분을 주목하기 바란다. 이렇게 한 이유는 글상자만 그림자를 주기 위해서이다. 만일 텍스트까지 음영을 주려면 배경색은 제거해야 한다.