Web Development

Applying CSS3 filter effects to graphic elements

Ryan Boudreaux provides CSS3 and HTML snippets to illustrate some of the filter effects that can be applied to graphics.

Filter effects are a graphical action that when applied to an element such as a Scalable Vector Graphics (SVG) file will modify the end result where each filter effect is defined by its associated filter elements. You are probably more familiar with photo editing software and the various filter effects they provide, such as blur, distort, sharpen, stretch, texture, and others. Each filter has an essential purpose to apply the effect to a graphics element or container element with each filter element containing a set of filter primitives as its children. Each filter primitive represents some form of image processing operation, typically a single fundamental effect -- blur, for example -- which can have a deviation effect on one or more inputs, producing a graphical result. These were the original filter effects which use XML to parse and render the assorted results.

Adapting the use of SVG filters and taking it one step further, a group of authors from a trio of organizations including Adobe Systems, Apple Inc., and Opera Software are delivering on the W3C Editor's Working Draft edition of the W3C CSS and SVG Working Groups' Filter Effects 1.0, which is part of the current work on W3C Standards for Web Design and Applications. In this piece, I will review the predefined CSS3 filter effects, show examples of each of them, including HTML and CSS coding snippets, for each of the effects. I will also review the browser support for the CSS3 filter effects. Note that this property is significantly different from and incompatible with Microsoft's older "filter" property.

According to the specification abstract, at its core, the CSS3 filter effects are a way for web developers to specify styling for elements before they are rendered in the web page document. Normally, an element rendered in CSS or SVG can theoretically be described as if the element and its children are drawn into a buffer and then that buffer is composited into the parent elements; however, the CSS filter effects are applied before the compositing stage. CSS filters are further described in a manner that allows them to style content such as HTML and SVG elements including a CSS <image> value. The CSS3 filter effects can be applied to DOM elements such as images, text, and several HTML5 elements such as article, aside, section, canvas and video.

Blur

The blur filter allows you to set the radius of distortion and fuzziness by pixel. The CSS snippet is displayed below:

/* CSS3 Blur Filter Effect */
.blur {
       -webkit-filter: blur(1px);
}

Called from the HTML code snippet:

<img src="i/coast.gif" alt="Coast" title="Coast" width="400" />
<img class="blur" src="i/coast.gif" alt="Coast" title="Coast" width="400" />
The two images for side-by-side image comparison are displayed in Figure B below as captured from Google Chrome Version 22.0.1229.94 m:

Figure B

Playing around with the pixel setting at 15px produces the following result on the right side image:

Figure C

You can also use the blur filter on paragraphs <p> as well, as demonstrated below with the following CSS and HTML code snippets and the short paragraph comparisons as displayed in Figure D as shown in Google Chrome Version 22.0.1229.94 m:
.blur {
       -webkit-filter: blur(1px);
}
<p>A normal paragraph</p>
<p class="blur">A paragraph with blur effect set to 1px.</p>

Figure D

Brightness

The brightness filter allows you to set illumination and intensity by percentage. The example is demonstrated below with the following CSS code snippets and the side-by-side image comparisons as displayed in Figure E and F as shown in Google Chrome Version 22.0.1229.94 m.

Setting the brightness to twenty percent:

/* Brightness Filter Effect */
.brightness {
       -webkit-filter: brightness(20%);
}

Figure E

Setting the brightness to minus twenty percent will darken the element as shown below:

/* Brightness Filter Effect */
.brightness {
       -webkit-filter: brightness(-20%);
}

Figure F

Contrast

The contrast filter allows you to set the difference in luminance and/or color by percentage. The example is demonstrated below with the following CSS code snippets and the side-by-side image comparisons as displayed in Figure G and H as shown in Google Chrome Version 22.0.1229.94 m.

Contrast set to sixty percent:

/* Contrast Filter Effect */

.contrast {
       -webkit-filter: contrast(60%);
}

Figure G

Contrast set to thirty percent:

/* Contrast Filter Effect */
.contrast {
       -webkit-filter: contrast(30%);
}

Figure H

Drop shadow

The drop shadow filter effect is a slight departure from the box shadow property effect in that the drop shadow filter effect has the advantage of acknowledging the outline and transparency of an element. The drop shadow filter does have a similar syntax as the box shadow property with the exception that inset drop-shadows and the spread length values are not supported just yet.

The syntax for the CSS3 drop shadow filter effect is written in the form:

drop-shadow: Xpx Ypx Bpx #abc

Xpx = x-axis horizontal offset

Ypx = y-axis vertical offset

Bpx = blur effect

#abc = color

The following examples demonstrate the drop shadow filter effects for solid image such as the coast example previously used, as well as a png image of a flower with a transparent background. The example is demonstrated below with the following CSS code snippet and the side-by-side image comparisons as displayed in Figure I and J as shown in Google Chrome Version 22.0.1229.94 m.

Drop shadow set to the following:

/* Drop Shadow Filter Effect */
.dropshadow {
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

The coastal image with the side-by-side comparison:

Figure I

The flower with a transparent background saved as a png image with the side-by-side comparison:

Figure J

Notice the drop shadow follows the transparency of the flower image.

The second post in this series on CSS3 filter effects will review grayscale, hue rotation, invert, opacity, saturate, sepia, and combined effects, which includes a demonstration of black and white rendering of elements. I will also review the current browser support for the CSS3 filter effects, as well as provide a download of the HTML and CSS files used for the demonstrations.

Can you think of any web-based implementations other than the sample elements that I have presented today that could appropriately utilize the CSS3 filter elements?

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

1 comments
lehnerus2000
lehnerus2000

As usual, some interesting information/tips. :)

Editor's Picks