Web Design Workshop 18 Image Filters

Filtering images allows to change the look and feel of an image with just a few mouse clicks. While a few filters can be applied via CSS, I don’t really recommend it as they will not work in all browsers and if you load the corresponding code for 3 browser types, your code will not validate as two of them are proprietary stuff. In as much as I am concerned I just use opacity elements and code them for IE and FF in rare cases.

Let’s look at what some of the most popular filters do to a picture:

The Marble Stadium by Night

[singlepic id=219 w=320 h=240 mode=web20 float=]

[singlepic id=220 w=320 h=240 mode=web20 float=]

[singlepic id=221 w=320 h=240 mode=web20 float=]

[singlepic id=222 w=320 h=240 mode=web20 float=]

[singlepic id=223 w=320 h=240 mode=web20 float=]

[singlepic id=224 w=320 h=240 mode=web20 float=]

[singlepic id=225 w=320 h=240 mode=web20 float=]

[singlepic id=226 w=320 h=240 mode=web20 float=]

[singlepic id=227 w=320 h=240 mode=web20 float=]

[singlepic id=230 w=320 h=240 mode=web20 float=]

[singlepic id=231 w=320 h=240 mode=web20 float=]

[singlepic id=232 w=320 h=240 mode=web20 float=]

[singlepic id=233 w=320 h=240 mode=web20 float=]

[singlepic id=234 w=320 h=240 mode=web20 float=]

[singlepic id=235 w=320 h=240 mode=web20 float=]

Join tonight’s Web Design Workshop at yorGOtalk to learn how to quickly implement filters.

Related posts:

1. Web Design Workshop 17 Resizing Large Background Image
2. Web Design Workshop 4 – Navigation
3. Web Design Workshop 16 – Scroll over Background
4. Web Design Workshop 6 Main Wrapper
5. Web Design Workshop 15 Disney Look

Tags: Animation, Blueprint, Bronze, Cartoon, Color Filters, Color Rotate, Color Sketch, Grayscale, Image Filters, Inkstamp, Neon, Pixelate, Popart, Sepia, Sketch, Tint

This entry was posted on October 7, 2009 at 10:25 pm and is filed under Design, Digital Photography, Media, Web Design, Web Design Workshop. You can follow any responses to this entry through the RSS 2.0 feed.