Skip to content

Instantly share code, notes, and snippets.

@ricardozea
Last active March 26, 2018 10:39
Show Gist options
  • Save ricardozea/6445924 to your computer and use it in GitHub Desktop.
Save ricardozea/6445924 to your computer and use it in GitHub Desktop.
Long shadow generator Sass mixin
//Long Shadow
//http://codepen.io/awesomephant/pen/mAxHz
//Usage: @include long-shadow(box/text, #000, 200, false, false, left);
@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;}
}
@jeffceriello
Copy link

Hi, is there a way to change the angle of the shadow and also to make it go upwards rather than downwards?

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment