Super-Easy Blendy Backgrounds

Matthew O'Neill on a list apart has posted an article on "Super-Easy Blendy Backgrounds". Here is what he says: 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 […]

Matthew O'Neill on a list apart has posted an article on "Super-Easy Blendy Backgrounds". Here is what he says:

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.
Continue for more info....

Here’s the final CSS in its entirety.

<style type="text/css">.grad img { height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 0; } .box { border: solid orange 2px; float: left; margin: 1px; position: relative; width: 165px; padding: 5px; } .box * { margin: 0px; position: relative; z-index: 1; } * html .grad { filter: progid:DXImageTransform.Microsoft.AlphaImage &raquo; Loader (src='grad_white.png', sizingMethod='scale'); } * html .grad img { display: none; } * html .box { position:static; } .blue { background-color: #2382a1; } .green { background-color: #4be22d; } .pink { background-color: #ff009d; } </style><!--[if IE 7]> <style type="text/css"> .box { border: solid red 2px; height:2.5em; } </style> <![endif]-->

The final markup:
<div class="box grad blue">
  <img src="grad_white.png" alt="blur gradient box" / />
  <p>Ooo, linked text!</p>
</div>
<div class="box grad pink">
  <img src="grad_white.png" alt="pink gradient box" / />
  <p>Ooo, linked text!</p>
</div>
<div class="box grad green">
  <img src="grad_white.png" alt="green gradient box" / />
  <p>Ooo, linked text!</p>
</div>

ajaxian

Super-Easy Blendy Backgrounds