CSS 입문 | CSS3 모듈 | CSS3 그림자 효과
CSS3 그림자 효과
CSS3에서는 텍스트나 HTML 요소에 간단히 그림자 효과를 적용할 수 있다.
CSS3에서 사용할 수 있는 shadow 속성은 다음과 같다.
- text-shadow
- box-shadow
CSS3 그림자(shadow) 효과 지원 버전
CSS3 그림자(shadow) 효과를 지원하는 주요 웹 브라우저의 버전은 다음과 같다. 또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.
속성 | ie | chrome | firefox | safari | opera |
---|---|---|---|---|---|
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>
최종 수정 : 2021-08-27