Web Design Workshop 18 Image Filters

October 7, 2009
By

Web Design Work­shop 18 Image Filters

Fil­ter­ing images allows to change the look and feel of an image with just a few mouse clicks. While a few fil­ters can be applied via CSS, I don’t really rec­om­mend it as they will not work in all browsers and if you load the cor­re­spond­ing code for 3 browser types, your code will not val­i­date as two of them are pro­pri­etary stuff. In as much as I am con­cerned I just use opac­ity ele­ments and code them for IE and FF in rare cases.

Let’s look at what some of the most pop­u­lar fil­ters do to a picture:

1. The Picture

The Marble Stadium by Night
The Mar­ble Sta­dium by Night

2. Blue­print

[sin­glepic id=219 w=320 h=240 mode=web20 float=]

3. Bronze

[sin­glepic id=220 w=320 h=240 mode=web20 float=]

4.Cartoon

[sin­glepic id=221 w=320 h=240 mode=web20 float=]

5. Color Rotate

[sin­glepic id=222 w=320 h=240 mode=web20 float=]

6. Color Rotate 2

[sin­glepic id=223 w=320 h=240 mode=web20 float=]

7. Color Sketch

[sin­glepic id=224 w=320 h=240 mode=web20 float=]

8. Ani­ma­tion

[sin­glepic id=225 w=320 h=240 mode=web20 float=]

9. Grayscale

[sin­glepic id=226 w=320 h=240 mode=web20 float=]

10. Inkstamp

[sin­glepic id=227 w=320 h=240 mode=web20 float=]

11. Neon

[sin­glepic id=230 w=320 h=240 mode=web20 float=]

12. Pix­e­late

[sin­glepic id=231 w=320 h=240 mode=web20 float=]

13. Popart

[sin­glepic id=232 w=320 h=240 mode=web20 float=]

14. Sepia

[sin­glepic id=233 w=320 h=240 mode=web20 float=]

15. Soften

[sin­glepic id=234 w=320 h=240 mode=web20 float=]

16. Tint

[sin­glepic id=235 w=320 h=240 mode=web20 float=]

Join tonight’s Web Design Work­shop at yor­GOtalk to learn how to quickly imple­ment filters.

Related posts:

  1. Web Design Work­shop 17 Resiz­ing Large Back­ground Image
  2. Web Design Work­shop 4 – Navigation
  3. Web Design Work­shop 16 — Scroll over Background
  4. Web Design Work­shop 6 Main Wrapper
  5. Web Design Work­shop 15 Dis­ney Look

Tags: , , , , , , , , , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*