Skip to content

Instantly share code, notes, and snippets.

@pixelwhip
Created October 23, 2013 21:53
Show Gist options
  • Save pixelwhip/7127465 to your computer and use it in GitHub Desktop.
Save pixelwhip/7127465 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div id="swatch-1"></div>
<div id="swatch-2"></div>
<div id="swatch-3"></div>
<div id="swatch-4"></div>
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.7)
// ----
@import "compass";
// Faking linear gradients with box shadow.
// This is useful when you want to manage your gradient independent of
// other background images.
div {
height: 200px;
width: 200px;
background-color: red;
float: left;
margin: 20px;
}
// Add initial horixontal offset value to show where the edge is.
#swatch-1 {
@include box-shadow(black 100px 0 0 0 inset);
}
// Add the desired amount of blur.
#swatch-2 {
@include box-shadow(black 100px 0 200px 0 inset);
}
// Set a negative spread to remove the shadow from the vertical edges.
#swatch-3 {
@include box-shadow(black 100px 0 200px -100px inset);
}
// Adjust the initial horizontal offset to compensate for the negative spread.
#swatch-4 {
@include box-shadow(black 200px 0 200px -100px inset);
}
// Profit.
div {
height: 200px;
width: 200px;
background-color: red;
float: left;
margin: 20px;
}
#swatch-1 {
-moz-box-shadow: black 100px 0 0 0 inset;
-webkit-box-shadow: black 100px 0 0 0 inset;
box-shadow: black 100px 0 0 0 inset;
}
#swatch-2 {
-moz-box-shadow: black 100px 0 200px 0 inset;
-webkit-box-shadow: black 100px 0 200px 0 inset;
box-shadow: black 100px 0 200px 0 inset;
}
#swatch-3 {
-moz-box-shadow: black 100px 0 200px -100px inset;
-webkit-box-shadow: black 100px 0 200px -100px inset;
box-shadow: black 100px 0 200px -100px inset;
}
#swatch-4 {
-moz-box-shadow: black 200px 0 200px -100px inset;
-webkit-box-shadow: black 200px 0 200px -100px inset;
box-shadow: black 200px 0 200px -100px inset;
}
<div id="swatch-1"></div>
<div id="swatch-2"></div>
<div id="swatch-3"></div>
<div id="swatch-4"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment