Experimental CSS3 and Microsoft's Filters

1: Experimental CSS3 properties

When using CSS level 3, it is important to remember that it has not actually been released as a finalized standard, and the implementation of it is not consistent across all browsers. While some aspects of CSS 3 are finally working their way into most current browsers, it is a long way from complete, and each browser maker is following their own schedule in implementing each feature. In most cases, when a feature is mostly working, but not considered "ready" for full use, a testing version of it will be made available in the browser with a special "proprietary" prefix that varies depending on the browser. Below is a list of the prefixes, and which browsers they apply to:

An example of a property that would work like this would be the experimental linear-gradient value for backgrounds, which in the official CSS 3 documentation would be used as:

The above example would create a diaagonal gradient from white in one corner to black in the opposite corner. Since not all browsers support the property as a "final" version yet however, to get this to work in all browsers that support something like it, you would need to write this:

When applied to a div tag, the above class would produce something like the following:

In the example above, fallbacks are provided for nearly every kind of browser out there - in each case remember that the last version of the property that the browser actually understands is the one that will be used. Thus, since every browser understands the first property, that value will be loaded in for certain - after that, each browser will look at each successive version, and if the browser understands it, they will replace the background: value with the new version. Webkit browsers for example, will start with the solid black background, then replace it with the simple gradient from -webkit-gradient, then again they will replace it with -webkit-linear-gradient, and in the case of the most recent versions will last replace it one further time with the actual linear-gradient value.

The final entry in the example stylesheet is given as a fallback for IE versions 6 to 9, which have no support at all for the linear-gradient background value, and instead use an older Microsoft proprietary extension to stylesheets called Filters (which are discussed in section 2).

One big advantage to these properties is that they can be used to add very complex looking backgrounds and colourings to your site without the need to load images as part of the site that may slow down the loading of your page.

One example of just how complex a page with no actual images, but a complex set of CSS 3 properties attached can look is here. In that example, even the flower petals are produced through the use of nothing other than the CSS 3 properties border-radius, and transform being applied to div tags, though in this case the tags and CSS properties are being written out by Javascript. Unfortunately, due to the poor to non-existent support for most of the properties involved in Internet Explorer, the page does not look the same when viewed with that browser.

2: Microsoft's filter: property

2.1: Microsoft Internet Explorer Only

The material discussed in this section applies to Microsoft's Internet Explorer only, and is not actually part of any true internet standard at all. Filters were added as an extension to CSS for internet explorer, and were never adopted by any other browsers. Instead, features similar to some of the more useful features are now found in the proposed standards for CSS level 3, which should be finalized some time in 2012. Until then, the CSS level 3 features which produce some of the same effects as filters are available only in small subsets, in different browsers.

2.2: Filters are for Text or Images

Filters are like an extension to style sheets - they are applied through the same commands, and perform the same types of task - the enhancement of your web site's presentation. What they are applied to depends mainly on which filter is being used, and what effect you are trying to achieve. Some filters apply best to images, some are best for text, and some can be applied equaly well to either. While the majority of the filters can make your text look very interesting, or can be used to draw attention to it, they do not make it easy to read, so they should be used sparingly, to avoid making your page too dificult for the user to look at.

One very usefull aspect of Filters is that they can be changed dynamically by JavaScript on your web page. This can be used to both to add interesting effects to your page, and to draw attention to something you consider important. Many of these alterations can be done in conjunction with the window.setInterval() method, to create animated text and effects on your page, like this:

All filters, regardless of how they are applied, follow the same basic syntax - they are applied as a style (like in a style sheet) with the style property filter, and the specific filter is stated afterwards, like this:

2.3: Simple Filters

Some filters are very easy to apply, they need no calculation, they are merely written as a single command in the style tag. Examples of this kind of filter include flipv, and fliph (for flipping things vertically and horizontally), or the image effect filters, gray, xray, and invert. In the following table, we will see examples of each. In this case, the style is being applied to the table cell itself, to show what the effect of the filter is on both text, and the image below it.

<td> No style is applied.	Here is some text
<td style="filter: fliph"> A Horizontal Flip	Here is some text
<td style="filter: flipv"> A Vertical Flip	Here is some text
<td style="filter: gray"> Change the image to grayscale	Here is some text
<td style="filter: invert"> Use a photonegative effect on colours and brightness.	Here is some text
<td style="filter: xray"> A special filter that is just like using both gray, and invert.	Here is some text

It's also possible to combine multiple filters, by applying all of the relevant values at the same time, like this:

<td style="filter: flipv invert"> More than one filter can be used by adding their names into the filter tag with just a space between them.

Here is some text

2.4: More Complex Filters

Unlike the above examples, some filters require a bit more than an on/off switch. They require additional parameters to make them work, and rather than separate the parameters into different 'sub-filters' like the way that CSS1 deals with the border property (ie: border-style, border-color, border-width, ...) the parameters are grouped together in brackets after the filter name, like this:

The parameters of these filters can be altered from within scripts, to give a variety of effects, like moving shadows, pulsing glows, or varying transparency as something fades in or out of view. In each case, the possible parameters of the filter are different, and the meanings of those values vary depending on what they are being applied to. For example, the shadow filter above has the parameters direction and color. The direction parameter takes a direction in degrees, with 0 and 360 being straight up, and 90 being directly to the right. The color parameter takes either the name of a colour, like red, or a 6 digit hex-code for a colour, like #FF0000. Many of these complex filters extend the image or text beyond their normal size - you may wish to include padding in the style applied to them, to allow the whole effect to show.

Since many of the parameters of these complex filters can change the appearance of what they are placed on greatly, the demonstrations will include a short script to allow the parameters to be changed as you look at them.

Shadow

Here is some text.

Direction Colour

Glow

Here is some text.

Colour Strength

As with the simple filters, the more complex ones can also be combined, again by adding them all together as the value for the filter: property, like this:

Here is some text.