Skip to content

Instantly share code, notes, and snippets.

@jensgro
Created June 12, 2013 14:41
Show Gist options
  • Save jensgro/5765888 to your computer and use it in GitHub Desktop.
Save jensgro/5765888 to your computer and use it in GitHub Desktop.
Sass-mixin for box-shadow with optional inset and oldIE-output for outset version
// ----
// Sass (v3.2.14)
// Compass (v0.12.2)
// ----
@mixin box-s($x, $y, $offset, $color, $inset: false) {
$ie-color: ie-hex-str($color);
@if $inset {
-webkit-box-shadow: inset $x $y $offset $color;
box-shadow: inset $x $y $offset $color;
} @else {
-webkit-box-shadow: $x $y $offset $color;
box-shadow: $x $y $offset $color;
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$ie-color}');
}
}
.test {
@include box-s(1px,1px,5px, rgba(0,0,0,0.5));
}
.test-inset {
@include box-s(1px,1px,5px, rgba(0,0,0,0.5), inset);
}
.test {
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=1px, OffY=1px, Color='#80000000');
}
.test-inset {
-webkit-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment