WEB/CSS

Box-Shadow

Remoted remoted 2018. 6. 7. 22:45

박스 주위에 그림자 적용시에 box-shadow 속성을 사용합니다. 입체적으로 보이는 모양이 보기에도 좋아보입니다.

box-shadow 속성

아래와 같이, box-shadow 속성은 4 개의 숫자와 색상 값을 지정합니다.

.shadow {

  -moz-box-shadow: 3px 3px 3px 3px #999;

  -webkit-box-shadow: 3px 3px 3px 3px #999;

  box-shadow: 3px 3px 3px 3px #999;

  }
첫 번째 값수평 방향의 그림자 오프셋 길이를 나타냅니다. 양수 값을 지정하면 오른쪽에, 음수 값을 지정하면 왼쪽에 그림자가 생깁니다.
두 번째 값수직 그림자 오프셋 길이를 나타냅니다. 양수 값을 지정하면 박스 아래에, 음수 값을 지정하면 박스 위에 그림자가 붙습니다.
세 번째 값그림자의 흐림 반경(blur radius)을 나타냅니다. 음수 값을 지정할 수는 없습니다. 값이 클수록 그림자의 끝이 흐려지고, 값이 "0"이면 그림자 끝이 흐려지지 않고 선명한 그림자가 됩니다.
네 번째 값그림자의 확산 거리(Spread distance)를 나타냅니다. 양수 값을 지정하면 그림자의 전방위로 확대되고, 음수 값을 지정하면 그림자의 크기가 줄어 듭니다. 양수 값을 지정하면 오른쪽에, 음수 값을 지정하면 왼쪽에 그림자가 붙습니다.
다섯 번째 값그림자의 색상 (color)을 지정합니다.

▼ 아래와 같이 3개의 도형에 각각 그림자를 붙여 보았습니다. first 박스에 양수 값을 주어 그림자를 붙였습니다.

second 박스에는 음수 값, third 박스에는 그림자의 확산 정도를 값 -1로 확인해 보았습니다.

그림자 붙이는 방법

.shadowbox {
  width:100px;
  height:100px; }
 
.first{
  border-radius:3px;
  box-shadow:3px 3px 3px 3px #999;}
   
.second{
  border-radius:50%;
  box-shadow:-3px -3px 3px 6px #093;}
 
.third{
  border-radius:3px;
  transform-origin:50% 50%;
  transform:rotate(20deg);
  box-shadow:3px 3px 0px -1px #F00;}

first
second
third

상자의 내부에 그림자 적용하기:inset

그림자의 흐림 정도를 적정하게 사용하면 그라데이션 효과를 낼 수 있습니다.

.inset-box {
  width:100px;
  height: 100px;
  border-radius:50%;
  border:1px solid #999;
  background:#FFF;
  box-shadow:inset 0 2px 45px #7c7c7e;
}

inset

픽셀을 겹쳐 쌓아 그림자 만들기

수평 방향의 값을 "0"으로 해 두고, 수직 방향으로 1 픽셀씩 증가시키먄사, 연한 색에서 점차 짙은 색으로 값을 지정합니다. 결과, 아래와 같이 입체적인 박스가 완성되었습니다.

.shadowbox {
  0 1px 1px #c0c0c0,
  0 2px 0 #a8a7a6,
  0 3px 0 #8b8a89,
  0 4px 0 #7d7b7a,
  0 5px 0 #686766,
  0 6px 3px #5f5e5d;
  }

픽셀을 겹쳐 쌓아 그림자 만들기

박스 외부와 내부의 그림자 맞추기

여러 값을 쉼표(,)로 구분하면서 지정합니다. 결과, 박스의 내부와 외부 모두에 그림자가 붙은 모습이 완성됐습니다.

.inset-shadowbox {
  0 1px 1px #c0c0c0,
  0 2px 0 #a8a7a6,
  0 3px 0 #8b8a89,
  0 4px 0 #7d7b7a,
  0 5px 0 #686766,
  0 6px 3px #5f5e5d,
  inset 1px 1px 50px #7c7c7e;
  }

겹쳐 쌓아 그림자 만들기

New
 
 
0
 
 
0
 
 
0
Blogger
 
0
Google +
 
0
Hatena
 
0
Pocket


'WEB > CSS' 카테고리의 다른 글

[CSS] Media Query에서 Screen과 Only Screen의 차이점  (0) 2019.05.01
Box Shadow II  (0) 2018.06.07
Box-Shadow  (0) 2018.06.07
[CSS] text-justify  (0) 2018.02.05
HTML5 number inputs – Comma and period as decimal marks  (0) 2018.01.24
Select box dir  (0) 2018.01.24
1 2 3 4 5 6 7 8 9 10 ··· 16