Discuss: Super-Easy Blendy Backgrounds
by Matthew O'Neill
- Editorial Comments
12 Gradient Backgrounds with CSS
Hi,
Although this technique is a vigorous CSS workout, and very appreciated, it seems like a great amount of additional markup. This at first glance defeats semantic usage of XHTML/CSS.
posted at 01:58 pm on November 14, 2006 by Christopher Kennon
13 Untitled
I’ve been using this technique for the last year or so, but recently stopped because of issues involving Links being “unclickable” within these DIV tags in IE 6. Also CSS won’t validate with this hack.
Guess we can just hope that with MS pushing IE 7 in their monthly updates we’ll have a quick jump to 7.
posted at 02:44 pm on November 14, 2006 by Bill Keeter
14 CSS hacks?
I do think it would be better to utilize a DOM-inserted image with this instead of all the unsemantic code; it could be easily done with something like jQuery – that way you just add a gradient class onto whatever you want to have the gradient as a background image. This keeps your xhtml semantic for browsers that don’t support javascript (such as lynx, some screenreaders, etc) while giving the users that do support it nice eyecandy.
To make it degrade nicely in browsers that do not support javascript, just have a nice median background color.
posted at 03:36 pm on November 14, 2006 by Jonathan Prins
15 AlphaImageLoader isn't valid CSS
I realize that not everyone cares about such things, but AlphaImageLoader isn’t valid CSS. Perhaps this should be noted in the article?
posted at 04:30 pm on November 14, 2006 by Michael Barrish
16 Untitled
Honestly, what i was more impressed by is Kevin’s beautiful illustration. Very well done!
posted at 04:44 pm on November 14, 2006 by Matthias Breuer
17 Why use pictures
That’s intresting!
But is possible to do it without pictures isn’t it?
I don’t now if you need to use JavaScript too but that could be i ntresting, I hope that you’ll write something about this argument.
posted at 08:57 pm on November 14, 2006 by Simone Ramacci
18 Very interesting, but what about images within the
Quite a good read, thanks for the article.
The system we use is content managed, so quite often the clients will add their own copy, and often want to include images.
The way that you’ve setup the CSS for this, any images within the containing box div; even if you have div’s within this or within other container tags (p, blockquote and stuff); will be affected by the styling.
Would it perhaps be better to set a class on the gradient image of “gradietnImg” (or something) and then apply the “.grad img” to that, so that it becomes something like this; “.grad img.gradientImg”?
Just a thought.
» Sturm
posted at 09:23 pm on November 14, 2006 by Justin Svendsen
19 Grr
First time posting on ALA, and it goes and strips out all my pretty quote tags :( oh well, forgive this, but i’ll repost the comment with normal tags:
Quite a good read, thanks for the article.
The system we use is content managed, so quite often the clients will add their own copy, and often want to include images.
The way that you’ve setup the CSS for this, any images within the containing box div; even if you have div’s within this or within other container tags (p, blockquote and stuff); will be affected by the styling.
Would it perhaps be better to set a class on the gradient image of “gradietnImg” (or something) and then apply the “.grad img” to that, so that it becomes something like this; “.grad img.gradientImg”?
Just a thought.
- Sturm
posted at 09:25 pm on November 14, 2006 by Justin Svendsen
20 Starting Gradients At Different Locations
When I was messing with this a little bit ago I found this trick quite useful:
When you don’t want the gradient to be a perfect gradient and you just want it to look pretty near the bottom or top of the element or something, you can use background-position to lower the gradeint (or raise it) depending on if it’s meant for the top or bottom of the element.
If you have a gradient that’s solid at the top, you can use something along the lines of this to bring the gradient up into the element so it appears to start sooner.
background: red url(“shadow.png”) repeat-x 0 -10px;
Hope someone finds this useful!
posted at 10:41 pm on November 14, 2006 by Bill Criswell
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)
11 Untitled
Spartan markup is good for those who will maintain site later.
It is good not to have fish out parts of the design from markup, when the rest is in CSS.
And if you feel that you must have decorative images in your markup—at least make sure they have alt=”“.
posted at 01:53 pm on November 14, 2006 by Rimantas Liubertas