[CSS3] box-shadow 속성

box-shadow 속성

  자주 쓰는 속성인데 매번 찾기가 귀찮아 한번에 정리해봅니다. 옛날 옛적 호랑이가 산속에 돌아다니던 시절에는 이런 효과를 주려면 포토샵에서 작업해서 이미지를 잘라 붙여넣었어야 됐습니다만 이제는 옛말이죠. 속성 하나로 간단하게 적용하는 그림자 효과입니다.

적용 방법

	
div {
  box-shadow: #888888 10px 10px 5px;
} 
	

브라우저 호환성 최대화

	
div {
  -moz-box-shadow:#585858 0px 0px 1px;
  -webkit-box-shadow:#585858 0px 0px 1px;
  box-shadow:#585858 0px 0px 1px;
} 
	

문법

	
box-shadow: none|h-shadow v-shadow blur spread color; 
	

  종종 color는 순서가 뒤바뀌기도 합니다. 맨 처음에 나오는 수도 있고 맨 뒤에 붙여도 되고 상관 없는 듯 합니다. h-shadow는 좌우로 그림자를 움직이는 역할을 하고, v-shadow는 위아래로 그림자를 이동시키는 역할을 합니다. blur는 그림자가 퍼지는 정도이구요. spread는 그림자의 크기입니다.

  여기서 중요한 것은 color 부분에 alpha값의 적용이 가능하기 때문에 아래처럼 사용이 가능하다는 것입니다.

	
box-shadow: 0 1px 2px rgba(0, 0, 0, .2); 
	

  .2가 적힌 부분을 주의깊게 보셔야 합니다. alpha값의 적용으로 인해 있는듯 없는듯 투명한 그림자 효과의 적용이 가능합니다. 많은 사이트에서 적용하고 있는 기법이기도 하구요.. 본 블로그 스킨에도 사이드바와 본문 영역에 적용되어 있는 속성입니다.

  대충 적용되면 아래와 같은 느낌이죠.

  요즘은 아예 플랫하게 그림자도 없이 흰색 배경으로 하는 경우도 있지만, 구글 등에서는 살짝 그림자를 주는 식으로 많이 표현을 하더라구요. 저도 대세를 따라 한번 적용해 보았습니다만 그림자가 없는 편이 깔끔한것 같기도 하고.. 요새는 아예 필요 없는 효과는 배제하는 것이 트렌드가 된 듯 하여 고민이 됩니다.

  주의점이라면 box-shadow는 IE8에서는 먹지 않는다는 것 정도.. 가 있겠습니다.