Thursday, December 7th, 2006
Blendy Backgrounds Explained
<p>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:
-
-
<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 »
-
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]-->
-
Related Content:
Old news.
Very nice! I will try it out!
Old news, but still very cool!
(there, i fixed it for you.)
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>and…
a.action {display: block;
width: 10em;
float: left;
background:skyblue url(skyblue-blendy.gif) repeat-x;
}
For IE6-, use gradient filter will be easier
.foo{
_zoom:1;
_filter:progid:dximagetransform.microsoft.gradient(enabled=’true’, startcolorstr=#ffffff, endcolorstr=#4be22d)
}
a simple gradient
Dear Ajaxian,
before posting any articles, please check with Mike to see if he’s already heard of it.
Thanks!
Interesting Finds: 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.
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.
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.
Ihre Website ist wirklich sehr informativ-ich werde sicherlich noch öfters vorbeikommen und mir den ein oder anderen Tipp hier herauslesen.
thx
I think these blog is really useful for new comers and Excellent resource list.
It´s a very interesting Blog and simple answer of many questions.
Keep up the good work!
Thanks it helps me a lot…
great sit with good information
many greetings from germany Tee
Remember one thing about design is that it really isn’t so much about what you PUT IN but what you LEAVE OUT that makes for a good, simple, but creative design. Few designers realise this. With the increasing popularity of CSS and web 2.0 environments, this is becoming more the norm (simple) but I’m worried that creativity is now being lost in the process. Everyone looks the same, functions the same. While I’d rather have standardization on a more clean look (in other words, in the 90′s the standard was “messy, links everywhere, and horrible bannersâ€) we mustn’t throw creativity out all together!
a very iteresting articel, thank you very much
Also thanks. I enjoyed reading the article
Its good to know Ajax, but you should get to know java first.
nice trick, but sometime IE acts strange when using filter to load png image. I haven’t figure yet why it happens yet
great article.
a little bit old, but still interesting.
very iteresting, thanks