Skip to content

Instantly share code, notes, and snippets.

@growdigital
Created December 21, 2012 16:30
Show Gist options
  • Save growdigital/4353846 to your computer and use it in GitHub Desktop.
Save growdigital/4353846 to your computer and use it in GitHub Desktop.
LESS basic drop shadow & inset shadow
// Drop shadow
///////////////
// Parameters are:
// 1. Horizontal offset
// 2. Vertical offset
// 3. Blur radius (optional)
// 4. Spread radius
// 5. Alpha transparency
// * Color set to BLACK
.drop_shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
-moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
-webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
// Same as drop shadow but no spread
.inset_shadow (@x: 0, @y: 1px, @blur: 1px, @alpha: 0.1) {
-moz-box-shadow: inset @x @y @blur rgba(0, 0, 0, @alpha);
-webkit-box-shadow: inset @x @y @blur rgba(0, 0, 0, @alpha);
box-shadow: inset @x @y @blur rgba(0, 0, 0, @alpha);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment