CSS3 그림자 효과
CSS3 그림자(Shadow) 효과
CSS3에서는 텍스트나 HTML 요소에 간단히 그림자 효과를 적용할 수 있습니다.
CSS3에서 사용할 수 있는 shadow 속성은 다음과 같습니다.
1. text-shadow
2. box-shadow
CSS3 그림자(shadow) 효과 지원 버전
CSS3 그림자(shadow) 효과를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.
또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했습니다.
| 속성 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| text-shadow | 10.0 | 4.0 |
3.5 |
4.0 |
9.5 |
| box-shadow | 9.0 |
10.0 4.0 -webkit- |
4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
text-shadow 속성
text-shadow 속성은 해당 텍스트에 간단히 그림자 효과를 적용해 줍니다.
text-shadow 속성의 문법은 다음과 같습니다.
문법
text-shadow: 그림자의x축값 그림자의y축값 blur값 색상값;
그림자가 시작할 x축과 y축의 상대 위치를 명시하고, 그림자의 흐린 정도를 나타내는 blur 값을 명시합니다.
다음 예제는 CSS3에서 텍스트에 적용할 수 있는 다양한 그림자 효과를 보여주는 예제입니다.
예제
<style>
#shadow_01 { text-shadow: 2px 2px; }
#shadow_02 { text-shadow: 2px 2px orange; }
#shadow_03 { text-shadow: 2px 2px 5px; }
#shadow_04 { text-shadow: 0 0 3px red; }
#shadow_05 { text-shadow: 1px 1px 2px black, 0 0 20px purple, 0 0 5px maroon; }
</style>
box-shadow 속성
box-shadow 속성은 해당 HTML 요소에 간단히 그림자 효과를 적용해 줍니다.
box-shadow 속성의 문법은 text-shadow 속성을 사용하는 문법과 같습니다.
문법
box-shadow: 그림자의x축값 그림자의y축값 blur값 색상값;
그림자가 시작할 x축과 y축의 상대 위치를 명시하고, 그림자의 흐린 정도를 나타내는 blur 값을 명시합니다.
다음 예제는 CSS3에서 HTML 요소에 적용할 수 있는 다양한 그림자 효과를 보여주는 예제입니다.
예제
<style>
#shadow_01 { box-shadow: 5px 5px; }
#shadow_02 { box-shadow: 5px 5px orange; }
#shadow_03 { box-shadow: 5px 5px 10px; }
#shadow_04 { box-shadow: 0 0 15px red; }
#shadow_05 { box-shadow: 5px 5px 10px black, 0 0 15px purple, 0 0 30px maroon; }
</style>
