css 3

Icon

A comprehensive CSS 3 reference guide, tutorial, and blog
Are you a CSS expert? Want to contribute? Contact us

CSS FILTER

This property creates an extensible mechanism allowing special visual effects to be applied to content. There are currently three categories of filters – Visual filters and Reveal/Blend Transition filters. Multiple filters can be applied to a selector to produce interesting results, with the order of application often playing an important role in the final visual result. Current filters only apply in a visual context, but the extensibility of the property could allow for other capabilities.

 

Example

img { filter: blur(strength=50) flipv() }

<img src=”image.gif” mce_src=”image.gif” style=”filter: blur(strength=50) flipv()”>

 

11 Responses

  1. Andrew Turgeon says:

    Is this filter thing an IE only thing? In the past I believe the filter has only been for Internet Explorer. That would be really good to be able to apply filters and have them appear on all browsers.

  2. Yes, CSS filters only work for Internet Explorer, unfortunately. I have the most recent versions of Opera and Firefox, and they do not support CSS filters.

  3. Three Sevenths says:

    Are filters actually CSS, or just an MS hack thing?

  4. Dave says:

    filters are a propriety ‘effect’ of MS. They are not part of the CSS standard.

  5. Susmita says:

    css filter effet is not supporting mozila and safari.

    How to view in these browsers.

  6. I wish it would be a part of w3C

  7. Dan says:

    I wish they were part of the standard too, but you know what they say, you can wish in one hand and crap in the other and see which hand gets filled up first.

  8. Gautam says:

    hello,
    I can understand the compatibility issues with other browser for this filter, but my question is can we use “javascript” with css to get this filter to work on other browsers?

  9. Vivek says:

    css filter effet is not supporting mozila and safari.

    How to view in these browsers.

  10. Josh says:

    How to view in these browsers? Well as far as transparency, browsers such as Firefox and Opera support the “opacity” property. RGBA is a new specification in CSS3 that allows alpha transparency (this is what the A at the end of RGB is for).

    Personally, I liked the idea of the filter property. But the W3C did not support it because it’s more of a scripting property than a presentation and style property. This is what I don’t like about some of the new specs with CSS3. Years ago, they’d keep behavioral (script) types of effects out of CSS. Now they want to add animation effects and it’s getting approval. So although I don’t have much of a problem with it (admittedly I like the idea of these effects), I do have a problem with that kind of double standard. They can’t support filter as an appropriate specification, yet they’re going to have animations and transformations in CSS3. Like I said, I don’t mind it much, except for this double standard where filter is left out and other script-like effects aren’t.

    Oh well.

  11. Sorry but MS proprietary effects have nothing to do on a website called “css3.com”!

    On the other hand, it could be mentioned as an alternative to real CSS3 features like opacity (e.g. the alpha filter).

Leave a Reply

Pages

Sponsors


CSS3.com



Please help CSS3.com stay alive and running

Bad Behavior has blocked 2092 access attempts in the last 7 days.