Discuss: Super-Easy Blendy Backgrounds
by Matthew O'Neill
- Editorial Comments
22 number of classes
sorry to be slightly offtopic but the example html markup uses 3 class names attached to a div…is there a limit to the class names which can be applied to a single element? googling only brought up an unanswered comment on meyerweb and i stopped testing when 9 classes worked perfectly!
till the second part comes along, i’ll use this to impress my collegues :)
posted at 12:24 am on November 15, 2006 by jinesh mehta
23 Untitled
As a beginner in webdesign, I think it’s very interesting.
Good job, Matthew!
posted at 04:06 am on November 15, 2006 by Henrique P Machado
24 interesting
Pretty good tutorial, please more of that.
posted at 09:02 am on November 15, 2006 by milo 317
25 Gradients Are Evil
Gradients are evil and should only be used under adult supervision.
posted at 10:16 am on November 15, 2006 by Chuck Spidell
26 CSS Gradients
You might want to check my 3 demos for non-image CSS gradients:
http://www.designdetector.com/demos/css-gradients-demo-1.php
I made a whole image this way!
http://www.designdetector.com/demos/css-house-2.html
posted at 10:44 am on November 15, 2006 by Chris Hester
27 You can add the IMG tag with javascript...
Quick ‘n dirty hack( placed at the end of the HEAD and not tested ):
…
[removed]
function gradient() {
var arrElements = getElementsByClassName(document, ‘div’, ‘grad’);
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
var htmlContent = oElement[removed];
oElement[removed] = ‘grad_white.png’ + htmlContent;
}
}
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == “*” && document.all)? document.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, “\\-”);
var oRegExp = new RegExp(”(^|\\s)” + strClassName + “(\\s|$)”);
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
[removed]
</head>
<body>
…
posted at 12:57 pm on November 15, 2006 by Logi Helgu
28 Untitled
Not semantic but would be useful for quickly mocking stuff up for showing to clients etc – especially if you put the <img>s in with some DOM scripting..
Just waiting for multiple CSS backgrounds to arrive, they would make so many regular tasks (like fluid gradients!) so much easier..
posted at 02:58 pm on November 15, 2006 by Kris Noble
29 thank you !
…spending a mortifying amount of time creating the images…What if, after finishing, I needed to tweak the height? Or, God forbid, the color palette? My head was going to explode…
Although i’m a CSS newbie, and not quite ready to try this yet, the very idea that all those hours in Photoshop won’t be necessary just made my day. :)
Vera
posted at 04:20 pm on November 15, 2006 by Vera Bass
30 Why 100 pixels tall?
100 is obviously human picked and arbitrary. The gradient breaks down with light colors in tall boxes. For best effect – with every shade possible – make your PNGs 256 pixels tall.
posted at 05:52 pm on November 15, 2006 by Nate Heagy
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?)
21 Interesting Technique
I typically use a JPEG background image with a smooth gradient about half the height of the parent anchor block and only a couple pixels wide. I stick this background to the bottom (or top) of the blocked link and repeat it on the X axis. The disadvantage is the max-height of the gradient is defined by the image height so that when the text is enlarged greatly I end up with more background color than gradient portion, but being that it’s valid, and it uses less mark-up and CSS — I only style and block the anchor itself, not a container — and the image size is next to nothing, I guess I can live with that. I must say, though, this technique is intriguing and I may use it, in part anyway, down the road when IE6 is just a bad memory.
posted at 12:09 am on November 15, 2006 by Mike Cherim