CSS에서 요소에 그림자를 추가하려면 box-shadow 속성을 사용합니다. 이 속성을 활용하면 버튼, 카드, 제목 등 다양한 요소에 입체적인 그림자 효과를 손쉽게 적용할 수 있습니다.
box-shadow 속성의 기본 문법
box-shadow 속성은 기본적으로 다음과 같은 형태로 사용됩니다.
box-shadow: offset-x offset-y blur-radius spread-radius color;
- offset-x: 그림자의 가로 방향 거리 (양수는 오른쪽, 음수는 왼쪽)
- offset-y: 그림자의 세로 방향 거리 (양수는 아래쪽, 음수는 위쪽)
- blur-radius: 그림자의 흐림 정도 (선택 사항)
- spread-radius: 그림자의 확장 크기 (선택 사항)
- color: 그림자 색상 (선택 사항)
예제 코드
다음 예제는 h2 요소에 box-shadow 속성을 적용하여 그림자 효과를 구현한 코드입니다. 직접 실행해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
box-shadow: 10px 10px;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<h2>Heading Two</h2>
<p>위 제목에는 그림자가 적용되어 있습니다.</p>
</body>
</html>실행 결과
위 코드를 실행하면 노란색 배경의 h2 제목 오른쪽 아래에 검은색 그림자가 나타납니다. 여기서 10px 10px은 각각 가로와 세로 방향으로 10px씩 떨어진 위치에 그림자를 생성한다는 의미입니다.
그림자에 흐림 효과 추가하기
그림자를 더 부드럽게 만들고 싶다면 blur-radius 값을 추가할 수 있습니다.
h2 {
box-shadow: 10px 10px 5px gray;
}이렇게 하면 회색의 부드러운 그림자가 적용되어 더욱 자연스러운 입체 효과를 얻을 수 있습니다.