Skip to content

Commit

Permalink
Updating notes to explain the difference with Adobe's proposed CSS3 b…
Browse files Browse the repository at this point in the history
…lend modes spec.
  • Loading branch information
heygrady committed Mar 23, 2013
1 parent 782e644 commit 8187271
Showing 1 changed file with 6 additions and 3 deletions.
9 changes: 6 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
# SCSS Blend Modes
CSS doesn't natively support color blending the way that Photoshop does. This library attempts to fake that by allowing you to blend a foreground color with a background color in order to approximate color blending. This was originally intended for use with the [Compass Photoshop Drop Shadow Plugin](https://github.com/heygrady/compass-photoshop-drop-shadow) but it proved impractical to integrate.
CSS doesn't natively support color blending the way that Photoshop does. This library attempts to fake that by allowing you to blend a foreground color with a background color in order to approximate color blending. This not a dynamic blend; you can't use this to blend a color with an image. This was originally intended for use with the [Compass Photoshop Drop Shadow Plugin](https://github.com/heygrady/compass-photoshop-drop-shadow) but it proved impractical to integrate.

## A Note on Real CSS3 Blend Modes
Adobe has been working on a [W3C spec](http://www.w3.org/TR/compositing/) to [add blend modes to CSS3](http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/). However, this has [not been implemented in any browser](http://css3clickchart.com/#blending-modes). This library is **not** a polyfill for those blend modes. A polyfill for real, dynamic blend modes will require SVG or JavaScript + Canvas.

## Blending Functions
The included functions are based on the [blend.js](https://github.com/jseidelin/pixastic/blob/master/actions/blend.js) in the [Pixastic Image Processing Library](http://www.pixastic.com/lib/). I chose this library because JavaScript is easy enough to read and the blend modes seemed to match closely with what Photoshop offered. Additionally, a [detailed explaination of Photoshop blend modes](http://photoblogstop.com/photoshop/photoshop-blend-modes-explained) was used as a reference as well as the [Wikipedia article on blend modes](http://en.wikipedia.org/wiki/Blend_modes).
The included functions are based on the [blend.js](https://github.com/jseidelin/pixastic/blob/master/actions/blend.js) file from the [Pixastic Image Processing Library](http://www.pixastic.com/lib/). I chose this library because JavaScript is easy enough to read and the blend modes seemed to match closely with what Photoshop offered. Additionally, a [detailed explaination of Photoshop blend modes](http://photoblogstop.com/photoshop/photoshop-blend-modes-explained) was used as a reference as well as the [Wikipedia article on blend modes](http://en.wikipedia.org/wiki/Blend_modes).

## Usage
These blend mode functions are not magic. In Photoshop, the blend mode functions are applied dynamically between two layers in order to create various effects. In CSS they can only be used to combine two solid colors together. Blend modes can be useful in times when a Photoshop design implements a blend mode on an element, like a drop shadow, that is over a mostly solid background. Choosing a dominant background color and a solid foreground color will allow for the apearance of a dynamically blended color.
These blend mode functions are not magic. In Photoshop, the blend mode functions are applied dynamically between two layers in order to create various effects. In CSS they can only be used to combine two solid colors together. Blend modes can be useful in times when a Photoshop design implements a blend mode on an element, like a drop shadow, that is over a mostly solid background. Choosing a dominant background color and a solid foreground color may allow for the apearance of a dynamically blended color.

```scss
.multiply {
Expand Down

0 comments on commit 8187271

Please sign in to comment.