• Stars
    star
    821
  • Rank 55,549 (Top 2 %)
  • Language
    CSS
  • License
    MIT License
  • Created almost 13 years ago
  • Updated about 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Using standard color blending functions in SASS.

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 is 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 but it proved impractical to integrate.

A Note on Real CSS3 Blend Modes

Adobe has been working on a W3C spec to add blend modes to CSS3. However, CSS blend modes have extremely limited support in browsers, as of September 2013. This library is not a polyfill for those blend modes. A polyfill for dynamic blend modes will require something like SVG and JavaScript and would likely be quite complicated (or impossible).

A Note on Color Blending

The included functions are based on blend.js from the Pixastic Image Processing Library. 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 explanation of Photoshop blend modes was used as a reference as well as the Wikipedia article on blend modes.

These blend mode functions are not magic. In Photoshop, the blend mode functions are applied dynamically between two layers in order to create a pixel-by-pixel blend. 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.

Installation

Install the Ruby Gem.

gem install compass-blend-modes

Existing Compass Projects

You can include it in any existing Compass project by including the plugin in your config.rb file.

# Require any additional compass plugins here.
require 'compass-blend-modes'

New Compass Projects

You can install the plugin as part of a new Compass project.

compass create my_project -r compass-blend-modes

Usage

@import 'blend-modes';

Examples

// make sure the functions are imported
@import 'blend-modes';

// Solid background
.multiply {
	background-color: blend-multiply(#7FFFD4, #DEB887);
}

// RGBa background
.multiply {
	background-color: blend-multiply(rgba(#7FFFD4, 0.5), rgba(#DEB887, 0.5));
}

Blending Functions

All functions expect a color as the $foreground and $background colors. The colors can be any hex, rgb, rgba, hsl, or hsla color supported by Sass. Blending functions work by combining the colors from the top-most layer, the $foreground, with the lower layer, the $background.

  • blend-normal( $foreground, $background ) - Normal is used primarily to preserve the opacity after the blending has been applied to the RGB values.
  • blend-multiply( $foreground, $background )
  • blend-lighten( $foreground, $background )
  • blend-darken( $foreground, $background )
  • blend-darkercolor( $foreground, $background ) - Not found in Photoshop.
  • blend-lightercolor( $foreground, $background ) - Not found in Photoshop.
  • blend-lineardodge( $foreground, $background )
  • blend-linearburn( $foreground, $background )
  • blend-difference( $foreground, $background )
  • blend-screen( $foreground, $background )
  • blend-exclusion( $foreground, $background )
  • blend-overlay( $foreground, $background )
  • blend-softlight( $foreground, $background )
  • blend-hardlight( $foreground, $background )
  • blend-colordodge( $foreground, $background )
  • blend-colorburn( $foreground, $background )
  • blend-linearlight( $foreground, $background )
  • blend-vividlight( $foreground, $background )
  • blend-pinlight( $foreground, $background )
  • blend-hardmix( $foreground, $background )
  • blend-colorblend( $foreground, $background )
  • blend-dissolve( $foreground, $background ) - Not implemented. Dissolve treats transparency as a pixel pattern and applies a diffusion dither pattern.
  • blend-divide( $foreground, $background )
  • blend-hue( $foreground, $background )
  • blend-luminosity( $foreground, $background )
  • blend-saturation( $foreground, $background )
  • blend-subtract( $foreground, $background )

HSV Functions

These functions are used to convert between RGB, HSL and HSV color formats. The HSV color format is not natively supported by CSS or Sass. These functions were taken directly from this Gist. HSV values are used to calculate the results for the blend-colorblend, blend-hue, blend-luminosity and blend-saturation functions.

  • hsv-to-hsl( $h, [ $s: 0, $v: 0 ] ) - Converts a HSV color values into HSL color values. $h can be a list of three values representing $h, $s and $v.
  • hsl-to-hsv( $h, [ $ss: 0, $ll: 0 ] ) - Converts a HSL color values into HSV color values. $h can be a list of three values representing $h, $ss and $ll.
  • color-to-hsv( $color ) - Converts a Sass Color into a list HSV color values.
  • hsv-to-color( $h, [ $s: 0, $v: 0 ] ) - Converts a list of HSV color values into a Sass Color. $h can be a list of three values representing $h, $s and $v

Internal Functions

These functions are used to save redundant code and are not meant to be used directly. These functions perform the blending operation on a single r, g or b value.

NOTE: These functions are not intended to be used directly.

  • blend-lighten-color( $foreground, $background )
  • blend-darken-color( $foreground, $background )
  • blend-lineardodge-color( $foreground, $background )
  • blend-linearburn-color( $foreground, $background )
  • blend-screen-color( $foreground, $background )
  • blend-exclusion-color( $foreground, $background )
  • blend-overlay-color( $foreground, $background )
  • blend-softlight-color( $foreground, $background )
  • blend-hardlight-color( $foreground, $background )
  • blend-colordodge-color( $foreground, $background )
  • blend-colorburn-color( $foreground, $background )
  • blend-linearlight-color( $foreground, $background )
  • blend-vividlight-color( $foreground, $background )
  • blend-pinlight-color( $foreground, $background )
  • blend-hardmix-color( $foreground, $background )
  • blend-divide-color( $foreground, $background )

More Repositories

1

transform

jQuery 2d transformation plugin
JavaScript
437
star
2

compass-photoshop-drop-shadow

Compass mixin for using the dropshadow values that Photoshop uses. Making it easier to convert PSD files to CSS.
Ruby
119
star
3

textshadow

An IE compatible text-shadow polyfill.
JavaScript
88
star
4

Units

JavaScript library for converting CSS units.
JavaScript
59
star
5

compass-grid-plugin

Compass grid plugin inspired by the 1KB CSS grid. Supports fixed and fluid grids.
Ruby
50
star
6

curve

Functions for drawing time-based curves.
JavaScript
22
star
7

react-redux-notes

Notes on using React-Redux
17
star
8

ace-mode-twig

A mode for the Ace JavaScript text editor for highlighting Twig templates.
JavaScript
12
star
9

transform3d

a jQuery library for faking 3d transformations in all browsers.
JavaScript
11
star
10

docker-wordpress-starterkit

Starter kit for running Wordpress in development using Docker
Shell
11
star
11

1KB-SCSS-Grid

SCSS Grid based on -- but different than -- the 1KB CSS Grid (http://1kbgrid.com/)
Ruby
9
star
12

corners

jQuery Corners
Ruby
5
star
13

holy-grail-app

Example create react app with server-side rendering and critical style loading
JavaScript
5
star
14

compass-sprockets

tool for watching a directory and using Sprockets to combine and minify the files.
Ruby
5
star
15

redux-saga-watch-actions

Convenience methods for creating a saga that watches for actions
JavaScript
5
star
16

fetch-actions

Dispatch actions to handle fetch requests
JavaScript
4
star
17

redux-selectors

Helpers for creating state selectors in a redux application
JavaScript
3
star
18

jquery.truncate

Truncate text to be a specific height.
JavaScript
2
star
19

blog

JavaScript
2
star
20

ace-mode-freemarker

FreeMarker mode for Ace JavaScript editor.
JavaScript
2
star
21

neutrino-preset-standard

Standard JS preset for Neutrino http://standardjs.com/
JavaScript
1
star