Good effort to reduce the file size and it will help for the good designing also. Now we can create gradient backgrounds in our site with faster downloading.
Copy & paste the code below to embed this comment.
Nuclear Bob
So instead of just using one tag with one line of CSS to insert a background gradient that’s somewhat larger than needed (and if it eventually bleeds out into a solid colour if text is resized is it really an issue?) I should add an extra img tag and an extra div tag to my mark up everytime I want to insert a background? Then I need how many extra hack riddled CSS rules to make it work?
The whole point of text resizing is to make your pages more accessible. When you use semantically incorrect code, propriety code, unneccesary mark up, a lot of decorative images with missing alt attributes, and numerous CSS hacks you’ve accomplished the exact opposite.
Not to mention search engines crawlers only index a certain number of characters, so all the exra code isn’t going to help your ranking at all.
Do I need to mention the modern web design principle of separation of structure and style?
As long as it looks pretty though because thats the important thing, right?
Copy & paste the code below to embed this comment.
Jack Maynard
When viewing the final bendy background example in firefox the alt tag text is showing up in the browser without the need to hover the mouse over the box.
Is there a CSS rule like img[attr=‘alt’]{display:none;}
that can be added?
Otherwise any suggestions why this text is appearing and how it can be hidden???
Copy & paste the code below to embed this comment.
Everett Lindsay
Thanks muchly, Matthew. Ever since “Michael Lovitt’s”:http://alistapart.com/stories/pngopacity/ timely article, I’ve attempted to apply this very technique a couple of times in vain…I just never had enough patience to get it modular enough for practical application.
Not only are you laying out your explanation exquisitely, but you’re taking extra care to philosophically foreshadow better ways to make this work in any particular environment, without descending into a tangential discussion on tweaking.
Just hurry up and get the second part of this article out before Thanksgiving, and make my holiday weekend, ALA.
Copy & paste the code below to embed this comment.
Teddy Zetterlund
I just tried using this technique in a project I’m working on it noticed that it breaks in WebKit. Take a look and see what I’m talking about, it’s a bigger problem than with Opera.
Copy & paste the code below to embed this comment.
Teddy Zetterlund
I took a quick look at the problem and at first I thought it was just a simple overflow problem but it seems it’s a WebKit bug. The image element’s height is continuing outside of it’s parent element.
Putting overflow:hidden on image element’s parent keeps it from breaking really ugly but the gradient will still be broken. A bug report will be sent.
Copy & paste the code below to embed this comment.
tai vt
Thanks for your article. It’s very useful.
However,how can I put images in the boxes ?
I’ve tried to set the z-index to “2” and higher but it’s no help.
Please help me,thanks a lot!!
“When viewing the final bendy background example in firefox the alt tag text is showing up in the browser without the need to hover the mouse over the box.“
This isn’t my experience, with Firefox 2 on XP.
NOTE TO EDITORS: Please fix the missing end tag for the code on the previous page of comments! It is turning everything after into Courier, including the side bar!
Cool technique. Although the scaling of images sends a cold chill down my spine, it stinks of the 1px transparent gif trick for object spacing ( which was only ever used by the lazy and incompotent ). Resizing images forces the browser to waste cpu cycles doing what it’s not really very good at. Given all the other stuff we are forcing browsers to cope with I can’t see how that’s a good idea. And you just know that somebody is going to put this in a div which they will then resize dynamically. Oh the horror!!!
Copy & paste the code below to embed this comment.
Neil Yeomans
It looks pretty, but from a semantic perspective, adding an image for purely presentational purposes is iffy. Screen reader users will experience the annoyance of having their reader say “image” each time one of these boxes is “read out” aloud.
“AS of IE 5, you can also produce gradients exclusively with Style Filters.“
IE5.5 to be precise.
“The gradient is exclusively HTML and CSS. it does not require an image.“
And only works in one single browser, Internet Explorer, available for one single platform, Windows. The web has moved on. People use Macs. People use Linux. People use mobile phones. Browsers today include a wide range of available programs. Anything IE-only is to be completely avoided (unless your page degrades nicely without the IE-only special effects).
It’s a shame, because filters were one of the coolest things to hit the web. You can use them to rotate images for instance, so only one gif is needed for a four-corner frame. Or have a black and white photo turn to colour on hover just by using a filter.
Copy & paste the code below to embed this comment.
Arve Systad
Is it really worth it? Is it really worth all the haggle and all that messy markup/CSS-code to save in a few bytes of image-files? I think not. I’d rather preffer ten image-files weighing a few kilobytes rather than having all that extra code to mess up my stylesheet and markup, especially on a large webpage with a complex layout.
You could do it server side (or probably with JS), though, but that again would leave far more work than just making it as images in the first place.
Nice method for experimenting, understanding and learning, but I dont think i will be using it a lot.
Copy & paste the code below to embed this comment.
Ashish Tiwari
nice article, and good concept to apply.
The part to make PNG work in IE using AlphaImageloader seems to be misplaced though.
Why would one require a filter to do other filters’ job, that too using external images?
please look up http://msdn.microsoft.com/workshop/author/filter/reference/filters/gradient.asp
My idea will be to get gradients in IE without using any imges, keep the PNG gradeient of FF and other browsers though.
Copy & paste the code below to embed this comment.
mike wright
Opera doesn’t like padding on the containing div—it seems to still apply the padding to the absolutely positioned image, but on the right side of the div. Removing the padding or placing it on another element (such as a nested span) apparently fixes this.
Sorry, but this time it wasn’t :( I frequently find ALA articles interesting, even when I can’t find them an inmediate use. But not this time.
When I became aware of what a PNG can do I tried this trick, but found most of the problems already mentioned in the article and the comments. But the worst, for me, is that it isn’t enough to mix a color with white or black to make it look good!
Considering that any 256×256 2-color PNG linear gradient is about 860 bytes long and that I can create it with 7 mouse clicks and a filename, I doubt I’ll bother with the second part of the article.
Copy & paste the code below to embed this comment.
Eric Brown
I can see maybe, maybe using this for mock-ups, but with today’s graphic tools, creating high-quality gradients is easy.
I really suggest avoiding this technique and making backgrounds with what they are intended: the background property. At least the background property is cross-platform and has very few issues with various layout techniques (floats, absolute positions, etc) where this method can easily break down.
Copy & paste the code below to embed this comment.
Roger Roelofs
I applaud the creativity, but it has a major down side. The img elements in the markup are not really content, but are shown as such by web clients that aren’t css aware or that have css turned off.
We needed scalable background images for a project several months ago and went with this technique. Our web site navigation now looks horrible in non-css browsers, like cell phones, lynx, or even ie/win in accessibility mode. it also probably makes users of screen readers unhappy.
Its a neat hack, but not a good production solution.
Copy & paste the code below to embed this comment.
Josh Pinkham
I mean, it works – yeah. And it’s a pretty good idea. Very original thought process. It just seems like so much extra work to achieve something you can do with a couple of seconds in photoshop with the gradient tool.
Great idea, really. Just seems a bit excessive to make a gradient.
I recently rediscovered the Power of PNG 24bit transparencies after running some wonderful tests in FireFox and went ga-ga over it. Of course I repeated the tests in IE 6 and wanted to cry… support for this is non existent without going above and beyond compliant mark up for CSS, I wonder how long IE7 will take to hit the masses hard with Windows Vista out. Then we can go Nuts!
Copy & paste the code below to embed this comment.
Boris Kuzmic
I must say that this technique is really great. It also inspired me to create blendy tabs, to use for site navigation. Take a look at:
http://www.boriskuzmic.com/index.php?p=projects_css_js
63 Reader Comments
Back to the ArticleEric Puidokas
Here’s an alternative way to do the browser specific css if you don’t want to include separate stylesheets for each browser.
The Conditional Body Class
“http://www.puidokas.com/updating-my-css-for-ie7/”:http://www.puidokas.com/updating-my-css-for-ie7/
Pat Hunt
I want to like blendies but trying it in the Safari browser yields a question mark. See
http://www.pathuntwebdesign.com/example/
krishnamoorthy manickam
Good effort to reduce the file size and it will help for the good designing also. Now we can create gradient backgrounds in our site with faster downloading.
Thanks…
Thomas Allen
Let’s hope that setting a background size doesn’t become Good Practice like setting any other <img> tag’s size…that would be quite a burden.
Callum Locke
Am I the only one thinking, why is this on ALA?
Nuclear Bob
So instead of just using one tag with one line of CSS to insert a background gradient that’s somewhat larger than needed (and if it eventually bleeds out into a solid colour if text is resized is it really an issue?) I should add an extra img tag and an extra div tag to my mark up everytime I want to insert a background? Then I need how many extra hack riddled CSS rules to make it work?
The whole point of text resizing is to make your pages more accessible. When you use semantically incorrect code, propriety code, unneccesary mark up, a lot of decorative images with missing alt attributes, and numerous CSS hacks you’ve accomplished the exact opposite.
Not to mention search engines crawlers only index a certain number of characters, so all the exra code isn’t going to help your ranking at all.
Do I need to mention the modern web design principle of separation of structure and style?
As long as it looks pretty though because thats the important thing, right?
This is a non ‘solution’ to a non-issue.
Jack Maynard
When viewing the final bendy background example in firefox the alt tag text is showing up in the browser without the need to hover the mouse over the box.
Is there a CSS rule like img[attr=‘alt’]{display:none;}
that can be added?
Otherwise any suggestions why this text is appearing and how it can be hidden???
Everett Lindsay
Thanks muchly, Matthew. Ever since “Michael Lovitt’s”:http://alistapart.com/stories/pngopacity/ timely article, I’ve attempted to apply this very technique a couple of times in vain…I just never had enough patience to get it modular enough for practical application.
Not only are you laying out your explanation exquisitely, but you’re taking extra care to philosophically foreshadow better ways to make this work in any particular environment, without descending into a tangential discussion on tweaking.
Just hurry up and get the second part of this article out before Thanksgiving, and make my holiday weekend, ALA.
Teddy Zetterlund
I just tried using this technique in a project I’m working on it noticed that it breaks in WebKit. Take a look and see what I’m talking about, it’s a bigger problem than with Opera.
Teddy Zetterlund
I took a quick look at the problem and at first I thought it was just a simple overflow problem but it seems it’s a WebKit bug. The image element’s height is continuing outside of it’s parent element.
Putting overflow:hidden on image element’s parent keeps it from breaking really ugly but the gradient will still be broken. A bug report will be sent.
tai vt
Thanks for your article. It’s very useful.
However,how can I put images in the boxes ?
I’ve tried to set the z-index to “2” and higher but it’s no help.
Please help me,thanks a lot!!
Chris Hester
“When viewing the final bendy background example in firefox the alt tag text is showing up in the browser without the need to hover the mouse over the box.“
This isn’t my experience, with Firefox 2 on XP.
NOTE TO EDITORS: Please fix the missing end tag for the code on the previous page of comments! It is turning everything after into Courier, including the side bar!
Peter Brown
Please don’t add
altattribute to decorative images! It should be an empty string:<img alt=”“>
“guidelines on alt by J.Korpela”:http://www.cs.tut.fi/~jkorpela/html/alt.html
Josie Xie
What happened to separating content from presentation? It’s a great technique, but using <img >s as backgrounds?
Hmmm…
Vance Dubberly
Cool technique. Although the scaling of images sends a cold chill down my spine, it stinks of the 1px transparent gif trick for object spacing ( which was only ever used by the lazy and incompotent ). Resizing images forces the browser to waste cpu cycles doing what it’s not really very good at. Given all the other stuff we are forcing browsers to cope with I can’t see how that’s a good idea. And you just know that somebody is going to put this in a div which they will then resize dynamically. Oh the horror!!!
Henawi El
It’s very interesting and I guess there’s no limits to what’s can be done with css!
Neil Yeomans
It looks pretty, but from a semantic perspective, adding an image for purely presentational purposes is iffy. Screen reader users will experience the annoyance of having their reader say “image” each time one of these boxes is “read out” aloud.
a aab
AS of IE 5, you can also produce gradients exclusively with Style Filters. The gradient is exclusively HTML and CSS. it does not require an image
Martin Aarhof
#48 (and others with screenreaders)
Havent you heard about setting the media in the css include?
<style type=‘text/css’ media=‘aural’>
/* Aural = screenreader */
.img { display:none; }
</style>
<style type=‘text/css’ media=‘print’>
/* print = if printing */
.img { display:none; }
</style>
Chris Hester
“AS of IE 5, you can also produce gradients exclusively with Style Filters.“
IE5.5 to be precise.
“The gradient is exclusively HTML and CSS. it does not require an image.“
And only works in one single browser, Internet Explorer, available for one single platform, Windows. The web has moved on. People use Macs. People use Linux. People use mobile phones. Browsers today include a wide range of available programs. Anything IE-only is to be completely avoided (unless your page degrades nicely without the IE-only special effects).
It’s a shame, because filters were one of the coolest things to hit the web. You can use them to rotate images for instance, so only one gif is needed for a four-corner frame. Or have a black and white photo turn to colour on hover just by using a filter.
Arve Systad
Is it really worth it? Is it really worth all the haggle and all that messy markup/CSS-code to save in a few bytes of image-files? I think not. I’d rather preffer ten image-files weighing a few kilobytes rather than having all that extra code to mess up my stylesheet and markup, especially on a large webpage with a complex layout.
You could do it server side (or probably with JS), though, but that again would leave far more work than just making it as images in the first place.
Nice method for experimenting, understanding and learning, but I dont think i will be using it a lot.
Hiren Parmar
Learning CSS with this type of good article and demo is fun… great job!!
Thanks Matthew O’Neill.
Adam Koch
Why does this break in IE 6 when I remove the float:left from the .box? (It will still work in Firefox.)
Ashish Tiwari
nice article, and good concept to apply.
The part to make PNG work in IE using AlphaImageloader seems to be misplaced though.
Why would one require a filter to do other filters’ job, that too using external images?
please look up http://msdn.microsoft.com/workshop/author/filter/reference/filters/gradient.asp
My idea will be to get gradients in IE without using any imges, keep the PNG gradeient of FF and other browsers though.
mike wright
Opera doesn’t like padding on the containing div—it seems to still apply the padding to the absolutely positioned image, but on the right side of the div. Removing the padding or placing it on another element (such as a nested span) apparently fixes this.
An example: http://prisoner34.com/blendy/
Antonio Bueno
Sorry, but this time it wasn’t :( I frequently find ALA articles interesting, even when I can’t find them an inmediate use. But not this time.
When I became aware of what a PNG can do I tried this trick, but found most of the problems already mentioned in the article and the comments. But the worst, for me, is that it isn’t enough to mix a color with white or black to make it look good!
Considering that any 256×256 2-color PNG linear gradient is about 860 bytes long and that I can create it with 7 mouse clicks and a filename, I doubt I’ll bother with the second part of the article.
Marcus Ringer
… some Browsers don’t support the transparency of PNGs?
Eric Brown
I can see maybe, maybe using this for mock-ups, but with today’s graphic tools, creating high-quality gradients is easy.
I really suggest avoiding this technique and making backgrounds with what they are intended: the background property. At least the background property is cross-platform and has very few issues with various layout techniques (floats, absolute positions, etc) where this method can easily break down.
Roger Roelofs
I applaud the creativity, but it has a major down side. The img elements in the markup are not really content, but are shown as such by web clients that aren’t css aware or that have css turned off.
We needed scalable background images for a project several months ago and went with this technique. Our web site navigation now looks horrible in non-css browsers, like cell phones, lynx, or even ie/win in accessibility mode. it also probably makes users of screen readers unhappy.
Its a neat hack, but not a good production solution.
Rob ll
It uses a CSS hack.
I never have used hacks in any of my css. Never will.
I will see if I can come up with the same technique and no hacks.
Josh Pinkham
I mean, it works – yeah. And it’s a pretty good idea. Very original thought process. It just seems like so much extra work to achieve something you can do with a couple of seconds in photoshop with the gradient tool.
Great idea, really. Just seems a bit excessive to make a gradient.
David Martinez
I recently rediscovered the Power of PNG 24bit transparencies after running some wonderful tests in FireFox and went ga-ga over it. Of course I repeated the tests in IE 6 and wanted to cry… support for this is non existent without going above and beyond compliant mark up for CSS, I wonder how long IE7 will take to hit the masses hard with Windows Vista out. Then we can go Nuts!
Boris Kuzmic
I must say that this technique is really great. It also inspired me to create blendy tabs, to use for site navigation. Take a look at:
http://www.boriskuzmic.com/index.php?p=projects_css_js