Page 1 of 1

Gradient background

Posted: Tue Aug 15, 2006 10:16 pm
by alex.barylski
I've seen CSS code for doing just this...and I tested it in FF and IE and it worked like a charm, but I imagine it's limited to later version browsers???

How long have these browsers supported these gradient effects?

Should I use a background image and repeat in the X in addition to CSS incase CSS fails for whatever reason???

Opinions...

Posted: Tue Aug 15, 2006 10:21 pm
by RobertGonzalez
It would seem to make sense, just in case the gradient is not supported in the browser that is being used. Another recommendation is to use a background-color property when using a background-image property as well, just in case the image doesn't render.

Posted: Tue Aug 15, 2006 11:20 pm
by s.dot
While I haven't seen the CSS code to do this, I tend to make gradients very small.. even as small as 1 px by 10 px, and just repeat across the x asis as you said.

I would be interested in looking at the CSS code if you could post an example.

Posted: Tue Aug 15, 2006 11:40 pm
by Benjamin
From what I have seen, the best web developers are still using images for gradients & corners because the browser support just isn't there yet.

Posted: Tue Aug 15, 2006 11:43 pm
by alex.barylski
Scottayy: http://www.designdetector.com/demos/css ... demo-1.php

Works in both IE and FF, my version at least... :)

Posted: Tue Aug 15, 2006 11:51 pm
by feyd
It's a column of <div>s.

Posted: Wed Aug 16, 2006 12:05 am
by s.dot
All that markup hardly seems worth the time to create a little gradient image. :P

Posted: Wed Aug 16, 2006 12:05 am
by nickvd
Lol at that "css" demo... Take a look at the source code... It's decent, however it would require an extra 250+ empty (and therefore useless) div's... I'm almost certain that css3 provides for gradients, and that FF may support them now, but ie support... lol what support...

For now, I always use small 1 by X gif/png for gradient backgrounds, just remember to set the background colour of the element getting the background image to the same colour of the very last pixel in the image, to prevent a fugly colour change...

Posted: Wed Aug 16, 2006 12:15 am
by RobertGonzalez
Semantic markup balks at empty <div>'s. A 1 X npx gradient image repeated is not a lot of overhead and works in almost all browsers that accept the use of images.

Posted: Wed Aug 16, 2006 3:39 am
by JayBird
Nice...but i'll stick with a small image for now

Posted: Wed Aug 16, 2006 3:50 am
by Benjamin
The point of CSS is to seperate content from design as much as possible. This design contradicts that because it's using html tags for design.