Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

updating readme and adding $photoshop-global-light variable.

  • Loading branch information...
commit fd926216e8a26edcef2cb6a1f7823b441b689886 1 parent c6e93ab
@heygrady authored
Showing with 19 additions and 12 deletions.
  1. +12 −7 README.md
  2. +7 −5 stylesheets/_photoshop-drop-shadow.scss
View
19 README.md
@@ -1,5 +1,7 @@
Compass plugin to make it easier to work with Photoshop Drop Shadows. You can check out the oginal blog post on [Recreating Photoshop Drop Shadows in CSS3 and Compass](http://heygrady.com/blog/2011/08/06/recreating-photoshop-drop-shadows-in-css3-and-compass/).
+- [Original Gist](https://gist.github.com/1039282)
+
## Installation
#### Install the Ruby Gem.
```
@@ -7,7 +9,7 @@ gem install compass-photoshop-drop-shadow
```
####Existing Compass Projects
-You can include it in any existing Compass project by including the grid in your config.rb file.
+You can include it in any existing Compass project by including the plugin in your config.rb file.
```ruby
# Require any additional compass plugins here.
@@ -15,7 +17,7 @@ require 'compass-photoshop-drop-shadow'
```
#### New Compass Projects
-You can install the grid plugin as part of a new Compass project.
+You can install the plugin as part of a new Compass project.
```
compass create my_project -r compass-photoshop-drop-shadow
@@ -66,21 +68,24 @@ h2 {
}
```
+### Variables
+- **$photoshop-global-light:** *120deg* - Used for the default angle on all shadows. Glow does not use global light.
+
### Functions
-- **photoshop-shadow (** *[$angle: 0]*, *[$distance: 0]*, *[$spread: 0]*, *[$size: 0]*, *[$color: #000]*, *[$inner: false]* **)** - Replicates a PhotoShop Drop Shadow. This function is used by all of the mixins and can also be used for multiple shadows.
-- **photoshop-text-shadow (** *[$angle: 0]*, *[$distance: 0]*, *[$spread: 0]*, *[$size: 0]*, *[$color: #000]* **)** - Replicates a PhotoShop Drop Shadow when applied to text. This function is used by the `photoshop-text-shadow` mixin and can also be used for applying multiple shadows. This function is also useful for use with plugins such as the [textshadow jQuery plugin](https://github.com/heygrady/textshadow). Please note that `$spread` has no effect for CSS `text-shadow`.
+- **photoshop-shadow (** *[$angle: $photoshop-global-light]*, *[$distance: 0]*, *[$spread: 0]*, *[$size: 0]*, *[$color: #000]*, *[$inner: false]* **)** - Replicates a PhotoShop Drop Shadow. This function is used by all of the mixins and can also be used for multiple shadows.
+- **photoshop-text-shadow (** *[$angle: $photoshop-global-light]*, *[$distance: 0]*, *[$spread: 0]*, *[$size: 0]*, *[$color: #000]* **)** - Replicates a PhotoShop Drop Shadow when applied to text. This function is used by the `photoshop-text-shadow` mixin and can also be used for applying multiple shadows. This function is also useful for use with plugins such as the [textshadow jQuery plugin](https://github.com/heygrady/textshadow). Please note that `$spread` has no effect for CSS `text-shadow`.
- **photoshop-glow (** *[$choke: 0]*, *[$size: 0]*, *[$color: #fff]*, [$inner: false] **)** - *Expirimental* Replicates a PhotoShop Glow. This is used by the experimental glow mixins. Please note that noise, technique, source: center, and quality are not supported.
### Mixins
-- **photoshop-drop-shadow (** *[$angle: 0]*, *[$distance: 0]*, *[$spread: 0]*, *[$size: 0]*, *[$color: #000]* **)** - Replicates a PhotoShop Drop Shadow. Please note that blend mode and quality are not supported.
+- **photoshop-drop-shadow (** *[$angle: $photoshop-global-light]*, *[$distance: 0]*, *[$spread: 0]*, *[$size: 0]*, *[$color: #000]* **)** - Replicates a PhotoShop Drop Shadow. Please note that blend mode and quality are not supported.
- `$angle` - Degrees, unit is optional. Units other than `deg` are not supported.
- `$distance` - Length in pixels, unit required.
- `$spread` - Percentage, unit optional, can be expresses as a decimal.
- `$size` - Length in pixels, unit required.
- `$color` - Color, can be hex, rgb, rgba or hsla. Blend mode is not supported. CSS Opacity is essentially equivalent to "Blend Mode: Normal." "Blend Mode: Multiply" is the same as "normal" when placed over a white background. For an appriximation of blend modes in CSS (using the dominant background color), you might try to the experimental [blend modes plugin](https://github.com/heygrady/scss-blend-modes). Dynamic blend modes are not possible in CSS because they require per-pixel color blending.
-- **photoshop-inner-shadow (** *[$angle: 0]*, *[$distance: 0]*, *[$spread: 0]*, *[$size: 0]*, *[$color: #000]* **)** - Replicates a PhotoShop Inner Shadow. Please note that blend mode and quality are not supported.
-- **photoshop-text-shadow (** *[$angle: 0]*, *[$distance: 0]*, *[$spread: 0]*, *[$size: 0]*, *[$color: #000]* **)** - Replicates a PhotoShop Drop Shadow when applied to a text layer. Please note that `$spread` has no effect for CSS `text-shadow`. There is an open task in [Firefox to support the spread radius for text shadow](https://bugzilla.mozilla.org/show_bug.cgi?id=655590). In Photoshop, `text-shadow` is applied by adding a Drop Shadow to a text layer. Inner Shadow or `inset` is not supported on `text-shadow`. For text-shadow support in IE9 and below, consider the [textshadow jQuery plugin](https://github.com/heygrady/textshadow). Please note that blend mode and quality are not supported.
+- **photoshop-inner-shadow (** *[$angle: $photoshop-global-light]*, *[$distance: 0]*, *[$spread: 0]*, *[$size: 0]*, *[$color: #000]* **)** - Replicates a PhotoShop Inner Shadow. Please note that blend mode and quality are not supported.
+- **photoshop-text-shadow (** *[$angle: $photoshop-global-light]*, *[$distance: 0]*, *[$spread: 0]*, *[$size: 0]*, *[$color: #000]* **)** - Replicates a PhotoShop Drop Shadow when applied to a text layer. Please note that `$spread` has no effect for CSS `text-shadow`. There is an open task in [Firefox to support the spread radius for text shadow](https://bugzilla.mozilla.org/show_bug.cgi?id=655590). In Photoshop, `text-shadow` is applied by adding a Drop Shadow to a text layer. Inner Shadow or `inset` is not supported on `text-shadow`. For text-shadow support in IE9 and below, consider the [textshadow jQuery plugin](https://github.com/heygrady/textshadow). Please note that blend mode and quality are not supported.
- **photoshop-outer-glow (** *[$choke: 0]*, *[$size: 0]*, *[$color: #fff]* **)** - *Expirimental* Replicates a Photoshop Outer Glow. Please note that noise, gradient, technique, and quality are not supported.
- **photoshop-inner-glow (** *[$choke: 0]*, *[$size: 0]*, *[$color: #fff]* **)** - *Expirimental* Replicates a Photoshop Inner Glow. Please note that noise, gradient, technique, source: center, and quality are not supported.
View
12 stylesheets/_photoshop-drop-shadow.scss
@@ -1,10 +1,12 @@
@import "compass/css3/box-shadow";
@import "compass/css3/text-shadow";
+$photoshop-global-light: 120deg !default;
+
//--------------------------------
// Photoshop Shadow Function
//--------------------------------
-@function photoshop-shadow( $angle: 0, $distance: 0, $spread: 0, $size: 0, $color: #000, $inner: false ) {
+@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;
@@ -36,7 +38,7 @@
@return ( $h-shadow $v-shadow $blur $css-spread $color unquote($inset) );
}
-@function photoshop-text-shadow( $angle: 0, $distance: 0, $spread: 0, $size: 0, $color: #000 ) {
+@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));
}
@@ -48,21 +50,21 @@
//--------------------------------
// Photoshop Drop Shadow
//--------------------------------
-@mixin photoshop-drop-shadow ($angle: 0, $distance: 0, $spread: 0, $size: 0, $color: #000) {
+@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: 0, $distance: 0, $spread: 0, $size: 0, $color: #000) {
+@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: 0, $distance: 0, $spread: 0, $size: 0, $color: #000) {
+@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));
}
Please sign in to comment.
Something went wrong with that request. Please try again.