Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder crmpicco's Avatar
    Join Date
    Jan 2005
    Location
    Mauchline, Scotland
    Posts
    1,096
    Thanks
    15
    Thanked 1 Time in 1 Post

    Arrow gradient / fading css style

    is there a way to put a style on a div or table that is similar to the header on the MSDN site
    http://msdn.microsoft.com/
    ..
    you will notice the blue bar going from light blue to dark blue (left -> right)

    Picco

  • #2
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    HTML:
    Code:
    <div id="topbar">
         <img src="gradient.gif"/>
    </div>
    CSS:
    Code:
    #topbar {
    width: 99.5%;
    }
    
    #topbar img {
    width: 100%;
    }

    Basically you section off the area you want to use the gradient on using a div. Once you have it placed where you want it you simply add the image to that div and use css to ensure that it stretches to take up the entire page. Gradients don't degrade in quality much when they are stretched and so you don't have to worry. Only clearly defined edges suffer from minor resizing usually.

    You could use the image as a background in the div which would be preferable but then you cannot ensure that it will fill the whole length of the screen at different resolutions.

    From there if you want to add some text over the gradient or a logo you can do it one of two ways.

    The first way is to create another div and position it to be over top of where your gradient is and then save your text or logo with a transparent background in a .gif or .png format. This is a good solution except that IE does not support .png transparency well so this could end up looking ugly. GIFs will work though. Another problem is that chances are that the logo will not appear in the exact same place cross browser but will be shifted slightly.

    The second way is to do as I believe they did and notice that they faded from pure white to blue? This way they can add a white background to whatever logo they intend to use and then just lay it on top with another div. This is a good idea too if you fear transparency.

    The benefit of using these techniques is that unlike having your text or logo on the gradient image the logo quality will not degrade as the gradient is resized to fit larger browser windows. This means that you can use a fluid layout without fear of getting pixel distortion on your text. Hopefully this has helped.
    Once I thought I was wrong but I was mistaken.

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    is there a way to put a style on a div or table that is similar to the header on the MSDN site
    In this case, they're actually using IE's proprietary filters to create the effect. View the code below in IE and you'll notice that the gradient effect resizes with the window.
    Code:
      <table cellpadding="0" cellspacing="0" width="100%" border="0">
        <tr>
          <td width="100%">
            <table cellpadding="0" cellspacing="0" width="100%" height="22" border="0">
              <tr>
                <td bgcolor="#FFFFFF"></td>
                <td width="50%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#98B2E6', gradientType='1')"></td>
                <td width="50%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#98B2E6', endColorStr='#3568CC', gradientType='1')"></td>
              </tr>
            </table>
          </td>
          <td bgcolor="#3568CC" height="22" nowrap="">
            &nbsp;
          </td>
        </tr>
        <tr valign="top">
          <td width="100%">
            <table cellpadding="0" cellspacing="0" width="100%" height="42" border="0" style="height: expression(parentElement.offsetHeight)">
              <tr valign="top">
                <td bgcolor="FFFFFF">
                  <a href="#"><img src="" width="225" height="42" alt="" title="" border="0" /></a>
                </td>
                <td width="100%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#6799FF', gradientType='1')"></td>
              </tr>
            </table>
          </td>
          <td bgcolor="#6799FF">
            &nbsp;
          </td>
        </tr>
      </table>
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #4
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh, that's neat, does it work cross-browser? I'd probably just use an image anyway. heh.
    Once I thought I was wrong but I was mistaken.

  • #5
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, it's not cross-browser friendly.

    If you view the MSDN home page in Firefox the basic look is the same, but the gradient doesn't resize with the page. Looks like they are just serving background images to everything other than IE.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #6
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's propiarety. Just use a background imagee when you have to use a background image for other browsers. Generating the gradient takes up more time in IE anyway.
    CATdude about IE6: "All your box-model are belong to us"

  • #7
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yeah, I figured it was probably IE only and probably wouldn't load any faster than a medium quality image. Gradients are neat, now all we need is IE to catch up with .png transparency and it will be gravy. I love being able to put a transparent logo over gradients and other patterns on webpages.
    Once I thought I was wrong but I was mistaken.


  •  

    Posting Permissions

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