CSS3에서는 그림자 효과를 손쉽게 구현할 수 있습니다. 요소(박스)에 그림자를 추가하려면 box-shadow 속성을 사용하고, 텍스트에 그림자를 추가하려면 text-shadow 속성을 사용합니다.
주요 속성 살펴보기
1. text-shadow (텍스트 그림자)
텍스트 그림자는 다음 형식으로 지정합니다.
text-shadow: 색상 가로오프셋 세로오프셋 흐림정도(blur);
- 가로 오프셋: 그림자를 좌우로 이동시키는 거리 (양수: 오른쪽, 음수: 왼쪽)
- 세로 오프셋: 그림자를 상하로 이동시키는 거리 (양수: 아래쪽, 음수: 위쪽)
- 흐림 정도: 값이 클수록 그림자가 부드럽게 번집니다.
2. box-shadow (박스 그림자)
박스 그림자 역시 비슷한 형식으로 지정하며, div 같은 블록 요소에 입체감을 부여할 때 유용합니다.
box-shadow: 색상 가로오프셋 세로오프셋 흐림정도(blur);
전체 예제 코드
아래 예제는 h2 요소에는 빨간색 텍스트 그림자를, div 요소에는 보라색 박스 그림자를 적용한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
h2 {
color: rgb(28, 0, 128);
text-shadow: red 2px 4px 2px;
}
div {
color: white;
text-align: center;
width: 150px;
height: 150px;
background-color: red;
box-shadow: rgb(89, 0, 255) 8px 2px 8px;
}
</style>
</head>
<body>
<h1>그림자 효과 예제</h1>
<h2>텍스트 그림자(Text Shadow)</h2>
<div>BOX SHADOW</div>
</body>
</html>실행 결과
위 코드를 실행하면 h2 제목 텍스트 주변에 붉은색의 부드러운 그림자가 나타나고, 빨간색 정사각형 div 요소 오른쪽 아래에는 보라색 박스 그림자가 적용되어 입체적인 느낌을 줍니다.
마무리
box-shadow와 text-shadow 속성만으로도 별도의 이미지 없이 깔끔하고 세련된 그림자 효과를 만들 수 있습니다. 오프셋과 흐림 정도 값을 조절해 다양한 스타일을 시도해 보세요. 여러 개의 그림자를 쉼표로 구분하여 중첩 적용하는 것도 가능합니다.