Current mood:	bouncy
Entry tags:	html, resources: tutorials

Damn, it feels good to be a gangster

CSS3 Filters
aka "Oh, for cripe's sake WHY AREN'T YOU USING CHROME?"

<img src="http://i.imgur.com/4g9qR.jpg" width="200px">

→

<img src="http://i.imgur.com/4g9qR.jpg" style="-webkit-filter: saturate(50%) blur(2px) brightness(1.2);" width="200px">

property and browser-specific prefixes
-webkit-filter, -moz-filter, -o-filter, -ms-filter, filter

Note: Currently, only -webkit-filter (Safari and Chrome) works, but others should be available in the future. Additionally, you should always put the prefixed property (e.g. -webkit-filter) before the regular property (e.g. filter) when listing style rules so that the regular property takes precedence if the property is eventually implemented cross-browser.

currently available filter elements
grayscale(0% to 100%) - how much gray?
sepia(0% to 100%) - how much sepia?
saturate(0% to 100%) - how much color?
hue-rotate(0deg to 360deg) - how far do you want to rotate the color wheel?
invert(0% to 100%) - how much color inversion? [note: currently only full invert works]
opacity(0.0 to 1) - how transparent towards full visible should we go?
brightness(0.0 to 1 to desired .) - how much towards white should we go?
contrast(0% to 100% to desired %) - how much contrast should we remove or add?
blur(radius in px) - how far outward should we blur?

references
Official Documentation (reads like a dead language, tbh)
Examples: 1, 2