Shadow 필터는 지정한 방향과 색상으로 감쇠된(attenuated) 그림자를 만들 때 사용됩니다. 요소의 뒤쪽에 부드럽게 번지는 그림자를 생성하여 입체감을 더해 줍니다.
Shadow 필터의 매개변수
Shadow 필터에서 사용할 수 있는 매개변수는 다음과 같습니다.
| 번호 | 매개변수 및 설명 |
|---|---|
| 1 | Color (색상) 그림자에 적용할 색상을 지정합니다. |
| 2 | Direction (방향) 흐림(blur)이 번지는 방향을 시계 방향 기준으로 지정하며, 45도 단위로 반올림됩니다. 기본값은 270(왼쪽)입니다. 0 = 위 45 = 오른쪽 위 90 = 오른쪽 135 = 오른쪽 아래 180 = 아래 225 = 왼쪽 아래 270 = 왼쪽 315 = 왼쪽 위 |
사용 예제
다음 코드를 실행하면 Shadow 필터가 이미지와 텍스트에 어떻게 적용되는지 확인할 수 있습니다.
<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 필터는 과거 인터넷 익스플로러(IE)에서만 지원되던 비표준 속성으로, 현재 대부분의 최신 브라우저에서는 동작하지 않습니다. 현대적인 웹 개발에서는 표준 CSS 속성인 box-shadow(요소 박스용) 또는 text-shadow(텍스트용)를 사용하는 것이 좋습니다.