DXImageTransform in IE

Wednesday, March 31, 2004

(Note: The tricks detailed on this page only work with Internet Explorer 4.0 and later. If you use another browser, please congratulate yourself for making the better choice.)

If it’s okay to make a page that functions well in all browsers but that offers a bit of extra razzamatazz for users with browsers with excellent CSS handling, then why not use some proprietary Microsoft Internet Explorer styles to and an extra bit of spunk to a page when it renders in IE? If you know your clients or users will most likely use IE to view your work, maybe you can raise some eyebrows and a get a little extra “hey, wow!” attention flowing your way.

Enter DXImageTransform. Or rather: Remember DXImageTransform? Microsoft included these tools with IE4.0, released back in go-go 1998. Designed as a way for designers to spice up their design, they instead quickly fell into the realm of “obnoxious web tricks for newbies” and have been scarcely heard from since.

(Check out the MSDN library page about this.)

But! It turns out that new versions of Internet Explorer still support DXImageTransform, something I figured out while researching whether a form button could use a background image.

Check it out:

Here’s your basic boring submit button:

You could style this with standard CSS styles, but the most you could do would be change the colors and sizes of the different parts. You could make the text red and the bevelled borders dark blue and maybe the button panel itself bright orange. That’d be ugly. But you couldn’t, say, shade the button from top to bottom with a nice gradient.

With DXImageTransform (and Internet Explorer), you can. Take a look:

Or:

(You could use this in conjunction with Safari’s “drop-shadow” attribute.)

You can also make things blurry:

Or wig ‘em out:

Of course, you can see how DXImageTransform got a bad wrap…

But. When used subtley and properly, it can make a nice accent for web pages you know will be used primary with Internet Explorer (like many corporate intranet sites or business tools). Especially for form elements that are otherwise difficult to format.

(DXImageTransform can be applied to most HTML elements.)

Take a look at Microsofts DXImageTransform pages for the full details.

Woot!