BOX-SHADOW
In Korean
CSS3의 box-shadow 속성은 박스에 하나 이상의 그림자를
줄 수 있게 합니다.
바깥 쪽(outer) 그림자 뿐 아니라 안 쪽(inner) 그림자도 줄 수 있습니다.
바깥 쪽 box-shadow는 박스가 불투명한 것과 같이 그림자를 그립니다.
그림자는 border의 바깥쪽에만 그려집니다.
안 쪽 box-shadow는 박스 바깥쪽이 불투명한 것과 같이 그림자를 그립니다.
그림자는 padding영역 안쪽에만 그려집니다.
브라우저 지원
브라우저
Firefox 3.6
Firefox 4
Safari 5
Chrome 10
IE 9
Opera 11
지원하는 문법
-moz-box-shadow
box-shadow
-webkit-box-shadow
box-shadow
box-shadow
box-shadow
box-shadow 문법
Box-shadow는 색상을 위한 4개의 길이 값과
옵션인 “inset” 키워드를 허용합니다.
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}
길이 값은 상대단위 값과 절대단위 값을
모두 사용 할 수 있습니다.
p { box-shadow: 1em 1em 1em #000; }
p { box-shadow: 2ex 2em 2em #000; }
p { box-shadow: 3px 3px 3px #000; }
p { box-shadow: 4in 4in 4in #000; }
p { box-shadow: 5cm 5cm 5cm #000; }
p { box-shadow: 6mm 6mm 6mm #000; }
p { box-shadow: 7pt 7pt 7pt #000; }
p { box-shadow: 8pc 8pc 8pc #000; }
수평 거리
그림자의 수평 거리는 첫 번째 항목에서 지정 합니다.
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}
수평 거리
정수 값을 사용할 경우 그림자는 박스의 오른쪽에 위치하게 됩니다.
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}
Box 정수 수평 값의 box-shadow
음수 값을 사용할 경우 그림자는 박스의 왼쪽에 위치하게 됩니다.
.test
{
box-shadow: -10px 10px 5px 5px #000 inset;
}
Box
음수 수평 값의 box-shadow
수직 거리
그림자의 수직 거리는 두 번째 항목에서 지정 합니다.
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}
수직 거리
정수 값을 사용할 경우 그림자는 박스의 아래쪽에 위치하게 됩니다.
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}
Box 정수 수직 값의 box-shadow
음수 값을 사용할 경우 그림자는 박스의 위쪽에 위치하게 됩니다.
.test
{
box-shadow: 10px -10px 5px 5px #000 inset;
}
Box 음수 수직 값의 box-shadow
흐림(blur) 정도 값
흐림 정도 값은 세 번째 항목에서 지정 합니다.
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}
흐림 정도 값
흐림 정도 값을 “0” 으로 준다면 단단한 테두리를 갖게 됩니다.
.test
{
box-shadow: 10px 10px 0 5px #000 inset;
}
Box 단단한 테두리의 box-shadow
흐림 정도 값을 높이면, 부드럽게 번지는 테두리를 갖게 됩니다.
.test
{
box-shadow: 10px 10px 10px 5px #000 inset;
}
Box 부드러운 box-shadow
흐림 정도 값에서는 음수 값의 사용이 불가합니다.
.test
{
box-shadow: -10px -10px 5px -5px #000 inset;
}
확장 거리 (Spread distance)
확장 거리 값은 네 번째 항목에서 지정 합니다.
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}
확장 거리
정수 값은 그림자를 모든 방향으로 확장되어 보이게 합니다.
(그래서 그림자는 박스보다 더 크게 보입니다.)
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}
Box
정수 확장거리 값의 spread
음수 값은 그림자를 모든 방향으로 축소되어 보이게 합니다.
(그래서 그림자는 박스보다 더 작게 보입니다.)
.test
{
box-shadow: 10px 10px 5px -5px #000 inset;
}
Box
음수 확장거리 값의 spread
색
색은 다양한 다양한 방법으로 사용 할 수 있습니다.
• 키워드
• 6자리 16진수 표기 • 3자리 16진수 표기
• RGB/RGBA 숫자형 표기 • RGB/RGBA 퍼센트 표기
• HSL/HSLA
Inset 키워드
“inset” 키워드가 있는 경우, 브라우저는 박스 안쪽에 그림자를 그릴 것 입니다.
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}
필수 값과 옵션 값
Box-shadow는 2개의 거리값이 꼭 존재해야 합니다. 흐림정도, 확장거리, 그림자 색상과
inset 키워드는 옵션입니다.
.test
{
box-shadow: 10px 10px 5px -5px #000 inset;
}
필수 옵션
흐림 정도 값이 지정되지 않았을 때는 브라우저가 값을 ‘0’으로 추정하여
단단한 그림자를 그립니다.
.test
{
box-shadow: 10px 10px ? -5px #000 inset;
}
지정되지 않은 경우 0값 적용
확장 거리 값이 지정되지 않았을 때는 브라우저가 값을 ‘0’으로 추정하여 같은 크기의 그림자를 그립니다.
.test
{
box-shadow: 10px 10px 5px ? #000 inset;
}
지정되지 않은 경우 0값 적용
색 값이 지정되지 않았을 때는 브라우저 기본 값이 적용될 것입니다. 대부분의
브라우저는 텍스트의 색 값을 사용합니다.
Safari 5.0 와 Chrome 9.0 은 색상 값을 사용하지 않으면 그림자를 그리지 않습니다.
.test
{
box-shadow: 10px 10px 5px 5px ? inset;
}
지정되지 않은 경우 텍스트 색 값 적용
Inset 키워드가 지정되지 않았을 때는 브라우저가 inset이 아닌 것으로 추정하여
바깥 쪽으로 그림자를 그립니다.
.test
{
box-shadow: 10px 10px 5px 5px #000 ?;
}
지정되지 않은 경우 바깥 쪽 그림자 적용
다수의 그림자 (Multiple box-shadows)
다수의 box shadow는 쉼표를 사용하여 지정 할 수 있습니다.
.test
{
box-shadow:
10px 10px 5px #000,
20px 20px 20px yellow;
}
Box-shadow 1
다수의 box shadow는 쉼표를 사용하여 지정 할 수 있습니다.
.test
{
box-shadow:
10px 10px 5px #000,
20px 20px 20px yellow;
}
쉼표 구분자
다수의 box shadow는 쉼표를 사용하여 지정 할 수 있습니다.
.test
{
box-shadow:
10px 10px 5px #000,
20px 20px 20px yellow;
}
Box-shadow 2
그림자 효과는 앞에서 부터 뒤로 적용됩니다. 첫 번째 그림자는 맨 위에 놓이고 다른
그림자는 뒷 쪽 레이어에 놓입니다.
Box
Box-shadow 1
Box-shadow 2
box-shadow와 border-radius
box-shadow는 border-radius에 지정 된
둥근 모서리를 따라 그려질 것입니다.
자, 이제 가서 box-shadow를
써 봅시다
작성자 : Russ Weakley Max Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley
번역 : Toby Yun sk communications
Site: tobyyun.com
Twitter: twitter.com/tobyyun
Slideshare: slideshare.net/headvoy
Top Related