Menu
CSS Filter Effects is currently in draft, but already supported by chrome. It provides the possibility to apply effects to images:
The CSS filter property provides for effects like blurring or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border.
Included in the CSS standard are several functions that achieve predefined effects. You can also reference a filter specified in SVG with a URL to an SVG filter element. (source)
As far as I know, CSS filters effects are only supported in Chrome 18+ yet, however is it possible to detect the availability of CSS filter effects via JavaScript or some CSS tricks?
943
asked Apr 24 '13 10:04
The filter CSS property applies graphical effects like blur or color shift to an element.
CSS Syntax filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
<filter-function> The <filter-function> CSS data type represents a graphical effect that can change the appearance of an input image. It is used in the filter and backdrop-filter properties.
The url() filter function takes in a reference to an SVG <filter> element that is to be applied to the element via the CSS filter property. The reference to the filter is the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.
You can use the Modernizr Javascript library for CSS3 feature detection I believe.
According to the following links, (as of Modernizr 2.6) Modernizr can now be used for CSS filter detection:
http://www.browserleaks.com/modernizr#filter
http://modernizr.com/news/ (under the test improvements section).
and http://modernizr.com/news/modernizr-260/.
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
