CSS 드롭 섀도우(Drop Shadow)란?
드롭 섀도우는 지정한 X(가로)·Y(세로) 오프셋과 색상을 기준으로 객체에 그림자 효과를 만들어 주는 CSS 필터입니다. 이미지나 텍스트 뒤에 입체적인 깊이감을 더하고 싶을 때 유용하게 활용할 수 있습니다.
사용할 수 있는 매개변수
Drop Shadow 필터에서 사용할 수 있는 매개변수는 다음과 같습니다.
| 매개변수 |
설명 |
|---|---|
| color | 그림자의 색상입니다. #RRGGBB 형식으로 지정합니다. |
| offX | x축 방향으로 객체에서 그림자가 떨어진 거리(픽셀)입니다. 양수는 그림자를 오른쪽으로, 음수는 왼쪽으로 이동시킵니다. |
| offY | y축 방향으로 객체에서 그림자가 떨어진 거리(픽셀)입니다. 양수는 그림자를 아래쪽으로, 음수는 위쪽으로 이동시킵니다. |
| positive | true이면 객체의 불투명한 픽셀 전체에 그림자가 생성되고, false이면 투명한 픽셀에 그림자가 생성됩니다. 기본값은 true입니다. |
예제
아래 코드를 실행하면 이미지와 텍스트에 드롭 섀도우 효과를 적용해 볼 수 있습니다.
<html> <head></head> <body> <img src = "/css/images/logo.png" alt = "CSS Logo" style = "Filter: Chroma(Color = #000000) DropShadow(Color = #FF0000, OffX = 2, OffY = 2, Positive = 1)"> <p>Text Example:</p> <div style = "width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: DropShadow(Color = #000000, OffX = 2, OffY = 2, Positive = 1)">CSS Tutorials</div> </body> </html>
참고: 최신 CSS에서의 그림자 효과
위 예제의 Filter: DropShadow()는 구버전 Internet Explorer에서만 지원되던 비표준 속성입니다. 현재 대부분의 브라우저에서는 표준 filter: drop-shadow() 함수 또는 box-shadow 속성을 사용하는 것이 좋습니다. 예를 들어 filter: drop-shadow(2px 2px 4px #FF0000);처럼 한 줄로 간결하게 그림자를 지정할 수 있습니다.