by Joe Laudato
Filter effects commonly applied to images through Photoshop or the like are now beginning to be implemented into HTML5 via CSS. Some of the effects currently available are:
- blur
- grayscale
- drop-shadow
- sepia
- brightness
- contrast
- hue-rotate
- invert
- saturate
- opacity
These filter effects are showcased here (this demo will only work in Chrome and Safari browsers) as a new addition to Webkit, a layout engine which allows web browsers to render pages. Webkit powers the Chrome and Safari browsers, and will eventually support Opera as well (IE uses Trident, and Firefox uses Gecko). Implementing these effects into a webpage is as simple as weaving code akin to the following into a CSS file:
(this code will make the entire body display inverted colours which are saturated by 130% and be blurred by 1 pixel.
body{ -webkit-filter: invert(1) blur(1px) saturate(1.3); } thus transforming this page:
into this page:
Notably, there are some quirks about writing this code; you must reference webkit, and you need only type the filter effect (e.g. blur) followed by a parenthetical value (e.g. 3px, or decimal values for percentage based filter effects) in order to achieve the desired effect. When adding more than one filter effects, you don’t need to partition them with semicolons; as demonstrated in the code above, spaces will do here.
It is also important to bear in mind that these filter effects, for the time being at least, will only work for recently-updated browsers supporting webkit. While Internet Explorer and Firefox have their own means to achieve similar effects, this particular webkit method will only render effects in Chrome and Safari.
Source : digicompdiy[dot]wordpress[dot]com
0 comments:
Post a Comment