Gradient background

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Gradient background

Post 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...
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post 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.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Scottayy: http://www.designdetector.com/demos/css ... demo-1.php

Works in both IE and FF, my version at least... :)
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

It's a column of <div>s.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

All that markup hardly seems worth the time to create a little gradient image. :P
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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...
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

Nice...but i'll stick with a small image for now
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post 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.
Post Reply