[ html / css ] 그림자효과 (box-shadow)

 

box-shadow

css 중에 박스에 그림자 효과를 주는 css 가 있습니다.
box-shadow 라는 그림자를 만들때 사용하는데요,

box-shadow 기능이 있기 이전에는, 그림자효과를 위해
이미지로 저장하고 백그라운드를 깔아서 사용했는데요 
CSS3에서 box-shadow를 사용해서 간잔하데 해결 할 수 있게 되었답니다!
box-shadow 의 속성값은 5개 입니다.

box-shadow :   x-offeset  y-offeset       blur         spread          color
                 x축(좌우)     y축(상하)   번짐정도  그림자 확산거리     색

x-offeset : 수평방향(x축)의 그림자 오프셋 길이를 나타냅니다.
양수값을 지정하면 오른쪽에 음수값을 지정하면 왼쪽에 그림자가 생깁니다.
y-offeset :  수직방향(y축) 의 그림자 오프셋 길이를 나타냅니다.
양수값을 지정하면 박스 아래에 그림자가 생기고 음수값을 지정하면 박스 위에 생깁니다.
blur radius : 그림자의 흐림 반경을 나타냅니다. 음수값지정 불가, 값이 클수록 그림자의 끝이 흐려지고 값이 0 이면 그림자끝이 선명한 그림자가 됩니다.
spread distance : 그림자의 확산거리를 나타냅니다. 양수값을 지정하면 그림자의 전방위로 확대되고 음수값을 지정하면 그림자의 크기가 줄어듭니다.
color : 그림자의 색상을 지정합니다. rgba 방식 가능