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:
1. The Picture
- The Marble Stadium by Night
2. Blueprint
[singlepic id=219 w=320 h=240 mode=web20 float=]
3. Bronze
[singlepic id=220 w=320 h=240 mode=web20 float=]
4.Cartoon
[singlepic id=221 w=320 h=240 mode=web20 float=]
5. Color Rotate
[singlepic id=222 w=320 h=240 mode=web20 float=]
6. Color Rotate 2
[singlepic id=223 w=320 h=240 mode=web20 float=]
7. Color Sketch
[singlepic id=224 w=320 h=240 mode=web20 float=]
8. Animation
[singlepic id=225 w=320 h=240 mode=web20 float=]
9. Grayscale
[singlepic id=226 w=320 h=240 mode=web20 float=]
10. Inkstamp
[singlepic id=227 w=320 h=240 mode=web20 float=]
11. Neon
[singlepic id=230 w=320 h=240 mode=web20 float=]
12. Pixelate
[singlepic id=231 w=320 h=240 mode=web20 float=]
13. Popart
[singlepic id=232 w=320 h=240 mode=web20 float=]
14. Sepia
[singlepic id=233 w=320 h=240 mode=web20 float=]
15. Soften
[singlepic id=234 w=320 h=240 mode=web20 float=]
16. Tint
[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:
