Thursday, December 7th, 2006

Blendy Backgrounds Explained

Category: CSS, Tutorial

Matthew O’neill wrote a tutorial on Super-Easy Blendy Backgrounds:

Recently, while trying to implement a few different navigation ideas that a designer had thrown my way, I became frustrated with my weak image editing skills. The design was gradient-heavy, so a traditional approach to navigation markup and styling would require a dozen or so background-image slices to meet the varying colors and height requirements.

After spending a mortifying amount of time creating the images—I’m a programmer by trade, so anything more complicated than MS Paint gives me the willies—I had to take a step back and figure out a better way. What if, after finishing, I needed to tweak the height? Or, God forbid, the color palette? My head was going to explode if I had to open an image editor again, so the Super Easy Blendy Backgrounds technique was born.

The article follows the typical pattern of “hmm, well in IE 7 we found that you needed to do this” and walks you through all of the fixes (we won’t say hacks).

They end up with:

  1. <style type="text/css">.grad img {
  2.   height: 100%;
  3.   left: 0px;
  4.   position: absolute;
  5.   top: 0px;
  6.   width: 100%;
  7.   z-index: 0;
  8. }
  9. .box {
  10.   border: solid orange 2px;
  11.   float: left;
  12.   margin: 1px;
  13.   position: relative;
  14.   width: 165px;
  15.   padding: 5px;
  16. }
  17. .box * {
  18.   margin: 0px;
  19.   position: relative;
  20.   z-index: 1;
  21. }
  22. * html .grad {
  23.   filter: progid:DXImageTransform.Microsoft.AlphaImage »
  24. Loader (src='grad_white.png', sizingMethod='scale');
  25. }
  26. * html .grad img {
  27.   display: none;
  28. }
  29. * html .box {
  30.     position:static;
  31. }
  32. .blue {
  33.   background-color: #2382a1;
  34. }
  35. .green {
  36.   background-color: #4be22d;
  37. }
  38. .pink {
  39.   background-color: #ff009d;
  40. }
  41. </style>
  43. <!--&#91;if IE 7&#93;>
  44. <style type="text/css">
  45. .box {
  46.   border: solid red 2px;
  47.   height:2.5em;
  48. }
  49. </style>
  50. < !&#91;endif&#93;-->

Posted by Dion Almaer at 8:44 am

3.2 rating from 49 votes


Comments feed TrackBack URI

Old news.

Comment by Mike — December 7, 2006

Very nice! I will try it out!

Comment by Oliver Tse — December 7, 2006

Old news, but still very cool!

(there, i fixed it for you.)

Comment by mdm-adph — December 7, 2006

Ugh. I really wanted to like this. But…
This requires adding an <img> element inside the <div>.
What happens when you’re tired of the blendy look? You have to change both the CSS and HTML, most likely removing the unsemantic <img>. Everywhere.
I’d prefer to see something like this confined to the CSS.
So, how many blendy colors do you need for a site? Hopefully no more than 5 or so. But even if it’s 10, prepare each in your favorite graphics tool, throw them into the CSS, and be done with it.
Now, lets clean up the semantics. Class names like “box grad pink” are presentation-specific. What if the client wants to change pink to orange? Again, changes in the HTML. I like a class to reflect the meaning of an element, rather than its appearance — like “action cancel”.
Finally, for button-like elements, the entire rectangular area should probably be active, rather than just the text. One way to do this is to style a link as a block.
So we end up with something like:
<a class="action" href=...>Buy Now</a>
a.action {
display: block;
width: 10em;
float: left;
background:skyblue url(skyblue-blendy.gif) repeat-x;

Comment by Eric — December 7, 2006

For IE6-, use gradient filter will be easier

_zoom:1;’true’, startcolorstr=#ffffff, endcolorstr=#4be22d)

a simple gradient

Comment by Hedger Wang — December 7, 2006

Dear Ajaxian,
before posting any articles, please check with Mike to see if he’s already heard of it.

Comment by Paradise Pete — December 7, 2006

Interesting Finds: December 7, 2006

Trackback by Jason Haley — December 7, 2006

All this code to make this ?
I make a same thing in five minuts making a texture in photoshop and it repeat-x….done.

Comment by Igor Escobar — December 8, 2006

you bunch of stupid people!!!! try to use that blendy with a gif in another background than white and you’ll see the results. this great example is used to combine the alpha opacity power of the png graphic (natively supported by firefox) with internet explorer, in a way that you can rezise the document and it’ll fit well. Of course it ani’t the best to do it, but it the most practical and efficient way to achieve that results.

Comment by truly webmaster — December 9, 2006

Hmm, looks like a lot of the commenters haven’t actually read the article. You can create fixed size gradients in “Your favourite pixel editor”, but you can’t make them stretch to fill a non-pre-defined space. The img and background colour route certainly works and is nicely controlled by the css for the container (div,etc).

(Like Igor said :) )

The author has tried to make this cross platform – so using a specific MS filter is Ok, if you don’t care about actually being cross-platform (and having extra code to handle the start/end colours – the authors route simply sets the background colour of the container!)

In my opinion, it’s a good article and nicely covers the cross-platform and current limitiations of HTML, etc.

Good work.

Comment by Dave Probert — December 9, 2006

Ihre Website ist wirklich sehr informativ-ich werde sicherlich noch öfters vorbeikommen und mir den ein oder anderen Tipp hier herauslesen.

Comment by clever vv — May 27, 2007

great sit with good information
many greetings from germany Tee

Comment by Tee — June 11, 2007

a very iteresting articel, thank you very much

Comment by Hotels in Bremen — October 10, 2007

Also thanks. I enjoyed reading the article

Comment by Fernstudium — October 21, 2007

Its good to know Ajax, but you should get to know java first.

Comment by przeprowadzki — March 12, 2008

nice trick, but sometime IE acts strange when using filter to load png image. I haven’t figure yet why it happens yet

Comment by backgroundsMaster — June 4, 2008

great article.

Comment by erichansa — October 13, 2008

a little bit old, but still interesting.

Comment by Ruerup — March 18, 2009

very iteresting, thanks

Comment by 555333 — June 3, 2009

Leave a comment

You must be logged in to post a comment.