"Photoshop" drop shadow

sass_functions.scss

/* Converts how Photoshop users think about Drop Shadow to CSS */
/* http://timhettler.github.io/cssconf-2013/#!/23 */

@function photoshop-shadow( $angle: 120, $distance: 0, $spread: 0, $size: 0, $color: #000, $inner: false ) {

  $x-offset: round( cos( $angle ) * $distance );
  $y-offset: round( sin( $angle ) * $distance );
  $css-spread: $size * ( $spread/100 );
  $blur: $size - $css-spread;
  $inset: if( $inner != false, 'inset', '' );

  @return ( $x-offset $y-offset $blur $css-spread $color unquote($inset) );
}

/* determine text color based on background-color */
@function get-button-color( $color ) {
  @return if( lightness( $color ) > 50, #333, #fff );
}

/* Photoshop Text Shadow */
@function photoshop-text-shadow( $angle: 120deg, $distance: 0, $spread: 0, $size: 0, $color: #000 ) {
 @if $spread > 0 {
    @warn "spread has no effect for text shadows";
  }
  $shadow: photoshop-shadow( $angle, $distance, $spread, $size, $color );
  @return ( nth( $shadow, 1 ) nth( $shadow, 2 ) nth( $shadow, 3 ) nth( $shadow, 5 ) );
}

/* convert angles for Photoshop Gradient */
@function convert-angle($angle) {
    @if $angle == 0 {
        @return left;
    } @else if $angle == 45 {
        @return left bottom;
    } @else if $angle == 90 {
        @return bottom;
    } @else if $angle == 135 {
        @return right bottom;
    …
    } @else {
        @return $angle - 90deg;
    }
}
$css-direction: convert-angle( 90deg );  // bottom
$css-direction: convert-angle( 140deg ); // 50deg

/* Photoshop Scale for linear Gradient */
@function stop-scale( $stop, $scale ) {
    $stop: percentage-to-decimal( $stop );
    $scale: percentage-to-decimal( $scale );

    @return $scale * $stop - ( 0.5 * ( $scale - 1 ) );
}

$stop1: stop-scale( 0%, 100% );   // 0%
$stop2: stop-scale( 100%, 100% ); // 100%

$stop1: stop-scale( 0%, 150% );   // -25%
$stop2: stop-scale( 100%, 150% ); // 125%

$stop1: stop-scale( 0%, 50% );    // 25%
$stop2: stop-scale( 100%, 50% );  // 75%

$gradient-colors: ( #000, #fff );
$gradient-stops: ( 0%, 100% );
$scale: 100%;
$color-stops: ();

@for $i from 1 through length( $gradient-colors ) {

  $stop: join( nth( $gradient-colors, $i ), stop-scale( nth( $gradient-stops, $i ), $scale ), space );
  $color-stops: append($color-stops, $stop, comma);

}

@return linear-gradient($css-direction, $color-stops);


/* .simple-gradient {
  @include background-image(
    photoshop-gradient-overlay(
      100%, 90deg, 100%, ( #000, #fff ), ( 0%, 100% )
    )
  );
}
*/

@function blend--normal($bg, $fg) {
  @return $fg;
}

@function blend--multiply($bg, $fg) {
  @return $fg * $bg / 255;
}

@function blend--overlay($bg, $fg) {
  @if ($bg < 128) {
    @return 2 * $fg * $bg / 255;
  } @else {
    @return 255 - 2 * (255 - $fg) * (255 - $bg) / 255);
  }
}


@mixin button($bg-color) {
  $text-color: get-button-color($bg-color);
  $shadow-color: get-shadow-color($bg-color);
  @extend %button;
  @include background-image(photoshop-gradient-overlay($bg-color, 'overlay', 50%, 90deg));
  background-color: $bg-color;
  box-shadow: photoshop-drop-shadow(90deg, 1px, 0, 1px, rgba(#000, 0.25));
  color: $text-color;
  text-shadow: photoshop-text-shadow(-90deg, 1px, 0, 0, rgba($shadow-color, 0.4));

  &:active {
    @include background-image(photoshop-gradient-overlay($bg-color, 'overlay', 50%, -90deg));
    box-shadow: photoshop-inner-shadow(90deg, 1px, 0, 4px, rgba(#000, 0.35));
    text-shadow: photoshop-text-shadow(90deg, 1px, 0, 0, rgba($shadow-color, 0.4));
  }
}