www.webdeveloper.com
Results 1 to 5 of 5

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

  1. #1
    Join Date
    Dec 2007
    Posts
    1

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

    I've found a way to create horizontal or vertical gradients, that works cross-browser, validates W3C, 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!
    Last edited by WebJoel; 12-02-2007 at 06:50 PM. Reason: sp

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    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.
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Dec 2007
    Location
    UK
    Posts
    6
    I cannot see it either

  4. #4
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    It is between the two images at the top of the page.

    Code:
    <!--[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:

    Code:
    <?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>
    giving a reasonable looking gradient between the images without using a gradient image.
    Stephen

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    -I couldn't see the forest through the trees... When I turned-off all images, the gradient remained.
    Well isn't that special?
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles