Creating a color gradient using HTML/CSS

A simple color fade from blue to white...

Page 1 of 1

4 Replies - 85160 Views - Last Post: 25 October 2007 - 10:49 AM

#1 Fanofpie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 22-October 07

Creating a color gradient using HTML/CSS

Posted 22 October 2007 - 12:42 PM

Hi all, I am new to the boards. I have been all over the web today looking for a solution to producing a color gradient in HTML or CSS. So far, I havn't found much of anything which leads me to believe this effect isn't entirely possible using html or css.

I am looking for an html/css solution for making background and/or table color gradients. I have seen this referred to as color fade, color blend, transparency and others but I have yet to find any good solutions. Basically, I want a hexidecimal color like #000080 (blue) to gradually fade to #FFFFFF (white). The end result would be a smooth blue-to-white color transition.

So far, I have found this code works well but I really don't know if this will be compatible with other browsers and even macs.

<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');">


This html can be applied to the body or tables and seems to work well in Internet Explorer. I am not ready to use it because I havn't tested it on anything but Internet Explorer. Is there any other codes/scripts that would work better than this (i.e. a more universal script)? I haven't found any solutions for CSS but I figured if there was one it would be better to use than regular html.

Hopefully this makes sense. If I am barking up the wrong tree and this is not possible, I do have a plan b. Instead of using code to produce this gradient, I can just use an image that has the same fade effect. The only problem is that the image won't scale properly and is a fixed size. I would like this effect to scale with the size of the page because some of my pages have lots of scrolling where others do not (I would like to avoid using multiple jpegs if possible).

Anyway, the best example I can find for this color blending effect (aka gradient) is on the Microsoft main page. Here's some links of the effect I am talking about:

Microsoft Website - Example 1
Microsoft Website - Example 2

The examples above have color fades inside the tables. Resizing the window scales the gradient which it wouldn't do if the fade was an image.

So if there is a simple solution, please let me know. If this isn't possible, I can use an image but I am wondering if there is something I missed or should know. Thanks in advance for any advice!

cheers.

Is This A Good Question/Topic? 0
  • +

Replies To: Creating a color gradient using HTML/CSS

#2 Fanofpie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 22-October 07

Re: Creating a color gradient using HTML/CSS

Posted 22 October 2007 - 01:16 PM

So I was digging around the web some more and found out that the script I have shown above is proprietary to Microsoft and most likely won't work in other browsers. Oh well, looks like I will be using an image to produce this fade effect.

Does anyone know of any other method that can be used to acheive this effect? Any help or advice would be greatly appreciated :D

cheers.
Was This Post Helpful? 0
  • +
  • -

#3 csmanoj  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 10
  • View blog
  • Posts: 150
  • Joined: 06-August 07

Re: Creating a color gradient using HTML/CSS

Posted 22 October 2007 - 01:17 PM

Using an Image is the best solution. There's nothing in effect of a gradient 'command' or 'property' in css. Just use a thin, gradient image and tile it horizontally or vertically. You can also make a gradient with Javascript. But I don't think It's worth the trouble. Plus, that would render slower than using an image.

This post has been edited by csmanoj: 22 October 2007 - 01:18 PM

Was This Post Helpful? 1

#4 Fanofpie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 22-October 07

Re: Creating a color gradient using HTML/CSS

Posted 22 October 2007 - 01:37 PM

View Postcsmanoj, on 22 Oct, 2007 - 01:17 PM, said:

Using an Image is the best solution. There's nothing in effect of a gradient 'command' or 'property' in css. Just use a thin, gradient image and tile it horizontally or vertically. You can also make a gradient with Javascript. But I don't think It's worth the trouble. Plus, that would render slower than using an image.


Thankyou for the response, csmanoj! Yes, I am pushing forward with my site using an image for this gradient effect (mostly likely tiled as you have mentioned). I might even retool the design a bit so I can use a solid color instead of a gradient (everything is still in photoshop so I can make layout adjustments before I start coding the site).

The more digging I do, it seems this is the safest solution. Again, thankyou for your quick response. Much appreciated! :D

cheers.

This post has been edited by Fanofpie: 22 October 2007 - 01:38 PM

Was This Post Helpful? 0
  • +
  • -

#5 the duke  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 83
  • Joined: 22-October 07

Re: Creating a color gradient using HTML/CSS

Posted 25 October 2007 - 10:49 AM

may have already figured it out ...
http://www.tizag.com.../background.php
go to the bottom and there is a little tut on it also ... if you are still having problems..
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1