Creating compliant, cross-browser gradients without images

I've come up with a way to do cross-browser gradients without images, and it verifies as W3C-compliant. I wanted to share it so others could use it too... I have not found this technique anywhere else.

Basically, it combines SVG with Internet Explorer's conditional comment statements and the DXTransform.

It's still valid XHTML because the DXTransform instructions are viewed as comments by non-IE parsers. And IE parsers view the SVG data as comments (the other way around).

Because most non-IE browsers now support SVG, this works for most people. Specifically, Firefox 1.5+, Opera, Safari, and IE.

Example...

You put this in the page itself:

<!--[if!IE]>--><td style="background-color: #000000; width: 100%;"><!--<![endif]--><!--[if IE]><td valign="top" bgcolor="#000000" width="100%" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#000000', startColorstr='#FFFFFF', gradientType='1');"><![endif]--><!--[if!IE]>--><object style="display: block;" type="image/svg+xml" data="/includes/images/top_trans.svg" width="100%" height="117">_</object><!--<![endif]-->

Then, for this example, I made the SVG file:


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
  xmlns="http://www.w3.org/2000/svg" version="1.1">
 <desc></desc>
 <g>
 <defs>
  <linearGradient id="MyGradient">
  <stop offset="0%" stop-color="#FFFFFF" />
  <stop offset="100%" stop-color="#000000" />
  </linearGradient> </defs>
 <rect fill="url(#MyGradient)" stroke="0" 
   x="0" y="0" width="100%" height="100%" />
 </g>
</svg>

I know you can't post links on these forums... If you want to see a website I made that uses this technique, PM me.

Creating compliant, cross-browser gradients without images

kitsune

Xapti

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week