compass-photoshop-gradient-overlay 1.0.0

data/lib/compass-photoshop-gradient-overlay.rb

@@ -0,0 +1,6 @@
+require 'compass'
+
+# This tells Compass what your Compass extension is called, and where to find
+#  its files
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('compass-photoshop-gradient-overlay', :path => extension_path)

data/stylesheets/_photoshop-blend-modes.scss

@@ -0,0 +1,142 @@
+// Photoshop-style blend modes
+// --------------------------------------------------
+
+// Blending algorithms adapted from:
+// http://jswidget.com/blog/category/image-blending-algorithm/
+
+// Explanation of blend modes taken from:;
+// https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html
+
+
+// The source color is multiplied by the destination color and replaces the destination. The resultant color is always at least as dark as either the source or destination color. Multiplying any color with black results in black. Multiplying any color with white preserves the original color.
+@function blend--multiply($background-color, $foreground-color) {
+    @return $foreground-color * $background-color / 255;
+}
+
+
+// Multiplies the complements of the backdrop and source color values, then complements the result. The result color is always at least as light as either of the two constituent colors. Screening any color with white produces white; screening with black leaves the original color unchanged. The effect is similar to projecting multiple photographic slides simultaneously onto a single screen.
+@function blend--screen($background-color, $foreground-color) {
+    @return $foreground-color + $background-color - $foreground-color * $background-color / 255;
+}
+
+
+// Multiplies or screens the colors, depending on the backdrop color value. Source colors overlay the backdrop while preserving its highlights and shadows. The backdrop color is not replaced but is mixed with the source color to reflect the lightness or darkness of the backdrop.
+@function blend--overlay($background-color, $foreground-color) {
+    @return if($background-color < 128, 2 * $foreground-color * $background-color / 255, 255 - 2 * (255 - $foreground-color) * (255 - $background-color) / 255);
+}
+
+
+// Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop.
+@function blend--soft-light($v1, $v2) {
+    @return if($v1 > 127.5, $v2 + (255 - $v2) * (($v1 - 127.5) / 127.5) * (0.5 - abs($v2-127.5)/255), $v2 - $v2 * ((127.5 -  $v1) / 127.5) * (0.5 - abs($v2-127.5)/255));
+}
+
+
+// Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop.
+@function blend--hard-light($v1, $v2) {
+    @return if($v1 > 127.5, $v2 + (255 - $v2) * (($v1 - 127.5) / 127.5), $v2 * $v1 / 127.5);
+}
+
+// Linear Color Dodge
+@function blend--linear-color-dodge($v1, $v2) {
+    @return min($v1 + $v2, 255);
+}
+
+
+// Linear Color Burn
+@function blend--linear-color-burn($v1, $v2) {
+    @return if($v1 + $v2 < 255, 0, $v1 + $v2 - 255);
+}
+
+
+// Selects the darker of the backdrop and source colors. The backdrop is replaced with the source where the source is darker; otherwise, it is left unchanged.
+@function blend--darken($v1, $v2) {
+    @return min($v1,$v2);
+}
+
+
+// Selects the lighter of the backdrop and source colors. The backdrop is replaced with the source where the source is lighter; otherwise, it is left unchanged.
+@function blend--lighten($v1, $v2) {
+    @return max($v1,$v2);
+}
+
+
+// Subtracts the darker of the two constituent colors from the lighter color. Painting with white inverts the backdrop color; painting with black produces no change.
+@function blend--difference($v1, $v2) {
+    @return abs($v1 - $v2);
+}
+
+
+// Produces an effect similar to that of the Difference mode but lower in contrast. Painting with white inverts the backdrop color; painting with black produces no change.
+@function blend--exclusion($v1, $v2) {
+    @return $v1 + $v2 - $v1 * $v2 / 127.5;
+}
+
+
+// Reflex
+@function blend--reflex($v1, $v2) {
+    @return if($v1 == 255, $v1, min(255, ($v2 * $v2 / (255 - $v1))));
+}
+
+
+// Linear Light
+@function blend--linear-light($v1, $v2) {
+    @return if($v1 < 128, blend--linear-burn($v2, (2 * $v1)), blend--linear-dodge($v2, (2 * ($v1 - 128))));
+}
+
+
+// Pin Light
+@function blend--pin-light($v1, $v2) {
+    @return if($v1 < 128, blend--darken($v2, (2 * $v1)), blend--lighten($v2, (2 * ($v1 - 128))));
+}
+
+
+// Vivid Light
+@function blend--vivid-light($v1, $v2) {
+    @return if($v1 < 128, blend--color-burn($v2, (2 * $v1)), blend--color-dodge($v2, (2 * ($v1 - 128))));
+}
+
+
+// Hard Mix
+@function blend--hard-mix($v1, $v2) {
+    @return if(blend--vivid-light($v1,$v2) < 128, 0, 255);
+}
+
+
+// Mix two colors together
+@function photoshop-blend($mode, $background-color, $foreground-color, $alpha:1) {
+    $red1: red($background-color);
+    $green1: green($background-color);
+    $blue1: blue($background-color);
+    $red2: red($foreground-color);
+    $green2: green($foreground-color);
+    $blue2: blue($foreground-color);
+
+    @if(unquote($mode) == multiply) {
+        @return rgba(
+                    blend--multiply($red1, $red2),
+                    blend--multiply($green1, $green2),
+                    blend--multiply($blue1, $blue2),
+                    $alpha
+                );
+    } @else if(unquote($mode) == screen) {
+        @return rgba(
+                    blend--screen($red1, $red2),
+                    blend--screen($green1, $green2),
+                    blend--screen($blue1, $blue2),
+                    $alpha
+                );
+    } @else if(unquote($mode) == overlay) {
+        @return rgba(
+                    blend--overlay($red1, $red2),
+                    blend--overlay($green1, $green2),
+                    blend--overlay($blue1, $blue2),
+                    $alpha
+                );
+    } @else {
+        @return rgba(
+                    $foreground-color,
+                    $alpha
+                );
+    }
+}

data/stylesheets/_photoshop-gradient-overlay.scss

@@ -0,0 +1,57 @@
+@import "photoshop-blend-modes";
+
+// Photoshop Gradient Overlay
+// --------------------------
+@function photoshop-gradient-overlay(
+                            $bg-color,
+                            $blend: normal,
+                            $opacity: 100%,
+                            $angle: 90deg,
+                            $scale: 100%,
+                            $gradient-colors: (#000, #fff),
+                            $gradient-stops: (0%, 100%)
+                          ) {
+
+    $css-angle: convert-angle($angle);
+    $color-stops: ();
+
+    @for $i from 1 through length($gradient-colors) {
+        $blended-color: photoshop-blend($blend, $bg-color, nth($gradient-colors, $i), percentage-to-decimal($opacity));
+        $stop: join($blended-color, stop-scale(nth($gradient-stops, $i), $scale), space);
+        $color-stops: append($color-stops, $stop, comma);
+    }
+    @return linear-gradient($css-angle, $color-stops);
+}
+
+// Adjust the color-stops based on the scale value
+@function stop-scale($stop, $scale) {
+    $stop: percentage-to-decimal($stop);
+    $new-stop: 0;
+    $scale: percentage-to-decimal($scale);
+
+    @return $scale * $stop - (0.5 * ($scale - 1));
+}
+
+// Convert percentage units to decimal units
+@function percentage-to-decimal($percentage) {
+    @if unit($percentage) == '%' {
+        $percentage: $percentage/100%;
+    }
+    @return $percentage;
+}
+
+// Attempt to convert a Photoshop angle to a CSS keyword.
+// If a valid keyword isn't available, convert to a CSS angle (0deg = north in CSS; east in Photoshop)
+@function convert-angle($angle) {
+    @if $angle == 0 {
+        @return left;
+    } @else if $angle == 90 {
+        @return bottom;
+    } @else if $angle == 180 {
+        @return right;
+    } @else if $angle == -90 {
+        @return top;
+    } @else {
+        @return $angle - 90deg;
+    }
+}

metadata

@@ -0,0 +1,97 @@
+--- !ruby/object:Gem::Specification 
+name: compass-photoshop-gradient-overlay
+version: !ruby/object:Gem::Version 
+  hash: 23
+  prerelease: 
+  segments: 
+  - 1
+  - 0
+  - 0
+  version: 1.0.0
+platform: ruby
+authors: 
+- Tim Hettler
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2013-05-23 00:00:00 Z
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: sass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 3
+        segments: 
+        - 0
+        version: "0"
+  type: :runtime
+  version_requirements: *id001
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id002 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 3
+        segments: 
+        - 0
+        version: "0"
+  type: :runtime
+  version_requirements: *id002
+description: A compass extension to translate between Photoshop gradient overlays and CSS linear-gradients
+email: 
+- me+github@timhettler.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- lib/compass-photoshop-gradient-overlay.rb
+- stylesheets/_photoshop-blend-modes.scss
+- stylesheets/_photoshop-gradient-overlay.scss
+homepage: https://github.com/timhettler/compass-photoshop-gradient-overlay
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 23
+      segments: 
+      - 1
+      - 3
+      - 6
+      version: 1.3.6
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.8.25
+signing_key: 
+specification_version: 3
+summary: A compass extension to translate between Photoshop gradient overlays and CSS linear-gradients
+test_files: []
+