Instagram filters are us!
Posted by Dion Almaer 11 months ago on css filters
In the old days we were forced to put everything in static images. Text, shadows, anything! These days we can post-process, and CSS does this very nicely indeed due to its declarative manner (for awhile folks were doing a lot of this via Canvas).
It is great to see some new advanced filters explained in detail on HTML5 Rocks.
It is also very cool that the guys give some guidance on the performance side:
- grayscale: very fast
- sepia: very fast
- saturate: very fast
- hue-rotate: fast
- invert: very fast
- opacity: can be slow
- brightness: fast
- contrast: fast
- blur: slow unless accelerated
- drop-shadow: can be slow
- url(): Varies, fast to slow
I also like how the documentation style for vendor prefixes:
div { +filter: grayscale(100%); }
Speaking of good news wrt vendor prefixes:
CSS WG formally allows browser vendors to unprefix CSS 3 Transforms, Transitions, Animations