Do you know color shades coding ??

Many websites have background color showing on menu side going from dark to light in color shades, how do you do that combo shades # #?

.navi {
background: #FEFEFC;
float: left;
width: 26%;
text-align:center;
font: normal 0.8em Verdana;

 

It's done with an image of the gradient.

cheers,

gary

 

That's not right. Look at Yahoo HomePage, for example, in menu side, this is not done thru image gradients. LOL
http://www.yahoo.com/

 

Maybe you should look a little closer.

div.minimantle, #minimantle, #sizetoggle, #trough ul, #pa {    
  background-image:url(http://l.yimg.com/a/i/ww/thm/1/grd-4px_1.1.gif);
  background-repeat:repeat-x;
}

Code (markup):

gary

 

How about this one. The background color showing from dark to light on entire page.
http://free.avg.com/ww.homepage

 

That's using an image too...

background: #ebf5fc url('../img/body_bg.jpg') repeat-x 0 0;

Code (markup):

 

Look, to get a gradient background, you use an image of the gradient. No matter how much you'd like it to be otherwise, it just ain't happenin' under today's available specifications.

Why is that so hard to believe or accept?

This time, instead of throwing another example of the same thing for somebody else to find the image, look for it yourself.

In the meantime, offer thanks to ing, myself and anyone else who jumps in and does the work for you for showing you the pathway to righteous gradients.

gary

 

As Gary has said it is easiest to use a gradient image (1 pixel wide and as tall as you need it) and repeat it across the area you choose to display it in. That being said an image isn't the ONLY way to get what you want, but it is by far the easiest.

If you are developing for IE only you can use the proprietary gradient property, but again, that will ony work in IE.

See http://slayeroffice.com/code/gradient/ for more details on how to do this withou using an image.

 

As a proof of concept, it's quite ingenious.

From a realistic usage standpoint, it uses javascript to create badly structured, non-semantic and invalid markup. One look at the generated source, and I want to barf.

Were I silly enough to actually use the script, I'd want to be sure that it was the last function to be called, as it could surely wreak havoc on other DOM scripting that depended on structure.

By the way, it breaks with font resizing.

cheers,

gary

 

Thanks to all of you. Info given by everyone is really helpful.

 

... and it's broken in both IE and Opera on large font/120dpi machines (so likely also broken if you set X to 100dpi or manually change the default font size in FF).

Gary is correct that it's an interesting concept - but DAMN the implementation could use a little help. Putting DIV between UL and it's LI? /FAIL/. DIV inside a SPAN? /FAIL/ - 99.99% more inlined presentation than should be neccessary? /FAIL/.

For improvements, I'd suggest NOT declaring all those widths manually - wrap a div AROUND the element you are applying the styling to, then set all your nested DIV's to pad themselves in 1px on one side. Note I said nested - right now they are all siblings when it would be easier to nest them inside each-other. Only the outermost one would need position absolute and a width on it, the rest could be allowed to use their normal behavior to make them expand to available width - just use padding on one side to make them narrower and/or shorter.

You could even do 3 'stripes' from one element instead of three - border is available after all. Border-left would be one 'stripe', border-right could be another, and the background color would be a third. Less elements to calculate the size of, less elements for the browser to render.

Another 'objection' I have to it is that it puts presentation back into the markup via the color settings. I'd consider parsing border-left and border-right (and/or border-top/border-bottom) to extract the color from there so you could place color in the CSS where it belongs instead of the markup.... because THIS:

class="gradient B8DEFD 4086BD vertical foo"

Kind of defeats the point of separation of presentation from content and most of what modern markup is supposed to be about.

... Though at that point it might be simpler to just use an image.

 

Gee, ya think?

Especially when at the command line, all you have to do is type:

gt@koko:~$ [b]convert -size 10x400  gradient:skyblue-white gradient_range1.jpg[/b]

Code (markup):

If you have Imagemagick installed, and why wouldn't you, you get the attached image. Seems a lot easier to me.

cheers,

gary