혼합 모드 - RGB (0, 0, 0)/ 불투명도 - 25 %/ 각도 - 135도/ 거리 4 픽셀/ 확산 - 0 %/ 크기 - 내 포토샵 디자인을 대표하는, 그래서 4 픽셀
은 어떻게 CSS3 상자 그림자를 설정할 수 있습니까?
혼합 모드 - RGB (0, 0, 0)/ 불투명도 - 25 %/ 각도 - 135도/ 거리 4 픽셀/ 확산 - 0 %/ 크기 - 내 포토샵 디자인을 대표하는, 그래서 4 픽셀
은 어떻게 CSS3 상자 그림자를 설정할 수 있습니까?
이 CSS 클래스는 투명하지 않고 하나의 규칙에서 수집 된 다양한 웹 브라우저입니다 (알려진 지원 : 파이어 폭스 3.5, 크롬 5+, 사파리 5+, 오페라 10.6 이상, IE 9 이상) :
.shadow {
-moz-box-shadow: 4px 4px 4px #000;
-webkit-box-shadow: 4px 4px 4px #000;
box-shadow: 4px 4px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
...이 CSS 클래스는 투명도 지원입니다 :
.shadow {
-webkit-box-shadow:4px 4px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow:4px 4px 0px rgba(0, 0, 0, 0.25);
box-shadow:4px 4px 0px rgba(0, 0, 0, 0.25);
-webkit-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-o-transform:rotate(135deg);
transform:rotate(135deg);
}
내가 conversion of Photoshop Drop Shadow properties into a CSS3 box-shadow을 다루는 기사를 썼다. Sass/Compass를 사용하는 경우 photoshop-drop-shadow compass plugin을 사용할 수 있습니다. 직접 수학을하기를 원한다면, 그다지 어려운 일이 아니며, 아래는 JavaScript로 작성된 간단한 예제입니다. 두 가지 까다로운 부분은 각도를 X 및 Y 오프셋으로 변환하고 스프레드 백분율을 스프레드 반경으로 변환합니다.
// Assume we have the following values in Photoshop
// Blend Mode: Normal (no other blend mode is supported in CSS)
// Color: 0,0,0
// Opacity: 25%
// Angle: 135deg
// Distance: 4px
// Spread: 0%
// Size: 4px
// Here's some JavaScript that would do the math
function photoshopDropShadow2CSSBoxShadow(color, opacity, angle, distance, spread, size) {
// convert the angle to radians
angle = (180 - angle) * Math.PI/180;
// the color is just an rgba() color with the opacity.
// for simplicity this function expects color to be an rgb string
// in CSS, opacity is a decimal between 0 and 1 instead of a percentage
color = "rgba(" + color + "," + opacity/100 + ")";
// other calculations
var offsetX = Math.round(Math.cos(angle) * distance) + "px",
offsetY = Math.round(Math.sin(angle) * distance) + "px",
spreadRadius = (size * spread/100) + "px",
blurRadius = (size - parseInt(spreadRadius, 10)) + "px";
return offsetX + " " + offsetY + " " + blurRadius + " " + spreadRadius + " " + color;
}
// let's try it
// for simplicity drop all of the units
photoshopDropShadow2CSSBoxShadow("0,0,0", 25, 135, 4, 0, 4);
// -> 3px 3px 4px 0px rgba(0,0,0,0.25)
레이어 FX를 표준 레이어 복사와 함께 CSS 문자열로 클립 보드에 복사하는 스크립트를 작성했습니다. 조금 원시이지만 작동합니다. 내가 CSS3에 PSD라는 도구를 사용하고 http://github.com/dfcreative/Photoshopr
, 당신은 포토샵에서 값을 추가 할 필요가 당신은 http://melanieceraso.com/psd-to-css3/#sthash.T9hS7I1j.dpbs
다음.shadow {
-moz-box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.25);
box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.25)
}
더 코딩을 필요로하지 않는 좋은 도구입니다이 링크를 사용 완료 포토샵 CSS 상자를 만듭니다. http://www.layerstyles.org/
좋은 물건 +1 – Ozzy