CSS의 섀도우(Shadow) 필터는 지정한 방향과 색상에 따라 부드럽게 번지는 그림자 효과를 만들어 주는 필터입니다. 이미지나 텍스트 요소에 입체감을 더하고 싶을 때 유용하게 활용할 수 있습니다.
섀도우 필터의 주요 매개변수
섀도우 필터에서 사용할 수 있는 매개변수는 다음과 같습니다.
| 매개변수 | 설명 |
|---|---|
| Color | 그림자에 적용할 색상을 지정합니다. |
| Direction | 그림자가 번지는 방향을 시계 방향 기준으로 설정하며, 45도 단위로 지정할 수 있습니다. 기본값은 270(왼쪽)입니다. 0 = 위 45 = 오른쪽 위 90 = 오른쪽 135 = 오른쪽 아래 180 = 아래 225 = 왼쪽 아래 270 = 왼쪽 315 = 왼쪽 위 |
예제
다음 코드를 실행하면 섀도우 필터가 실제로 어떻게 적용되는지 확인할 수 있습니다.
<html> <head> </head> <body> <img src="/css/images/logo.png" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)"> <p>텍스트 예제:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials</div> </body> </html>
참고 사항
위 예제에서는 Shadow(Color=#00FF00, Direction=225)처럼 그림자 색상을 초록색(#00FF00)으로, 방향을 225도(왼쪽 아래)로 지정했습니다. 텍스트 예제에서는 파란색(#0000FF) 그림자가 같은 방향으로 적용되었습니다.
다만 이러한 filter 속성 기반의 섀도우 필터는 구버전 인터넷 익스플로러(IE)에서 주로 동작하던 레거시 기능입니다. 최신 브라우저 환경에서는 box-shadow, text-shadow 같은 표준 CSS 속성을 사용하는 것이 좋습니다.