[CSS3] box-shadow 속성

Posted by Readiz
2014.05.04 02:00 Creation/Design


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에서는 먹지 않는다는 것 정도.. 가 있겠습니다.


저작자 표시 비영리 변경 금지
신고
Tags
이 댓글을 비밀 댓글로
  1. Boxshadow 속성도 그 나름대로 괜찮다고 생각 하는데요 구버전들에서는 적용이 안된다고는 하지만 큰 차이는 없으니까요 ㅎㅎ

    그리고 요즘 플랫 디자인이 유행이어서 그런지 보이는 곳 대부분이 플랫이어서 그런지... 좀 질리는 느낌이 있네요. 트렌디한것도 좋지만 약간은 고전적인, 복고풍 스타일의 웹디자인이 질리지 않고 오래가지 않나 생각 합니다.

    옷으로 따지자면... 일자 청바지와 폴로 티가 그러한거와 비슷하다고 할수 있겠네요. 유행타지않고 꾸준히, 질리지않고 꾸준히 사람들이 좋아하는 스타일.

    그리고 패스트부트 1.6의 윤곽이 서서히 잡혀가고 있는거 같네요... 메인화면도 그렇고 완성도가 높은걸로봐서는 마무리 단계인거 같습니다. ㅎㅎ
    • 사실 그냥 당장 배포해도 전혀 지장은 없는데 욕심이 나서요.. ㅎㅎ
  2. text-shadow 도 같은 맥락으로 빠지면 왠지 블로그가 심심한(?)것 같아요.
    이부분도 포스팅에 추가 되었으면 좋을것 같네요.
    • 3대장 요소가 있죠.. 빠지지 않고 등장하는 ㅋㅋ
  3. 그림자하나에 조금더 입체적으로 보이게 좋은거같아요 ㅎㅎ
  4. 대부분의 브라우저에서 CSS3 도입 후 웹 UI 개발하기가 참 편해진것 같습니다.
    좋은 강좌 감사드립니다.
    • 좋은 글 쓰도록 노력하겠습니다.. ^^;
  5. readiz님 스킨 잘쓰고 있습니다.
    계속 스킨이 개발해나가고 있으니 정말 기쁘네요 ^^
  6. 이미지안나오는건 어떻게 해결해야될

티스토리 툴바