[CSS3] 배너에 그림자를 입히는 원리①

※ 발췌 : 따라하면서 배우는 HTML5 + CSS3 + jQuery + JavaScript 실무활용 14가지 - 위키북스

배너에 그림자를 입히기에 앞서서 box-shadow에 대해서먼저 살펴보겠습니다.

box-shadow properties

속성값	설명
h-shadow	그림자의 수평거리(입력한 만큼 떨어져 위치) 음수 양수 모두 가능
v-shadow	그림자의 수직거리(입력한 만큼 떨어져 위치) 음수 양수 모두 가능
blur	그림자의 경계의 흐림 정도
spread	그림자의 확장거리(그림자를 배너보다 크거나 작게 만든다)음수 양수 모두 가능
color	그림자의 색상(16진수 외에 rgba, hsla로도 가능-투명도 조절할 수 있음)
inset	내부그림자(inner-shadow와 같음) 적용

①수평거리 3px | 수직거리 3px | blur 5px | 색상 #777

#shadow1 {
-webkit-box-shadow:3px 3px 5px #777;
-ms-box-shadow:3px 3px 5px #777;
-moz-box-shadow:3px 3px 5px #777;
-box-shadow:3px 3px 5px #777;
}

②수평거리 3px | 수직거리 5px | blur 5px | 그림자확장 6px | 색상 #777

#shadow2 {
-webkit-box-shadow:3px 3px 5px 6px #777;
-ms-box-shadow:3px 3px 5px 6px #777;
-moz-box-shadow:3px 3px 5px 6px #777;
-box-shadow:3px 3px 5px 6px #777;
}

③inset 내부그림자 | 수평거리 0 | 수직거리 0 | blur 10px | 색상 #000

#shadow2 {
-webkit-box-shadow:inset 0px 0px 10px #000;
-ms-box-shadow:inset 0px 0px 10px #000;
-moz-box-shadow:inset 0px 0px 10px #000;
-box-shadow:inset 0px 0px 10px #000;
}

④수평거리 0 | 수직거리 8px | blur 6px | 그림자확장 -6px | 색상 #000

#shadow2 {
-webkit-box-shadow:0px 8px 6px -6px #000;
-ms-box-shadow:0px 8px 6px -6px #000;
-moz-box-shadow:0px 8px 6px -6px #000;
-box-shadow:0px 8px 6px -6px #000;
}