Makes a block shadow CSS3 effect.

block-shadow-mixer.css

/* line 5, projects/block-shadow-mixer.css.sass */
#block-shadow-mixer .play-area h1, #block-shadow-mixer .play-area h2, #block-shadow-mixer .play-area h3 {
  font-family: "ff-cocon-web-pro";
  margin-bottom: 20px; }
  /* line 9, projects/block-shadow-mixer.css.sass */
  #block-shadow-mixer .play-area h1 em, #block-shadow-mixer .play-area h2 em, #block-shadow-mixer .play-area h3 em {
    font-family: "bistro-script-web"; }
/* line 11, projects/block-shadow-mixer.css.sass */
#block-shadow-mixer .play-area h1 {
  color: #ff1d23;
  text-shadow: 1px 1px 0px #590202, 2px 2px 0px #590202, 3px 3px 0px #590202, 4px 4px 0px #590202, 5px 5px 0px #590202, 6px 6px 5px rgba(0, 0, 0, 0.15); }
/* line 13, projects/block-shadow-mixer.css.sass */
#block-shadow-mixer .play-area h1.level-10 {
  color: #36a6bf;
  text-shadow: 1px 1px 0px #262626, 2px 2px 0px #262626, 3px 3px 0px #262626, 4px 4px 0px #262626, 5px 5px 0px #262626, 6px 6px 0px #262626, 7px 7px 0px #262626, 8px 8px 0px #262626, 9px 9px 0px #262626; }
/* line 15, projects/block-shadow-mixer.css.sass */
#block-shadow-mixer .play-area h1.level-3 {
  color: #a31180;
  text-shadow: 1px 1px 0px #290418, 2px 2px 0px #290418, 3px 3px 0px #290418, 4px 4px 3px rgba(0, 0, 0, 0.15); }
/* line 17, projects/block-shadow-mixer.css.sass */
#block-shadow-mixer .play-area h1.level-2 {
  color: #feb228;
  text-shadow: 1px 1px 0px #82561a, 2px 2px 0px #82561a, 3px 3px 2px rgba(0, 0, 0, 0.15); }

block-shadow-mixer.html

<div class="play-area">
  <h1 class="level-10">10 Level Block <em>Shadow</em></h1>
  <h1>5 Level Block <em>Shadow</em></h1>
  <h1 class="level-3">10 Level Block <em>Shadow</em></h1>
  <h1 class="level-10">10 Level Block <em>Shadow</em></h1>
</div>

block-shadow-mixer.sass

@import "compass"
@import "projects/block-shadow"

#block-shadow-mixer .play-area
  h1, h2, h3
    font-family: "ff-cocon-web-pro"
    margin-bottom: 20px

    em
      font-family: "bistro-script-web"
  h1
    +block-shadow(#FF1D23, 5, #590202)
  h1.level-10
    +block-shadow(#36A6BF, 10, #262626)
  h1.level-3
    +block-shadow(#A31180, 3, #290418)
  h1.level-2
    +block-shadow(#FEB228, 2, #82561A)

block-shadow.sass

@import "compass"

@mixin block-shadow($color, $offset: 5, $dark_color: null)

  // Check for provided dark color or make one
  $block_shadow_color: null
  @if $dark_color
    $block_shadow_color: $dark_color
  @else
    $block_shadow_color: darken($color, 25)

  // Create each shadow
  $block_shadows: null
  @for $i from 1 through $offset
    $block_shadows: append($block_shadows, $i*1px $i*1px 0px $block_shadow_color, comma)

  // Add soft shadow
  $block_shadows: append($block_shadows, ($offset+1)*1px ($offset+1)*1px $offset*1px rgba(0,0,0,0.15), comma)

  // Add CSS
  color: $color
  +text-shadow($block_shadows...) // '...' is needed for proper handling.