long-shadow-text

by uto usui

HTML

<div class="wrap">
  <div class="inner">
    <div class="section">
      <h1 class="h1" href="">flat style shadow</h1>
    </div>
  </div>
</div>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">

SCSS

body {
	width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: #E1E6EC;
}

.wrap {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  padding-right: 1em;
  padding-left: 1em;
	min-width: 300px;
}


$flat-color: #FBA848;

@function setLongShadow($color, $length) {
  $value: 0 0 $color;

  @for $i from 1 through $length {
    $value_i:  $i + 'px' + ' ' +  $i + 'px' + ' ' + $color;
    $value: #{$value}, #{$value_i};
  }

  @return $value;
}
 
@mixin longShadow($color, $length:200) {
    text-shadow: setLongShadow($color, $length);
}

.section {
  background-color: $flat-color;
  overflow: hidden;
}

.h1 {
  padding: 4vw;
  @include longShadow(darken($flat-color, 10%), 300);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 4vw;
  font-weight: 600;
  letter-spacing: .1em;
  white-space: nowrap;
  text-transform: uppercase;
  display: block;
}