Gradiant effect in CSS

[justnajm]

How can I create gradiant effect in CSS without any image, as with image the page becomes to heavy for friends with low internet connection.

Basically it is said to be the effect in which two or more color are mixed together in a manner that each one of the colour fade in the other and so on.

Thanks Alot

[2dots]

you can use alpha filters but those only work on IE...
why not an image? you can make gradient pngs, that are less than 5k..
can you be a bit more specific on the design?

Thanks

[shaunak]

The trick most sites use is to use a tiny image, a 500px*5px image which loads very very quickly, even on dial up. With png's you can achieve this in ~0.5Kb's or less.

Use a constant background colour say alice blue #f0f8ff and in a new transparent layer photoshop or GIMP make a 500px*5px image which fades from say #000070 [midnight blue] to transparent.
Then use:
background: #f0f8ff url(images/bground.png) top left repeat-x;

This works with fair efficiency even on mobile phone browsers.
And even if the image dosnt load, at least the Alice blue is visible.

-hope this helps!

ps: I think you can archive 100% no images with svg's and xml. i am not sure though.

[justnajm]

thanks shaunak, its really gr8 technique, what it is said to be .....

It will be extremely fast then the whole image. Thanks again

[randomdood]

why not just make the image 1px high, thats what i did and it works fine in all browsers and it saves even more bandwidth and loading time.

[DarkDragonLord]

but using alpha png's dont work with old IE's.
How can we fix that ? i know of pngbehavior.htc + using a blank.gif but that never worked with a background png

[Pingy]

Well, an alpha channel isn't exactly necessary for a gradient, is it?

[2dots]

@DarkDragonLord
there are some .js scripts out there that will allow you to use transparent
(not just gradient) pngs with older IE versions...
for example here is one i've used in the pasthttp://homepage.ntlworld.com/bobosola/index.htm

[shaunak]

why not just make the image 1px high, thats what i did and it works fine in all browsers and it saves even more bandwidth and loading time.

But then it becomes difficult to edit the image in a image editor.
A minor tilt in the gradient causes "hills" to form in the rendered image.

If you can manage on 1 px, nothing like it, but if you cant 5px is not that bad.

[dyfuse]

Hey all,

I just found this page that shows a gradient created purely from CSS!

CSS Gradients Demo: http://www.designdetector.com/2005/0...ients-demo.php

You can try some different colors yourself and view the source code to see how it was done!

However, it is impossible to make a functional webpage from it. The technique uses <div> elements to create the effect, meaning that it is impossible to put text over it.

Oh well, worth a look at anyway