Q
Version: 1.0.1
Source on Github

Compass Text Shadow

Provides a mixin for CSS text shadows. See CSS3 spec: text-shadow.

This file can be imported using: @import "compass/css3/text-shadow"

Examples

Text-shadow
css3 mixin for text-shadow

Imports

  1. Browser Support – Provides configuration options for the Compass Browser Support Matrix.

Configurable Variables help

#aaaaaa

These defaults make the arguments optional for this mixin If you like, set different defaults in your project

0px

0px

1px

false

Mixins

view source 

=text-shadow($shadow...)
  $shadow: if(length($shadow) > 0, $shadow, default)
  $default: -compass-space-list(compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color))
  $shadows-without-spread: join((), (), comma)
  $shadows: join((), (), comma)
  $has-spread: false
  @each $layer in $shadow
    $layer: if($layer == "default", $default, $layer)
    @if length($layer) > 4
      $has-spread: true
      $shadows-without-spread: append($shadows-without-spread, nth($layer, 1) nth($layer, 2) nth($layer, 3) nth($layer, 5))
      $shadows: append($shadows, $layer)
    @else
      $shadows-without-spread: append($shadows-without-spread, $layer)
      $shadows: append($shadows, $layer)
  @if $has-spread
    text-shadow: $shadows-without-spread
  text-shadow: $shadows

@mixin text-shadow($shadow...) {
  $shadow: if(length($shadow) > 0, $shadow, default);
  $default: -compass-space-list(compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color));
  $shadows-without-spread: join((), (), comma);
  $shadows: join((), (), comma);
  $has-spread: false;
  @each $layer in $shadow {
    $layer: if($layer == "default", $default, $layer);
    @if length($layer) > 4 {
      $has-spread: true;
      $shadows-without-spread: append($shadows-without-spread, nth($layer, 1) nth($layer, 2) nth($layer, 3) nth($layer, 5));
      $shadows: append($shadows, $layer);
    }
    @else {
      $shadows-without-spread: append($shadows-without-spread, $layer);
      $shadows: append($shadows, $layer);
    }
  }
  @if $has-spread {
    text-shadow: $shadows-without-spread;
  }
  text-shadow: $shadows;
}

Provides cross-browser text shadows when one or more shadows are needed. Each shadow argument should adhere to the standard css3 syntax for the text-shadow property.

Note: if any shadow has a spread parameter, this will cause the mixin to emit the shadow declaration twice, first without the spread, then with the spread included. This allows you to progressively enhance the browsers that do support the spread parameter.

view source 

=single-text-shadow($hoff: false, $voff: false, $blur: false, $spread: false, $color: false)
  // A lot of people think the color comes first. It doesn't.
  @if type-of($hoff) == color
    $temp-color: $hoff
    $hoff: $voff
    $voff: $blur
    $blur: $spread
    $spread: $color
    $color: $temp-color
  // Can't rely on default assignment with multiple supported argument orders.
  $hoff: if($hoff, $hoff, $default-text-shadow-h-offset)
  $voff: if($voff, $voff, $default-text-shadow-v-offset)
  $blur: if($blur, $blur, $default-text-shadow-blur)
  $spread: if($spread, $spread, $default-text-shadow-spread)
  $color: if($color, $color, $default-text-shadow-color)
  // We don't need experimental support for this property.
  @if $color == none or $hoff == none
    +text-shadow(none)
  @else
    +text-shadow(compact($hoff $voff $blur $spread $color))

@mixin single-text-shadow($hoff: false, $voff: false, $blur: false, $spread: false, $color: false) {
  // A lot of people think the color comes first. It doesn't.
  @if type-of($hoff) == color {
    $temp-color: $hoff;
    $hoff: $voff;
    $voff: $blur;
    $blur: $spread;
    $spread: $color;
    $color: $temp-color;
  }
  // Can't rely on default assignment with multiple supported argument orders.
  $hoff: if($hoff, $hoff, $default-text-shadow-h-offset);
  $voff: if($voff, $voff, $default-text-shadow-v-offset);
  $blur: if($blur, $blur, $default-text-shadow-blur);
  $spread: if($spread, $spread, $default-text-shadow-spread);
  $color: if($color, $color, $default-text-shadow-color);
  // We don't need experimental support for this property.
  @if $color == none or $hoff == none {
    @include text-shadow(none);
  }
  @else {
    @include text-shadow(compact($hoff $voff $blur $spread $color));
  }
}

Provides a single cross-browser CSS text shadow.

Provides sensible defaults for the color, horizontal offset, vertical offset, blur, and spread according to the configuration defaults above.