ckoppenhaver
9/11/2013 - 3:04 AM

Photoshop effects

Photoshop effects

// From
// https://github.com/heygrady/compass-photoshop-drop-shadow

$photoshop-global-light: 120deg !default;

//--------------------------------
// Photoshop Shadow Function
//--------------------------------
@function photoshop-shadow( $angle: $photoshop-global-light, $distance: 0, $spread: 0, $size: 0, $color: #000, $inner: false ) {
  // default to degrees, same as photoshop
  @if unitless($angle) {
    $angle: $angle * 1deg;
  }

  // compass has a bug converting degrees (fixed in Compass 0.12)
  // https://github.com/chriseppstein/compass/pull/666
  @if unit($angle) ==  'deg' {
    // convert to radians to avoid issues
    $angle: ((180 - ($angle/1deg)) * pi() / 180);
  }
  //TODO: other angle units, including rad, will cause issues

  // SASS doesn't do percentages cleanly
  @if not(unitless($spread)) and unit($spread) == '%' {
    // remove the percentage unit
    $spread: $spread/1%;
  } @else if $spread < 0 {
    // correct for passing the spread as a decimal
    $spread: $spread * 100;
  }

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

  @return ( $h-shadow $v-shadow $blur $css-spread $color unquote($inset) );
}

@function photoshop-text-shadow( $angle: $photoshop-global-light, $distance: 0, $spread: 0, $size: 0, $color: #000 ) {
  $shadow: photoshop-shadow($angle, $distance, $spread, $size, $color);
  @return (nth($shadow, 1) nth($shadow, 2) nth($shadow, 3) nth($shadow, 5));
}

@function photoshop-glow($choke: 0, $size: 0, $color: #fff, $inner: false) {
  @return photoshop-shadow(0, 0, $choke, $size, $color, $inner);
}

//--------------------------------
// Photoshop Drop Shadow
//--------------------------------
@mixin photoshop-drop-shadow ($angle: $photoshop-global-light, $distance: 0, $spread: 0, $size: 0, $color: #000) {
  @include box-shadow(photoshop-shadow($angle, $distance, $spread, $size, $color));
}

//--------------------------------
// Photoshop Inner Shadow
//--------------------------------
@mixin photoshop-inner-shadow ($angle: $photoshop-global-light, $distance: 0, $spread: 0, $size: 0, $color: #000) {
  @include box-shadow(photoshop-shadow($angle, $distance, $spread, $size, $color, true));
}

//--------------------------------
// Photoshop Text Shadow
//--------------------------------
@mixin photoshop-text-shadow ($angle: $photoshop-global-light, $distance: 0, $spread: 0, $size: 0, $color: #000) {
  // NOTE: $spread has no effect for text shadows
  @include text-shadow(photoshop-text-shadow($angle, $distance, $spread, $size, $color));
}

//--------------------------------
// Photoshop Outer Glow
//--------------------------------
@mixin photoshop-outer-glow ($choke: 0, $size: 0, $color: #fff) {
  // experimantal
  // noise, technique, source: center, and quality are not supported
  @include box-shadow(photoshop-glow($choke, $size, $color, false));
}

//--------------------------------
// Photoshop Inner Glow
//--------------------------------
@mixin photoshop-inner-glow ($choke: 0, $size: 0, $color: #fff) {
  // experimantal
  // noise, technique, source: center, and quality are not supported
  @include box-shadow(photoshop-glow($choke, $size, $color, true));
}