나는이 기사 http://heygrady.com/blog/2011/08/06/recreating-photoshop-drop-shadows-in-css3-and-compass/을 여러 번 읽었다. 하지만이 경우 CSS3의 그림자를 상자에 PSD의 그림자를 변환 할 수있는 올바른 방법을 찾을 수 없습니다 : 나는 정보가 누락있어 여기에 약간의 추측했다PSD의 그림자에서 CSS3의 상자 그림자로 변환
Stroke: #E4E4E4; opacity 75%
Inner glow: #FFFFFF 50%; opacity 75%
Drop shadow: Angle=90 degrees; distance=1px; spread=5%; size=9px
border: 1px solid rgba(228,228,228,0.75);
box-shadow: inset 0 0 0 9px rgba(255,255,255,0.75), 0 1px 9px 0 rgba(0,0,0,.5);
. rgba(r,g,b,a) 색상 구문은 각 색상 구성 요소에 대해 0-255 값을 사용하고 색상 불투명도 값에 0-1 값을 사용합니다. 따라서 border 규칙은 Photoshop 획과 동일합니다.
내부 광선과 직접적으로 같은 것은 아니지만 시뮬레이션 할 수있는 삽입 상자 그림자를 사용할 수 있습니다. 같은 규칙에 여러 개의 쉼표를 쉼표로 지정하면 첫 번째 그림자가 삽입 그림자가 될 수 있습니다. 이 값은 inset 키워드로 시작하고 x와 y 오프셋 (이 경우는 없음), 흐림 반경, 확산 거리, 마지막으로 그림자 색상으로 지정됩니다. 값으로 재생하십시오. 나는 퍼짐을 위해 9px에 나머지를 위해 0을 짐작했다.
마지막으로 외부에 상자 그림자를 지정합니다. 삽입 된 그림자와 동일한 규칙이 적용됩니다 (다시 값에 대한 추측과 함께). 주위에 놀아 라!
여기 사진관에 다운로드하여 설치할 수있는 클라우드 기반 Photoshop 확장자가 있습니다 (http://css3ps.com/). 그런 다음 드롭 섀도우가 포함 된 레이어를 선택하고 도구 상자에서 버튼을 클릭하면 PSD의 상자 그림자와 일치하는 필요한 css3이 제공됩니다. 그들은 당신을 위해 계산을했습니다.
나는이 질문에 항상 위대한 것을 사용합니다.
이 게시물에 더 추가 할 수 있습니까? – Brian
질문이 깜박 : 어떤 브라우저를 사용하고 계십니까? rgba() 및 box-shadow는 IE8 이하에서는 지원되지 않습니다. –