Treehouse

CSS Image Filters in Internet Explorer

By on  

Internet Explorer provides for some really interesting CSS image effects. Of course, these effects are useless in any other browser (just how Microsoft intended) but they should be used like any other browser-dependent functionality -- used as enhancements only.

Note: Only IE users will see these image effects. Please switch to IE to experience the image effects.

Original Image

Horizontal Flip

.hflip	{ filter:fliph; }

Vertical Flip

.vflip	{ filter:flipv; }

The Wave

.wave { filter:wave(add = 0, freq = 5, lightstrength = 10, phase = 100, strength = 20); }

Frame Fade

.frame	{ filter:alpha(opacity = 100, finishopacity = 0, style = 3, startx = 20, starty = 40, finishx = 0, finishy = 0); }

X-Ray / Inverse

.xray { filter:xray; }

Blur

.blur { filter:blur(add = 0, direction = 300, strength = 10); }

Grayscale

.gray { filter:gray; }
ydkjs-4.png

Recent Features

  • CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each...

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating:

  • CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native...

Incredible Demos

  • Assign Anchor IDs Using MooTools 1.2

    One of my favorite uses of the MooTools JavaScript library is the SmoothScroll plugin. I use it on my website, my employer's website, and on many customer websites. The best part about the plugin is that it's

  • background-size Matters

    It's something that makes all men live in fear, and are often uncertain of. It's never spoken, but the curiosity is always there. Nine out of ten women agree in the affirmative. Advertisers do their best...

  • Cross Browser CSS Box Shadows

    Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them.  For someone with no design talent, a.k.a me, the need to...

Discussion

  1. I like the effects, gives you more management to the images which are one of the type of contents that are not available to manipulate in css (including objects{videos, animations…}).

    Sad that IE can give you manipulation in this, but it doesn’t get better in supporting more transparency in png images.

  2. Rob

    Cute, but IE can’t do much of anything else right, so why bother? With every other browser near passing Acid3, while IE8 still struggles with basic properties, you should make an article about the multitude of standard things that can be done on every other browser but doesn’t work on IE.

  3. These are interesting. Don’t forget about DropShadow(color,offX,offY)! Note that this will prevent your CSS from validating but neat effects.

  4. Nice, Just wish IE would support more common image styles like Tony mentioned instead of making their own ones up.
    However saying that IE8 is getting better in CSS support than IE7/6.
    Does anyone know of a way of doing this in FF i wonder?

  5. @pfwd:

    So I think that FF3 was going to have a similar feature called image filters but it got pulled. Maybe FF4?

  6. Dan

    The only way I know of doing it so it works cross-browser is to use 2 separate images and do a rollover, which of course can be done using pure CSS with no javascript (in case user has scripting disabled). Example:

    div#01 //set an id for the div
    {
    height: XXpx; //where XX is your actual dimension
    width: XXpx; //ditto
    background-image: url(‘image_a.jpg’);
    display: block;
    }

    div#01:hover
    {
    background-image: url(‘image_b.jpg);
    }

    .hide //define a class for image preload
    {
    display: none;
    }

    In your HTML:

    <img src=”image_b.jpg” class=”hide”> <!– This preloads the rollover image –>
    <div id=”01″></div>

    I’ve tried this in IE, Firefox, abd Safari and it works in all 3

  7. LookingForCheapSSD

    After 3 years, using IE10, can’t see the flipped images any more. Good to see how MSFT is embracing standards. It would be nice if W3C would have choose these CSS bits as standard. So older websites won’t have to make a change. For the people who bash IE for DX filters, they must know that IE team included these features when nobody was interested in web (back in ’97). Guess they deserve some credit..

  8. thomas

    sadly… all those effects don’t work in IE11 (Windows 7)
    and it seems there are no ways to have blur effect always in IE11…

  9. […] was providing unique CSS controls, Internet Explorer was setting the tone.  One such example is IE's early implementation of CSS filters. Internet Explorer was also the first browser that allowed developers to, for better or worse, […]

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Use Code Editor