stelios-c
7/4/2017 - 2:54 PM

Mixin to convert photoshop shadows to css rules

Mixin to convert photoshop shadows to css rules

// The above require the mathsass library

//--------------------------------
// Photoshop Drop Shadow
//--------------------------------
@mixin photoshop-drop-shadow($angle: 0, $distance: 0, $spread: 0, $size: 0, $color: #000, $opacity: 50, $inner: false) {
  $angle: deg-to-rad($angle);
  $h-shadow: cos($angle) * $distance;
  $v-shadow: sin($angle) * $distance;
  $css-spread: $size * $spread / 100;
  $blur: $size - $css-spread;
  $inset: if($inner != false, "inset", "");
  $opacity: $opacity / 100;
  $color: rgba($color, $opacity);

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

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

//--------------------------------
// Photoshop Text Shadow
//--------------------------------
@mixin photoshop-text-shadow($angle: 0, $distance: 0, $spread: 0, $size: 0, $color: #000, $opacity: 50) {
  $angle: deg-to-rad($angle);
  $h-shadow: round(cos($angle) * $distance);
  $v-shadow: round(sin($angle) * $distance);
  $css-spread: $size * $spread / 100;
  $blur: $size - $css-spread;
  $opacity: $opacity / 100;
  $color: rgba($color, $opacity);

  @include text-shadow($h-shadow $v-shadow $blur $color);
}