public
Last active

  • Download Gist
example.css
CSS
1 2 3 4 5 6
.box {
-moz-box-shadow: 5px 9px 5px 5px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 5px 9px 5px 5px rgba(0, 0, 0, 0.75);
-o-box-shadow: 5px 9px 5px 5px rgba(0, 0, 0, 0.75);
box-shadow: 5px 9px 5px 5px rgba(0, 0, 0, 0.75);
}
example.scss
SCSS
1 2 3
.box {
@include photoshop-drop-shadow(120, 10px, 50, 10px, rgba(0, 0, 0, 0.75));
}
photoshop-drop-shadow.scss
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
@import "compass/css3/box-shadow";
@import "compass/css3/text-shadow";
 
//--------------------------------
// Photoshop Drop Shadow
//--------------------------------
@mixin photoshop-drop-shadow ($angle: 0, $distance: 0, $spread: 0, $size: 0, $color: #000, $inner: false) {
$angle: (180 - $angle) * pi() / 180; // convert to radians
$h-shadow: round(cos($angle) * $distance);
$v-shadow: round(sin($angle) * $distance);
$css-spread: $size * $spread/100;
$blur: ($size - $css-spread);
$inset: if($inner != false, 'inset', '');
@include box-shadow($h-shadow $v-shadow $blur $css-spread $color unquote($inset));
}
 
 
//--------------------------------
// Photoshop Inner Shadow
//--------------------------------
@mixin photoshop-inner-shadow ($angle: 0, $distance: 0, $spread: 0, $size: 0, $color: #000) {
@include photoshop-drop-shadow ($angle, $distance, $spread, $size, $color, true);
}
 
//--------------------------------
// Photoshop Text Shadow
//--------------------------------
@mixin photoshop-text-shadow ($angle: 0, $distance: 0, $spread: 0, $size: 0, $color: #000) {
// NOTE: $spread has no effect for text shadows
$angle: (180 - $angle) * pi() / 180;
$h-shadow: round(cos($angle) * $distance);
$v-shadow: round(sin($angle) * $distance);
$css-spread: $size * $spread/100;
$blur: ($size - $css-spread);
@include text-shadow($h-shadow $v-shadow $blur $color);
}

It's awesome! thank you :)

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.