Skip to content

@heygrady /example.css
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
.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);
}
.box {
@include photoshop-drop-shadow(120, 10px, 50, 10px, rgba(0, 0, 0, 0.75));
}
@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);
}
@parhumm

It's awesome! thank you :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.