CSS box-shadow 이해와 팁

2008 년 7 월 마이클 벤트너는 구현 CSS 속성 상자 그림자 (모질라의 -moz-box-shadow라는 이름으로 까지 사양이 안정을). 이 게시물에서 나는 상자 그림자가 작동하는 방법의 간단한 요약을 제공하고 싶습니다. 조금 만든 데모 페이지를 , 당신은이 게시물에 표시되는 모든 그림자가 해당 페이지에서 스크린 샷입니다. 사용 최근 파이어 폭스 야간 빌드 를 볼 수 있습니다.

 

개요

 

상자에 상자 그림자를 설정하는 가장 기본적인 방법은 사용하는 박스 그림자 :
 box-shadow: [x offset] [y offset] [color]:

 

box-shadow: 5px 3px black;

 

 

다른 번호를 추가하면 흐림 반경을 지정할 수 있습니다 :

box-shadow: 3px 3px 5px black;

 

 

 

당신은 (이것은 그림자 RECT 확장) 확산 반경을 설정할 수 있습니다 :
box-shadow: 0 0 5px 5px black;

 

역 마진 값도 가능합니다 :

box-shadow: 0 5px 5px -3px black;

또 다른 흥미로운 기능은 최상위 그림자로 시작하는 쉼표로 구분하여 여러 상자 그림자를 설정하는 기능입니다 :

box-shadow:
  0 0 20px black,
  20px 15px 30px yellow,
  -20px 15px 30px lime,
  -20px -15px 30px blue,
  20px -15px 30px red;

 

 

그림자 불투명도

당신이 그림자가 더 투명 할 경우에는 어떻게해야 할까? 다만 사용 RGBA의 색상을 설정할 때 구문 및 적절한 알파 값을 지정

 

box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);

 

그림자의 불투명도를 증가 시키면 약간 더 까다 롭습니다. 먼저 확산 반경을 가지고 노는 시도해야하지만, 경우 즉, 그림자 레이어 작품을 복제, 올바른 결과를도 제공하지 않습니다 :

 

box-shadow: 3px 3px 5px black, 3px 3px 5px black;

 

 

삽입 된 상자 그림자

 

마지막으로 나는 처음에이 블로그 게시물을 쓰고 있어요 이유에 얻고있다. 그냥 이상 주 전, 마이클 벤트너는 지원 추가 를 위해 삽입 된 상자 그림자. 삽입 상자 그림자를 사용하면 추가하는 것만 큼 간단 삽입 된 상자 그림자 층에 키워드를.

 

 

box-shadow: inset 2px 2px 5px black;

 

 

삽입 및 초기 그림자가 결합 될 수있다 :

box-shadow: inset 2px 2px 5px black, 2px 2px 5px black;

 

 

이제 여러 그림자 층의 유용성은 정말 분명해집니다. 당신은 그라디언트, 하이라이트, 3D 테두리 등을 만들 삽입 상자 그림자를 사용하고 자유롭게 서로의 위에 그들을 스택 수 있습니다. 그냥 포토샵에서 "내부 그림자"레이어 스타일을 무제한으로 사용처럼!

와 함께 국경 - 반경 (도 될 수있는 타원형의 파이어 폭스 3.5), 빛나는, 이미지없는 버튼을 만들기위한 가능성은 무한합니다. 예를 들어, 다음의 버튼 다시 버전입니다 getmiro.com :

 

이 같은 버튼의 CSS 코드를 신속하게하지만 ... 그것은 모든의, 복잡하게 될 수 있습니다 데모 페이지 당신이 관심있는 경우.

 

 

더 많은 예
상자 그림자 (및 이미지없이) 코코아 컨트롤을 재현하는 것은 너무 재미있다 :

 

 

 

 

삽입 된 상자의 그림자는 배경 레이어 위에 그려진다. 블랙 삽입 그림자 배경 어두운, 화이트 그림자가 밝게합니다. 당신이 염두에 유지하는 경우, 당신은 임의의 배경에 적응할 수있는 상자 그림자 구조를 구축 할 수 있습니다. 나는 조금 실험과 약간의 코코아 선택 상자처럼 슈퍼 광택 상자를 내놓았다 :

(채도가 각 상자의 아래쪽에있는 높은 방법을 참조하십시오? :-) )

 

 

브라우저 지원

 

지금까지 내가 아는 한, 웹킷 상자 그림자에 대한 지원을 구현하는 최초의 엔진이었다. 기본적인 형태는 사파리가 3 배, 및 지원 버전부터 지원 된 확산 반경 및 삽입 상자 그림자가 2009 년 7 월에 추가되었습니다. 따라서, 크롬의 최신 버전도이 모든 일을 할 수 있습니다. 웹킷의 속성이라고합니다 - 웹킷 박스 그림자 .

파이어 폭스는 이름으로 버전 3.5로 시작 상자 그림자 지원 -moz-box-shadow라는 .

오페라 사용자를위한 좋은 소식 : 최근에 출시 된 오페라 10.5 미리 알파는 현재도 상자 그림자를 지원합니다! 약간의 명백한 버그 (제로 흐림 반경 예를 들어 상자 그림자 때로는 페인트되지 않습니다) 아직,하지만 난 그들이 최종 릴리스 시간에 고정 된거야 확신합니다.
그것은 오페라는 사용하지 않는 것을주의하는 것이 재미있다 자신의 공급 업체 접두사 상자 그림자 속성 이름. 웹킷은 어떤 점에서 이런 짓을하지만 나중에 다시 소개 - 웹킷 - 접두사 상자 그림자 부분이 있기 때문에 제거되었습니다 에서 CSS 3 배경 및 테두리 사양 .

 

주의 사항

당신은. 그림자가 당신의 상자를 다시 칠 때마다 실시간으로 렌더링되는 상자 염두에 두어야 할 몇 가지 성능 개선이 이미되었습니다 만, 박스 그림자를 그리기 여전히 비싸다. 당신이 렌더링 속도를 평가하고 큰 상자 (또는 큰 흐림 값 그림자)에 대한 그림자를 필요로하는 경우에, 당신은 확실히 (예를 들어, 같은 대신 "미리 계산"그림자의 이미지를 사용하는 것이 좋습니다 국경 이미지 ).

마지막으로, 파이어 폭스, 그리고이 물건을 구현하기위한 마이클에게 감사의 뜻을 전하고자한다 데이비드 남작 과 로버트 O'Callahan 자신의 패치를 검토하는 - 감사합니다!

업데이트 2009-04-08 : dbaron는 결국 1.9.1에 대한 삽입 상자 그림자 패치를 승인하고, 오늘은 그것을 도착 - 우리가 파이어 폭스 3.5에 삽입 된 상자 그림자를 얻을 수 있습니다 것을 의미합니다! 나는 그에 따라 문서를 업데이트했습니다.

업데이트 2010-01-21 : 웹킷 새로운 오페라가 미리 알파 지금 상자 그림자를 지원하기 때문에 브라우저 호환성 절을 업데이트했습니다.

 

참고사이트

http://www.w3schools.com/cssref/css3_pr_box-shadow.asp   (박스쉐도우 테스트)
http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/  (관련정보)