box-shadow 와 text-shadow 의 사용

CSS3 에서 새로 추가된 box-shadow 와 text-shadow 를 알아보자.

그동안 그림자 효과를 주려면 대부분 이미지로 만들어 사용했었다.

하지만 css3 로 접어들면서 box-shadow 와 text-shadow 를 이용해 간단하게 css로 구현할 수 있게 되었다.

사용방법 )

#box {

width:100px;

height:100px;

background-color:rgba(255,100,150,.6);

box-shadow:10px 20px 5px #bbbbbb

}

#text {

text-shadow:1px 2px 2px green

}

box-shadow 와 text-shadow 의 인자값

예 ) box-shadow:1px 2px 3px #000

첫번째 1px 은 그림자의 가로위치

두번째 2px 은 그림자의 세로위치

세번째 3px 은 그림자의 번짐정도

네번째 #000 은 그림자의 색상 (키워드(green), rgb, rgba, 16진수표기(#000 또는 #aabbcc) 사용 가능)

겹쳐서 사용 가능

#text {

text-shadow:1px 2px 2px green, 10px 10px 2px red;

}

이렇게 여러개를 겹쳐서 사용 가능하다.