Long shadow generator

index.html

<div class='demo'>
<div class='icons'>
  <div class='app-icon app-icon-1'>
    <p>&#9835;</p>
  </div>
    <div class='app-icon app-icon-2'>
    <p>&#59176;</p>
  </div>
    <div class='app-icon app-icon-3'>
    <p>&#9993;</p>
  </div>
  <div class='app-icon app-icon-4'>
    <p>&hearts;</p>
  </div>
   <div class='app-icon app-icon-twitter'>
     <p><a href="https://www.twitter.com/maxakohler">T</a></p>
  </div>
  </div>
  <div class='clearfix'>
  <div class="shadow">
   #LONG
    </div>
  <div class="shadow-2">
  <p>SHADOW</p>
</div>
 <div class="shadow-3">
  <p>DESIGN</p>
</div>
  </div>
  <h1 class='text-shadow'>Because flat design is <em>so last week</em></h1>
</div>
<article class='demo-desc'> 
  <h1>Long shadow generator</h1>
  <p>A Sass mixin that makes pulling off 'long shadow design' as easy as pie.
  </p>
    <p>For more information about this design trend, head over to <a href="http://je.roon.io/long-shadow-design">http://je.roon.io/long-shadow-design</a>. Just make sure not to look at the compiled CSS :)</p>
 
  <p>Follow me
    <a href='https://twitter.com/maxakohler'>@maxakohler</a> for updates.
</p>
  <h2>Features</h2>
<ul>
  <li>Works with any element, both <strong>text-shadow</strong> and <strong>box-shadow</strong> is supported.</li>
  <li>Variable color</li>
  <li>Variable shadow length</li>
  <li>Shadow can either point to the <strong>left</strong> or to the <strong>right</strong></li>
  <li>Define if the shadow is <strong>skewed</strong> or not</li>
  <li>Choose if the shadow <strong>fades out</strong> or not (still in beta)</li>
</ul>  
<pre>
  <code class="language-scss">
.my-thing {
  @include long-shadow($type: text, $color: indigo, $length: 50, $fadeout: false, $skew: true, $direction: right);
}
  //That's it!</code>
  </pre>
  <h2>How does it work?</h2>
  <p>Basically: It uses a Sass @for loop to create a number of box-shadows, every shadow with a slightly different position. The number of shadows is based on the length that you enter.
  </p>
  </article>

long-shadow-generator.markdown

Long shadow generator

A Sass mixin that makes pulling off 'long shadow design' as easy as pie.

For more information about this design trend, head over to http://je.roon.io/long-shadow-design

frontpage!

A Pen by Max Kohler on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import "compass/css3";

//The Mixin
//==========

@mixin long-shadow($type, $color, $length, $fadeout: true, $skew: false, $direction: right){
  $shadow: '';
  @if $skew == false or $type == text{
    @if $direction == right {
      @for $i from 0 to $length - 1 {
        $shadow: $shadow + $i + 'px ' + $i + 'px 0 ' + $color + ',';
      }
    }
    @if $direction == left {
      @for $i from 0 to $length - 1 {
        $shadow: $shadow + $i * -1 + 'px ' + $i + 'px 0 ' + $color + ',';
       }
      }
     }
        
   @if $fadeout == true{
    @for $i from 1 to $length - 1 {
      @if $type == text or $skew == false{
        @if $direction == right{
          $shadow: $shadow + $i + 'px ' + $i + 'px 0 ' +       rgba($color, 1 - $i / $length) + ',';
        }
        @if $direction == left{
          $shadow: $shadow + $i * -1 + 'px ' + $i + 'px 0 ' +       rgba($color, 1 - $i / $length) + ',';
        }
      }
      @if ($type == box) and $skew == true{
        @if $direction == right {
          $shadow: $shadow + $i + 'px ' + $i + 'px 0 ' + $i * .2 + 'px ' + rgba($color, 1 - $i / $length) + ',';
        }
        @if $direction == left {
          $shadow: $shadow + $i * -1 + 'px ' + $i + 'px 0 ' + $i * .2 + 'px ' + rgba($color, 1 - $i / $length) + ',';
        }
      }
  }
  $shadow: $shadow + $length + 'px ' + $length + 'px 0 ' + rgba($color, 0);
 }
 @if $fadeout == false{
   @if $skew == true and ( $type == box ){
     @for $i from 0 to $length - 1 {
            $shadow: $shadow + $i + 'px ' + $i + 'px 0 ' + $i * .1 + 'px ' + $color + ',';
      }
   }
    $shadow: $shadow + $length + 'px ' + $length + 'px 0 ' + rgba(0,0,0,0);
 }
 $shadow: unquote($shadow);
  @if $type == 'box' {box-shadow: $shadow;}
  @if $type == 'text' {text-shadow: $shadow;}
}

//The Other Stuff
//===============    
    
.text-shadow {
  font-family: sans-serif;
  font-size: 3em;
  margin-bottom: 2em;
  font-weight: bold;
  color: $white;
  @include long-shadow(text, darken($midnight, 5), 200, false, false, left);
        
        em {
        color: $yellow ;
        display: inline-block;
        @include long-shadow(text, $peach, 200, false, false, right);
        }
}
.shadow {
  margin-bottom: 100px;
  padding: 2%;
  color: $white;
  font-family: sans-serif;
  @include background-image(linear-gradient(lighten($peach, 10), $peach));
    font-weight: bold;
    font-size: 3em;
  @include long-shadow(text, desaturate(darken($peach, 12), 50), 50, true, left);
 
      display: inline-block;
      float: left;
  margin-right: 2%;
  @include long-shadow(box, darken($midnight, 5), 120, false, true);
}
  .shadow-2 {
  @extend .shadow;
      @include background-image(linear-gradient(lighten($blue-light, 10), $blue-light));
      
  @include long-shadow(text, $blue, 100, false, false, left);
  }
        .shadow-3 {
  @extend .shadow;
      @include background-image(linear-gradient(lighten($orange, 10), $orange));
      
  @include long-shadow(text, $red, 100, false, false, left);
  }
    .app-icon {
      width: 100px;height: 100px;
      margin-bottom: 1em;
      font-family: entypo;
      border-radius: 5px;
      color: white;
      padding-left: 15px;
      font-size: 60px;
      padding-top: 15px;
      margin-right: 10px;
      display: inline-block;
      @include long-shadow(box, darken($midnight, 1), 50, true, true);
   
    }
    .app-icon-1 {
      background: $emerald;
      border: 4px solid darken($emerald, 5);
      @include long-shadow(text, darken($emerald, 10), 35, false);
    }
    .app-icon-2 {
    background: $blue-light;
      border: 4px solid darken($blue-light, 5);
    
      @include long-shadow(text, darken($blue-light, 10), 55, true);
     }
 .app-icon-3 {
      background: $turqoise;
      border: 4px solid $turqoise;
    
      @include long-shadow(text, darken($turqoise, 5), 55, true, false, right);
    }
    .app-icon-4 {
    background: $orange;
      border: 4px solid darken($peach, 0);
      @include long-shadow(text, lighten($peach, 0), 55, true);
     }
       
    .app-icon-twitter {
      background: $twitter-blue;
      font-family: zocial;
      a {
        text-decoration: none;
        color: white;
        @include long-shadow(text, darken($twitter-blue, 10), 55, true);
      }
    }   
    div {
    overflow: hidden;
    }    
body{
  background: $midnight;
}

styles

<link href="https://codepen.io/awesomephant/pen/frmlu.scss" rel="stylesheet" />