..

Search

45) CSS3 그림자 효과

CSS3 그림자 효과


 

CSS3 그림자(Shadow) 효과

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

 

 

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

 

1. text-shadow

2. 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>

코딩연습 ▶


연습문제