<h1>Long Shadow Heelo<h1>
@import "compass/css3";
@import url('https://fonts.googleapis.com/css?family=Passion+One');
@function longshadow($color_a,$color_b,$stepnum, $opacity: 1){
$gradient_steps: null;
@for $i from 1 through $stepnum {
$weight: ( ( $i - 1 ) / $stepnum ) * 100;
$colour_mix: mix($color_b, rgba($color_a, $opacity), $weight);
$seperator: null;
@if($i != $stepnum){
$seperator: #{','};
}
$gradient_steps: append( #{$gradient_steps}, #{$i}px #{$i}px $colour_mix $seperator );
}
@return $gradient_steps;
}
$bg: #3498db;
body{
background-color: $bg;
font-family: 'Passion One', 'arial';
}
h1{
text-align:center;
font-size: 6rem;
color: #fff;
@include text-shadow(longshadow(darken($bg,30%),$bg,50, 0.5));
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.