Blog Facelift: The Joy Of Filters (aka Getting IE Filters to Work)


I admit it (as if it wasn't already obvious) - I dropped out of Graphic Design at Uni. The sad truth is that I'm a much better design critic than creator. /me shrugs, I'm from the Scoble school of blog design - it's all about the content!

 

Still, a friend of mine (who might well bear my children for a link to Buy Presents For Darryn, mwuhaha) was angry at me for IE Filters the other night.

 

Being something of a back-end guy (I like the data access bits and the networky stuff, but the CSS stuff is something somebody else is much better off doing), I hadn't a clue what he was on about, and comiserated without really committing to anything.

 

Overnight, I decided that my blog lacked a certain aesthetic appeal, so I started renovating the stylesheets, and discovered Filters. And boy, are they ever cool. And I'm told they gracefully “just don't work” in other browsers. Can't beat that for an optional feature!

 

There's one key frustration I wanted to share, which comes from Tristan Not Reading The Docs Properly, and that's that if you just add a filter:blah to a random object in your style sheet, it may not work at all - so I'll paste the relevant bit in below:

 

The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.

 


 

So, just add a "width:100%;" (or whatever else), and you're done.

 

Now where did I leave those blink tags? I need to draw more attention to the titles...

Comments (8)

  1. Darryn says:

    ooh! ooh! So that’s why they didn’t work.

    I spent many nights, refusing to give up, trying to get the damn filters to work in my .text skin ( http://blog.darryn.net ). In the end I faked it and did a background in Photoshop.

    Of course I would never have had this problem at all if IE caught up to the mid-90’s and supported PNG transparency.

  2. TristanK says:

    Or if Darryn Also Read The Documentation, natch.

  3. Darryn says:

    Dammit! I was writing a response when I thought to check the
    MSDN
    article that I had been referring to. In the time since I read it They have secretly updated it to include your quoted text.

    http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alphaimageloader.asp

  4. Jon Galloway says:

    Darryn –

    IE does support PNG transparency with the IE7 CSS (http://dean.edwards.name/IE7/).

    – Jon

  5. TristanK says:

    That looks *so* cool.

  6. jledgard says:

    Could you post the CSS you are using?

  7. Darryn says:

    wow. I never knew.

  8. TristanK says:

    Doops, just realized I’d forgotten to gradientify the comments (missing width item 🙂 )

    The custom CSS stuff I typed into .Text can be gotten at here: http://blogs.msdn.com/tristank/customcss.aspx

    It’s all pretty much like this:

    #comments {width:100%;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=’#AAFFFFFF’, EndColorStr=’#EEEEEE’);}

Skip to main content