Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

initial commit

  • Loading branch information...
commit 8c7ba66558caaf2683bf920114331e252a24b8e4 0 parents
@heygrady authored
41 README.md
@@ -0,0 +1,41 @@
+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/).
+
+## Installation
+#### Install the Ruby Gem.
+```
+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.
+
+```ruby
+# Require any additional compass plugins here.
+require 'compass-photoshop-drop-shadow'
+```
+
+#### New Compass Projects
+You can install the grid plugin as part of a new Compass project.
+
+```
+compass create my_project -r compass-photoshop-drop-shadow
+```
+
+## Usage
+
+```scss
+@import 'photoshop-drop-shadow';
+```
+
+## Mixins
+
+- **photoshop-drop-shadow (** *[$angle: 0]*, *[$distance: 0]*, *[$spread: 0]*, *[$size: 0]*, *[$color: #000]* **)** - Replicates a PhotoShop Drop Shadow.
+- **photoshop-inner-shadow (** *[$angle: 0]*, *[$distance: 0]*, *[$spread: 0]*, *[$size: 0]*, *[$color: #000]* **)** - Replicates a PhotoShop Inner Shadow.
+- **photoshop-text-shadow (** *[$angle: 0]*, *[$distance: 0]*, *[$spread: 0]*, *[$size: 0]*, *[$color: #000]* **)** - Replicates a PhotoShop Text Shadow. Please note that `$spread` has no effect for text shadows
+- **photoshop-outer-glow (** *[$choke: 0]*, *[$size: 0]*, *[$color: #fff]* **)** - *Expirimental* Replicates a Photoshop Outer Glow. Please note that noise, technique, source: center, and quality are not supported.
+- **photoshop-inner-glow (** *[$choke: 0]*, *[$size: 0]*, *[$color: #fff]* **)** - *Expirimental* Replicates a Photoshop Inner Glow. Please note that noise, technique, source: center, and quality are not supported.
+
+## 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-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.
2  lib/compass-photoshop-drop-shadow.rb
@@ -0,0 +1,2 @@
+require 'compass' # Ensure Compass
+require 'compass/photoshop-drop-shadow'
7 lib/compass/photoshop-drop-shadow.rb
@@ -0,0 +1,7 @@
+require 'compass/photoshop-drop-shadow/version'
+
+module Compass
+ module PhotoshopDropShadow
+ Compass::Frameworks.register('photoshop-drop-shadow', :path => "#{File.dirname(__FILE__)}/../..")
+ end
+end
5 lib/compass/photoshop-drop-shadow/version.rb
@@ -0,0 +1,5 @@
+module Compass
+ module PhotoshopDropShadow
+ VERSION = '0.0.1'
+ end
+end
77 stylesheets/_photoshop-drop-shadow.scss
@@ -0,0 +1,77 @@
+@import "compass/css3/box-shadow";
+@import "compass/css3/text-shadow";
+
+//--------------------------------
+// Photoshop Shadow Function
+//--------------------------------
+@function photoshop-shadow( $angle: 0, $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
+ @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) == '%' {
+ $spread: $spread/1%; // remove the unit
+ }
+
+ $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-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: 0, $distance: 0, $spread: 0, $size: 0, $color: #000, $inner: false) {
+ @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) {
+ @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) {
+ // NOTE: $spread has no effect for text shadows
+ $shadow: photoshop-shadow($angle, $distance, $spread, $size, $color, true);
+ @include text-shadow(nth($shadow, 1) nth($shadow, 2) nth($shadow, 3) nth($shadow, 5));
+}
+
+//--------------------------------
+// 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));
+}
2  templates/project/manifest.rb
@@ -0,0 +1,2 @@
+# Make sure you list all the project template files here in the manifest.
+stylesheet 'screen.sass', :media => 'screen, projection'
22 templates/project/screen.scss
@@ -0,0 +1,22 @@
+// This is where you put the contents of the main stylesheet for the user's project.
+// It should import your sass stylesheets and demonstrate how to use them.
+@import "photoshop-drop-shadow";
+
+div.box-shadow {
+ @include photoshop-drop-shadow(90, 1px, 0, 0, #000);
+}
+div.inner-box-shadow {
+ @include photoshop-inner-shadow(90, 1px, 0, 0, #000);
+}
+div.multiple-box-shadow {
+ @include photoshop-inner-shadow(90, 1px, 0, 0, #000);
+ @include box-shadow(
+ photoshop-shadow(90, 1px, 0, 0, #000),
+ photoshop-shadow(45, 1px, 10%, 5px, #900),
+ photoshop-shadow(120, 6px, 5%, 3px, #090, inset)
+ );
+}
+h1 {
+ // NOTE: $spread has no effect for text shadows
+ @include photoshop-text-shadow(90, 1px, 0, 0, #000);
+}
Please sign in to comment.
Something went wrong with that request. Please try again.