Box-shadow

Create a shadow behind or inside the element.

Usage:

In .box-shadow() brackets put arguments for every single shadow. Separate each shadows' arguments with comma. You can put up to five shadows by default but feel free to add a class with as many as you want. Just check how it is done.

You can use a default box-shadow which will create a shadow with 0px x and 1px y offsets, 3px of blur and in black colour with 25% transparency. Just place a .box-shadow class without any arguments.

Box-shadow property takes following arguments:

1. inset [optional].
2. x-offset [required].
3. y-offset [required].
4. blur [optional].
5. spread [optional].
6. color [optional/required].

Resources:

-- http://developer.mozilla.org/en/CSS/box-shadow

Browsers support: IE9, Fx3.5, Chrome, Opera, Safari, Opera Mobile, Android Browser

Notable lack of support: IE8-, Opera Mini

Example

Two box-shadows: one is 1px offset, black, second one is green with 30% opacity, inset, with 5px offsets, 3px of blur and 1px spread. .box-shadow(1px 1px black, inset 5px 5px 3px 1px fade(green,30%))

---

###Code // One shadow: .box-shadow (@arguments: 0 1px 3px fade(#000,25%)){ -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments; } // Two shadows: .box-shadow (@arguments1, @arguments2){ -webkit-box-shadow: @arguments1, @arguments2; -moz-box-shadow: @arguments1, @arguments2; box-shadow: @arguments1, @arguments2; } // Three shadows: .box-shadow (@arguments1, @arguments2, @arguments3){ -webkit-box-shadow: @arguments1, @arguments2, @arguments3; -moz-box-shadow: @arguments1, @arguments2, @arguments3; box-shadow: @arguments1, @arguments2, @arguments3; } // Four shadows: .box-shadow (@arguments1, @arguments2, @arguments3, @arguments4){ -webkit-box-shadow: @arguments1, @arguments2, @arguments3, @arguments4; -moz-box-shadow: @arguments1, @arguments2, @arguments3, @arguments4; box-shadow: @arguments1, @arguments2, @arguments3, @arguments4; } // Five shadows: .box-shadow (@arguments1, @arguments2, @arguments3, @arguments4, @arguments5){ -webkit-box-shadow: @arguments1, @arguments2, @arguments3, @arguments4, @arguments5; -moz-box-shadow: @arguments1, @arguments2, @arguments3, @arguments4, @arguments5; box-shadow: @arguments1, @arguments2, @arguments3, @arguments4, @arguments5; }