CSS3에서 이미지에 그림자(드롭 섀도우) 효과를 추가하려면 filter 속성의 drop-shadow() 값을 사용합니다. 이 함수는 아래와 같은 다섯 가지 값을 받을 수 있습니다.
drop-shadow() 주요 값
- h-shadow – 가로 방향 그림자의 위치를 픽셀(px) 값으로 지정합니다.
- v-shadow – 세로 방향 그림자의 위치를 픽셀(px) 값으로 지정합니다. 음수 값을 입력하면 그림자가 이미지 위쪽에 생성됩니다.
- blur – 그림자에 흐림(blur) 효과를 추가하여 부드러운 느낌을 줍니다.
- spread – 양수 값은 그림자를 확장하고, 음수 값은 그림자를 축소합니다.
- color – 그림자의 색상을 지정합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
filter: drop-shadow(10px 10px 10px green);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>위 예제에서는 demo 클래스가 적용된 두 번째 이미지에 drop-shadow(10px 10px 10px green) 스타일이 적용됩니다. 이 설정은 그림자를 오른쪽으로 10px, 아래로 10px 이동시키고, 10px 크기의 흐림 효과를 더한 뒤 초록색(green)으로 채웁니다. 첫 번째 이미지에는 필터가 적용되지 않아 두 이미지를 나란히 비교해 볼 수 있습니다.
실행 결과
실행 결과를 보면 일반 이미지와 달리 drop-shadow 필터가 적용된 이미지 뒤에 초록색 그림자가 나타나는 것을 확인할 수 있습니다. blur 값과 spread 값을 조절하면 그림자의 부드러움과 크기를 자유롭게 변경할 수 있으며, color 값을 바꿔 원하는 분위기의 그림자를 연출할 수 있습니다.