GJVRZQ

GJVRZQ.markdown

GJVRZQ

A Pen by Sylvester Aswin on CodePen.

License.

index.html

<section>
  <div class="foo">Sylvester</div>
</section>

<section>
  <div class="bar"></div>
</section>

<section>
  <div class="baz"></div>
</section>

style.css

/// Function to generate long shadows (because flat is so has-been).
/// Property-agnostic: works for both `box-shadow` and `text-shadow`.
/// `cos` and `sin` might need to be polyfilled if Compass or any 
/// equivalent such as SassyMath is not in use.
///
/// @author Hugo Giraudel
///
/// @link https://unindented.org/articles/trigonometry-in-sass/ Pure Sass `cos` and `sin`
///
/// @param {Direction} $direction
///     Shadow's direction (angle or keyword)
/// @param {Length} $length
///     Shadow's length
/// @param {Color} $color
///     Shadow's color
/// @param {Bool | Color} $fade [false]
///     Whether or not shadow should fade: 
///     - `false` means no fading, shadow is `$color`
///     - `true`  means fading from `$color` to transparent
///     - a color means fading from `$color` to `$fade`
/// @param {Number} $shadow-count [100]
///     Number of computed shadows
///
/// @return {List} - List of shadows
///
/// @require {function} Compass/helpers/math/cos
///     http://compass-style.org/reference/compass/helpers/math/#cos
/// @require {function} Compass/helpers/math/sin
///     http://compass-style.org/reference/compass/helpers/math/#sin
///
/// @example scss - Usage
/// .foo {
///   text-shadow: long-shadow(42deg, 1em, #16a085);
/// }
/// .bar {
///   box-shadow: long-shadow(to top left, 150px, hotpink, tomato);
/// }
@function long-shadow($direction, $length, $color, $fade: false, $shadow-count: 100) {
  $shadows: ();
  $conversion-map: ( 
    to top: 180deg, 
    to top right: 135deg, 
    to right top: 135deg,
    to right: 90deg,
    to bottom right: 45deg,
    to right bottom: 45deg,
    to bottom: 0deg,
    to bottom left: 315deg,
    to left bottom: 315deg,
    to left: 270deg,
    to left top: 225deg,
    to top left: 225deg
  );
  
  @if map-has-key($conversion-map, $direction) {
    $direction: map-get($conversion-map, $direction);
  }
  
  @for $i from 1 through $shadow-count {
    $current-step: ($i * $length / $shadow-count);
    $current-color: if(not $fade, $color, if(type-of($fade) == 'color',  mix($fade, $color, ($i / $shadow-count * 100)), rgba($color, 1 - $i / $shadow-count)));
    
    $shadows: append($shadows, (sin(0deg + $direction) * $current-step) (cos(0deg + $direction) * $current-step) 0 $current-color, 'comma');
  }
  
  @return $shadows;
}











// Examples

.foo {
  text-shadow: long-shadow(
    // Shadow should have an angle of 42 degrees
    $direction: 42deg, 
    // Shadow should be contain within a 100x100 box
    $length: 100px, 
    // Shadow should start this color
    $color: #16a085,
    // To finish this color
    $fade: #1abc9c
  ); 
}

.bar {
  box-shadow: long-shadow(
    // Shadow should go to bottom right (45deg)
    $direction: to left, 
    // With a length of 15em
    $length: 15em, 
    // From this color
    $color: #2980b9,
    // To this color
    $fade: #e67e22
  );
}

.baz {
  box-shadow: long-shadow(
    // Shadow should have an angle of 25deg
    $direction: -125deg,
    // Spread on 120px
    $length: 120px,
    // From this color
    $color: #8e44ad,
    // To transparent
    $fade: true,
    // With only 10 shadows
    $shadow-count: 10
  )
}











// Demo styles

.foo {
  font-family: 'Raleway', sans-serif;
  color: white;
  line-height: 100vh;
  font-size: 10em;
  margin: auto;
  text-align: center;
}

.bar, .baz {
  height: 10em;
  margin: auto;
}

.bar {
  width: 10em; 
  border-radius: 50%;
  background: #3498db;
}

.baz {
  width: 20em;
  background: #f39c12;
  border-radius: .25em;
}

section {
  height: 100vh;
  background: #1abc9c;
  display: flex;
}

section + section {
  background: #e67e22;
}

section + section + section {
  background: #9b59b6;
}