CSS 입문 | CSS3 모듈 | CSS3 그림자 효과

CSS3 그림자 효과

CSS3에서는 텍스트나 HTML 요소에 간단히 그림자 효과를 적용할 수 있다.

CSS3에서 사용할 수 있는 shadow 속성은 다음과 같다.

1. text-shadow
2. box-shadow

CSS3 그림자(shadow) 효과 지원 버전

CSS3 그림자(shadow) 효과를 지원하는 주요 웹 브라우저의 버전은 다음과 같다. 또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.

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>