diTii.com Digital News Hub

Sign up with your email address to be the first to know about latest news and more.

I agree to have my personal information transfered to MailChimp (more information)


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 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.

The final markup:


Super-Easy Blendy Backgrounds

Share This Story, Choose Your Platform!