이미지 특수 효과 : 모션 블러 (CSS 사용)

인터넷 익스플로러 5.5 이상부터는 CSS상에 필터 코드를 삽입하여 이미지에 멋진 특수 효과를 적용할 수가 있다. 이 중 이번 시간엔 포토샵과 같은 그래픽 툴에서 많이 사용하는 모션 블러(motion blur) 기법을 단 1~2줄의 코드로 구현해 보도록 하자.

아래 원본 이미지와 모션 블러 필터를 적용한 예를 살펴 보기 바란다.

원본 이미지	결과 이미지

위 결과 이미지를 보면 마치 포토샵에서 이미지 효과를 준 것 같지만 전혀 그게 아니다. 위의 결과 이미지에 대한 소스 코드는 다음과 같다.

<style> #mb{ filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=30,Direction=90) } </style> <img src="http://korea.internet.com/images/photoshop/020116p_01.jpg" id="mb">

인터넷 익스플로러 5.5 이상에서부터 지원하기 시작한 필터 효과를 적용하려면 filter:progid:DXImageTransform.Microsoft.(필터이름)을 스타일 클래스 안에 사용하면 된다. 위의 <img> 태그를 보면 알겠지만 해당 필터를 적용하기 위해 스타일 ID(여기서는 id="mb")를 참조하고 있다. 이렇게 참조함으로써 이미지는 원본 이미지와 동일하지만 그 결과는 필터가 적용되어 보인다. 위의 코드에서 strength는 블러(blur)의 강도로 0 이상의 값을 가진다. direction은 모션(motion)의 방향을 나타내며 0~360 사이의 값을 가진다.

또 다른 예 하나를 더 살펴 보자.

원본 이미지	결과 이미지

물론 이 필터 효과는 프로그래밍적으로 얼마든지 제어가 가능하다. 하지만 그러려면 자바스크립트를 이용해야 하므로 여기서는 다루지 않고 추후 자바스크립트 카테고리에서 다루도록 하겠다.

이 외에도 적용할 수 있는 필터의 종류는 여러 가지가 있다. 추후 하나씩 그 효과에 대해 살펴보도록 하자