Skip to content

Instantly share code, notes, and snippets.

@nrdobie
Created September 5, 2012 19:50
Show Gist options
  • Save nrdobie/3643452 to your computer and use it in GitHub Desktop.
Save nrdobie/3643452 to your computer and use it in GitHub Desktop.
Makes a block shadow CSS3 effect.
/* 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); }
<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>
@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)
@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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment