10 Compositing and Blending

Posted on by

Pushing the boundaries of the original specification, CSS3 filters and blends can radically change the appearance of your HTML elements.

Filters

See the Pen Splash by Dirk Weber (@DirkWeber) on CodePen.

Example of a SVG filter created by Dirk Weber

CSS Filters has its origin in a SVG (Scalable Vector Graphics) feature for applying image processing effects to vector graphics. Robert O’Callahan figured out how to apply the filters effects to HTML content via CSS.

How Filters Work

Before the rendered page loads, the filter takes a snapshot of the page as a bitmap. The effects are then applied to the HTML elements, which are rendered and composited into a finished page. There are many filters.

It is possible to animate the effects as well, as you can see in the following demo. Filter values are mostly between 0 and 100%, or 0 to 1.0, some go higher.

  • blur(0px) A unit number to determines the amount of gaussian blur.
  • brightness(0-1-10) 0 darkens the picture to black, 1 is normal and up to 10 increased the brightness.
  • contrast(0-1-10) where 0 is solid grey, 1 is normal and up to 10 increased the contrast.
  • drop-shadow(15px 15px 20px silver)
  • grayscale(0-1) Reduce chroma gradually to none at all.
  • hue-rotate(0- 360deg) Rotate the hue through all the colors.
  • invert(0-1) Inverts the colors, .5 is solid grey.
  • opacity(0-1) Where 0 is transparent and 1 is opaque, and everything in between is translucent.
  • saturate(0-1-10) Saturates the colors, where 0 is greyscale, 1 is normal saturation and up to 10 increases the saturation
  • sepia(0-1) Increase in sepia toning of the print;

CSS Code View

Taiyo in the Snow

Anyone familiar with Tompkins Square Park will know that this great tree has been cut down. It was deemed a safety hazard.

Taiyo in the snow

CSS Code View

Lively Grid/compositing demo

Blending Modes

The CSS composting and blending modes feature lets us blend an element’s background layer with another background layer, to blend between background images, gradients, and background colors, or to blend one element with another element.

How Blend Modes Work

Just like in Photoshop, two layers are usually added, with the top layer replacing the bottom layer. The blend modes lets you specify other mathematical relations between the two layers. For example, the multiply mode multiplies the two layers together, with the result that is darker than either layer.

The power of background blend modes can be seen in this compositing blends demo

Background Blending

Background blending blends the layers within a background. This is useful for blending a picture with a background color.

The following blending modes are implemented in webkit and follow those found in Photoshop:

  • normal
  • multiply
  • screen
  • overlay
  • darken
  • lighten
  • color-dodge
  • color-burn
  • hard-light
  • soft-light
  • difference
  • exclusion

The following blending modes are not yet implemented by webkit

  • hue
  • saturation
  • color
  • luminosity

CSS Code View

A more complicated example blends multiple layers. Change the blending mode of each background with varying results.

CSS Code View

Blending Elements

Blending between background layers is all very fine but blending between HTML elements is accumulative, that is, the blend blends the blending associated with each element in the element stack.

There are four elements in the following demo, once container and three children. The blend of each child plays a roll in the final outcome. You can play with the stacking order z-index or change the blending modes to see how these elements interact

CSS Code View

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Title
Title

Complex Blend Effects

Complex Blend Effects

CSS Code View

Masks

Masks allow you to use an image or a polygon clip path to reveal only part of an element. Just like in Photoshop, the white areas display and the black areas do not.
peace

Leave a Reply