/    Sign up×
Community /Pin to ProfileBookmark

Cross-browser, W3C validated and graphic-free technique for creating gradients

Copy linkTweet thisAlerts:
Dec 02.2007

I’ve found a way to create horizontal or vertical gradients, that works cross-browser, [B]validates W3C[/B], and involves no image.

The technique is only able to work until very recently… it takes advantage of the fact that almost all non-IE browsers now support SVG, and uses IE conditional statements to hide the SVG from IE and instead uses the DXTransform object for IE (which doesn’t support SVG). The reason this validates is because the IE conditional statements, and DXTransform code, are seen as comments.

Admittedly, it is a hack. But it works like a charm on Firefox 1.5+, Opera, Safari, and IE.

I’ve implemented this technique in a website already:

msupagans.com

Feel free to use it for yourself!

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelDec 03.2007 — where is this 'gradient' in your site? I viewed with IE and Firefox, -I can't figure out where/what is 'gradient'. It looks like images to me.
Copy linkTweet thisAlerts:
@JimmyPaddyDec 03.2007 — I cannot see it either ?
Copy linkTweet thisAlerts:
@felgallDec 03.2007 — It is between the two images at the top of the page.

<!--[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]-->

and in top_trans.svg:

<?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>

<i> </i>&lt;/defs&gt;
<i> </i>&lt;rect fill="url(#MyGradient)" stroke="0"
<i> </i> x="0" y="0" width="100%" height="100%" /&gt;
&lt;/g&gt;
&lt;/svg&gt;

giving a reasonable looking gradient between the images without using a gradient image.
Copy linkTweet thisAlerts:
@WebJoelDec 03.2007 — -I couldn't see the forest through the trees... When I turned-off all images, the gradient remained.

Well isn't that special? ?
×

Success!

Help @Kitsu spread the word by sharing this article on Twitter...

Tweet This
about: ({
version: 0.1.9 — BETA 5.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...