A mixin to create easily create the newest fad in design: long shadows!
A Pen by Gal Schlezinger on CodePen.
<div class="banner"> | |
<h1>Long Shadows</h1> | |
<h2>Sass Mixin for Long Shadows</h2> | |
</div> |
A mixin to create easily create the newest fad in design: long shadows!
A Pen by Gal Schlezinger on CodePen.
@import "compass" | |
@function makelongshadow($color, $end) | |
$val: 0px 0px $color | |
@for $i from 1 through $end | |
$val: #{$val}, #{$i}px #{$i}px #{$color} | |
@return $val | |
@mixin longshadow($color, $end: 200) | |
text-shadow: makelongshadow($color, $end) | |
$color: #E13E06 | |
.banner | |
padding: 100px | |
text-align: center | |
overflow: hidden | |
border-bottom: 5px solid #ccc | |
background-color: $color | |
h1, h2 | |
line-height: 1 | |
margin: 0 | |
color: #fff | |
h1 | |
font-size: 75px | |
@include longshadow(darken($color, 5%)) | |
h2 | |
font-size: 40px | |
@include longshadow(darken($color, 8%)) |