Compass Box Shadow

The box-shadow mixin is used to give a block element a drop shadow.

This file can be imported using: @import "compass/css3/box-shadow"

View the Source for this module on Github.

Examples

Box-shadow

css3 mixin for box-shadow

Imports

The following sass files are automatically imported when you import this file:

1. CSS3 Utilities

Configurable Variables help

$default-box-shadow-color

Value

#333333

Description

The default color for box shadows

$default-box-shadow-h-offset

Value

1px

Description

The default horizontal offset. Positive is to the right.

$default-box-shadow-v-offset

Value

1px

Description

The default vertical offset. Positive is down.

$default-box-shadow-blur

Value

5px

Description

The default blur length.

$default-box-shadow-spread

Value

0

Description

The default spread length.

$default-box-shadow-inset

Value

false

Description

The default shadow instet: inset or false (for standard shadow).

Mixins

box-shadow($color, $hoff, $voff, $blur, $spread, $inset)

=box-shadow($color: $default-box-shadow-color, $hoff: $default-box-shadow-h-offset, $voff: $default-box-shadow-v-offset, $blur: $default-box-shadow-blur, $spread: $default-box-shadow-spread, $inset: $default-box-shadow-inset)
  $full: $color $hoff $voff $blur $spread
  @if $inset
    @if not ($inset == true or $inset == inset)
      @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. The box shadow will be inset."
    $full: $full inset
  @if $color == none
    +experimental(box-shadow, none, -moz, -webkit, -o, not -ms, not -khtml, official)
  @else
    +experimental(box-shadow, $full, -moz, -webkit, -o, not -ms, not -khtml, official)

@mixin box-shadow($color: $default-box-shadow-color, $hoff: $default-box-shadow-h-offset, $voff: $default-box-shadow-v-offset, $blur: $default-box-shadow-blur, $spread: $default-box-shadow-spread, $inset: $default-box-shadow-inset) {
  $full: $color $hoff $voff $blur $spread;
  @if $inset {
    @if not ($inset == true or $inset == inset) {
      @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. The box shadow will be inset."; }
    $full: $full inset; }
  @if $color == none {
    @include experimental(box-shadow, none, -moz, -webkit, -o, not -ms, not -khtml, official); }
  @else {
    @include experimental(box-shadow, $full, -moz, -webkit, -o, not -ms, not -khtml, official); } }