Gradiant effect in CSS

justnajm

New Member
Messages
15
Reaction score
0
Points
0
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

New Member
Messages
6
Reaction score
0
Points
0
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

New Member
Messages
320
Reaction score
0
Points
0
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

New Member
Messages
15
Reaction score
0
Points
0
thanks shaunak, its really gr8 technique, what it is said to be .....

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

randomdood

New Member
Messages
3
Reaction score
0
Points
0
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

New Member
Messages
782
Reaction score
0
Points
0
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

New Member
Messages
46
Reaction score
0
Points
0
Well, an alpha channel isn't exactly necessary for a gradient, is it?
 

shaunak

New Member
Messages
320
Reaction score
0
Points
0
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

Member
Messages
395
Reaction score
0
Points
16
Hey all,

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

CSS Gradients Demo: http://www.designdetector.com/2005/09/css-gradients-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 :)
 

Anna

I am just me
Staff member
Messages
11,733
Reaction score
578
Points
113
not impossible :) create a div to put the text in with the following style applied:

position:absolute; top:5px;

makes the div with those style elements sit right on top of the gradient ones, starting 5 px from the top of window. (if that fails, you might need to set the z-index as well, dont remember the proper code right now for that)
 

shaunak

New Member
Messages
320
Reaction score
0
Points
0
If someone is making a fixed-width page for one resolution only, i guess it would be possible with floats and z-index. Good to know it is possible though!

The effect apears to have a ton of browser bugs though [curse IE actually]. I dont think i will be practical. Plus why load the server with unecessary php code, just make the end user wait for a second!
 
Last edited:

legendphil

New Member
Messages
152
Reaction score
0
Points
0
hao!

for the CSS Demo Link:

huh? sooo many <div>'s... howbout the z-index style stuff (I don't know how that works yet).. or add another div with position:absolute;top:??px;left:??px; style?

man, I just left for about 10 minutes to try my remedy out and then poof... someone else got the solution. Anyways, that's how math works, everybody can find different good ways to solve a problem.

EDIT: Somethings similar are up my post
 
Last edited:

Mooseman

New Member
Messages
89
Reaction score
0
Points
0
The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.
Elements can have negative stack orders
Also note that the z-index only works on positioned elements

z-index:10 will be placed above z-index:5 and underneath z-index:20

The highest stack order wins ;)
 
Top