CSS3 and Veer navigation

April 15, 2010

CSS3 is helping the designers get creative and save time spent in slicing images from crash-prone Photoshop. Just like web standards have helped reduce code from 30% to 60%, CSS3 is here to take this reduction to next step by recreating various widely used design elements by using CSS properties like box-shadow, text-shadow and round-corner. But not everyone seems to be taking advantage of this.

Veer.com is famous for selling stock photography, type and illustrations. It’s a simple, clean and beautiful site with nice navigation design. But when we look at the CSS behind this navigation, it’s huge, around 100 lines of code just for the 6 navigation items. CSS3 can reduce this to just 11 lines. I’m not kidding. It’s around 90% of code reduction. Check out for yourself.

How it works?

This is veer navigation behind the scenes. A big fat gif image of 122KB with different states for active and hover actions.

Veer Navigation Image

Using background-position CSS property, the above image is moved up and down on hover and active states to show different states of particular state of each navigation item.

Here is the code behind the Veer navigation:

#db_nav { bottom:17px; height:22px; left:100px; margin:0; padding:0; position:absolute; z-index:1; }

#db_nav li,#db_subnav li { display:block; list-style:none; }

#db_nav li a { bottom:0; float:left; height:0; overflow:hidden; padding-top:22px; position:absolute; background-repeat:no-repeat; background:none; background-image:url(../../images/dungbeetle_nav.gif); }

li#db_phot a:hover { left:0; margin-right:auto; }

li#db_illu a:hover { left:95px; width:95px; }

li#db_type a:hover { left:182px; width:60px; }

li#db_mrch a:hover { left:234px; width:67px; }

li#db_mkpl a:hover { left:293px; width:104px; }

li#db_idea a:hover { left:391px; width:69px; }

li#db_phot a { left:0; width:103px; }

li#db_illu a { left:103px; width:87px; }

li#db_type a { left:190px; width:52px; }

li#db_mrch a { left:242px; width:59px; }

li#db_mkpl a { left:301px; width:96px; }

li#db_idea a { left:397px; width:63px; }

.home li#db_phot a { background-position:0 0; }

.home li#db_illu a { background-position:-103px 0; }

.home li#db_type a { background-position:-190px 0; }

.home li#db_mrch a { background-position:-242px 0; }

.home li#db_mkpl a { background-position:-301px 0; }

.home li#db_idea a { background-position:-397px 0; }

.home li#db_phot a:hover { background-position:0 -138px; }

.home li#db_illu a:hover { background-position:-95px -115px; }

.home li#db_type a:hover { background-position:-182px -92px; }

.home li#db_mrch a:hover { background-position:-234px -69px; }

.home li#db_mkpl a:hover { background-position:-293px -46px; }

.home li#db_idea a:hover { background-position:-391px -23px; }

.phot li#db_phot a { background-position:0 -966px; }

.phot li#db_illu a { background-position:-103px -966px; }

.phot li#db_type a { background-position:-190px -966px; }

.phot li#db_mrch a { background-position:-242px -966px; }

.phot li#db_mkpl a { background-position:-301px -966px; }

.phot li#db_idea a { background-position:-397px -966px; }

.phot li#db_phot a:hover { background-position:0 -966px; }

.phot li#db_illu a:hover { background-position:-95px -943px; }

.phot li#db_type a:hover { background-position:-182px -920px; }

.phot li#db_mrch a:hover { background-position:-234px -897px; }

.phot li#db_mkpl a:hover { background-position:-293px -874px; }

.phot li#db_idea a:hover { background-position:-391px -851px; }

.illu li#db_phot a { background-position:0 -805px; }

.illu li#db_illu a { background-position:-103px -805px; }

.illu li#db_type a { background-position:-190px -805px; }

.illu li#db_mrch a { background-position:-242px -805px; }

.illu li#db_mkpl a { background-position:-301px -805px; }

.illu li#db_idea a { background-position:-397px -805px; }

.illu li#db_phot a:hover { background-position:0 -828px; }

.illu li#db_illu a:hover { background-position:-95px -805px; }

.illu li#db_type a:hover { background-position:-182px -782px; }

.illu li#db_mrch a:hover { background-position:-234px -759px; }

.illu li#db_mkpl a:hover { background-position:-293px -736px; }

.illu li#db_idea a:hover { background-position:-391px -713px; }

.type li#db_phot a { background-position:0 -644px; }

.type li#db_illu a { background-position:-103px -644px; }

.type li#db_type a { background-position:-190px -644px; }

.type li#db_mrch a { background-position:-242px -644px; }

.type li#db_mkpl a { background-position:-301px -644px; }

.type li#db_idea a { background-position:-397px -644px; }

.type li#db_phot a:hover { background-position:0 -690px; }

.type li#db_illu a:hover { background-position:-95px -667px; }

.type li#db_type a:hover { background-position:-182px -644px; }

.type li#db_mrch a:hover { background-position:-234px -621px; }

.type li#db_mkpl a:hover { background-position:-293px -598px; }

.type li#db_idea a:hover { background-position:-391px -575px; }

.mrch li#db_phot a { background-position:0 -483px; }

.mrch li#db_illu a { background-position:-103px -483px; }

.mrch li#db_type a { background-position:-190px -483px; }

.mrch li#db_mrch a { background-position:-242px -483px; }

.mrch li#db_mkpl a { background-position:-301px -483px; }

.mrch li#db_idea a { background-position:-397px -483px; }

.mrch li#db_phot a:hover { background-position:0 -552px; }

.mrch li#db_illu a:hover { background-position:-95px -529px; }

.mrch li#db_type a:hover { background-position:-182px -506px; }

.mrch li#db_mrch a:hover { background-position:-234px -483px; }

.mrch li#db_mkpl a:hover { background-position:-293px -460px; }

.mrch li#db_idea a:hover { background-position:-391px -437px; }

.mkpl li#db_phot a { background-position:0 -322px; }

.mkpl li#db_illu a { background-position:-103px -322px; }

.mkpl li#db_type a { background-position:-190px -322px; }

.mkpl li#db_mrch a { background-position:-242px -322px; }

.mkpl li#db_mkpl a { background-position:-301px -322px; }

.mkpl li#db_idea a { background-position:-397px -322px; }

.mkpl li#db_phot a:hover { background-position:0 -414px; }

.mkpl li#db_illu a:hover { background-position:-95px -391px; }

.mkpl li#db_type a:hover { background-position:-182px -368px; }

.mkpl li#db_mrch a:hover { background-position:-234px -345px; }

.mkpl li#db_mkpl a:hover { background-position:-293px -322px; }

.mkpl li#db_idea a:hover { background-position:-391px -299px; }

.idea li#db_phot a { background-position:0 -161px; }

.idea li#db_illu a { background-position:-103px -161px; }

.idea li#db_type a { background-position:-190px -161px; }

.idea li#db_mrch a { background-position:-242px -161px; }

.idea li#db_mkpl a { background-position:-301px -161px; }

.idea li#db_idea a { background-position:-397px -161px; }

.idea li#db_phot a:hover { background-position:0 -276px; }

.idea li#db_illu a:hover { background-position:-95px -253px; }

.idea li#db_type a:hover { background-position:-182px -230px; }

.idea li#db_mrch a:hover { background-position:-234px -207px; }

.idea li#db_mkpl a:hover { background-position:-293px -184px; }

.idea li#db_idea a:hover { background-position:-391px -161px; }

(Veer navigation CSS file at veer.com)

Isn’t that huge? Let’s get rid of it.

CSS3 to rescue

Using CSS properties like box-shadow and border-radius along with z-index, we can easily create similar navigation without using an image. Following are the actual snapshots from Veer.com and one I created using pure CSS.

Checkout revised design of Veer.com navigation using CSS3.

Following is the 11 line code that helped build this beautiful navigation using the mighty CSS3:

 nav { bottom: 0; height:22px; left:150px; margin:0; padding:0; position:absolute; z-index:1; border-bottom: 15px solid #fff; width: 580px; overflow: hidden; }

nav li { float: left; text-align: center; }

nav a { text-decoration: none; font: 11px Geneva, Tahoma, sans-serif; color: #fff; display: block; padding: 4px 0 4px 5px; -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; margin-left: -5px; position: relative; height: 20px; box-shadow:3px 1px 3px rgba(0, 0, 0, .25); -moz-box-shadow:3px 1px 3px rgba(0, 0, 0, .25); -webkit-box-shadow:3px 1px 3px rgba(0, 0, 0, .25); }

#nav-h a { width: 55px; background-color: #8c8c8c; z-index: 7; margin-left: 0; padding-left: 0; }

#nav-s a { width: 75px; background-color: #7a7a7a; z-index: 6; }

#nav-p a { width: 75px; background-color: #696969; z-index: 5; }

#nav-b a { width: 55px; background-color: #525252; z-index: 4; }

#nav-a a { width: 65px; background-color: #3d3d3d; z-index: 3; }

#nav-c a { width: 65px; background-color: #2b2b2b; z-index: 2; }

#navigation a:hover { background-color: #ddd; color: #444; }

#navigation .active a { background-color: #fff; color: #222;}

This shows the power of CSS[3] and benefits of designing in the browser. Let’s exploit it.

19 Comments

Add your comment

# Leon
says on April 15

Good stuff. Obviously a lot quicker to write as well.

I guess the argument against using CSS3 is that it’s not supported by browser x and that it’d leave a rather plain alternative for these browsers.

I was listening to an interview with Zeldman this morning where he basically said the support for CSS3 is coming so go ahead and do it now; in a few months it’ll work in a far higher % of browsers. That’s got to be a better option than putting an image and CSS through the wrangle to achieve shadows and round corners.
# Iwani
says on April 15

It’s just a matter of time when everyone will be using CSS3 for all their web projects.

We are already starting to use CSS3 on some of our client’s projects and most of our own projects where we know most users are using latest browsers
# David
says on April 15

Great work! CSS3 is making web design so much easier. I love how during the hover state, the shadow from the neighboring tab is cast on the hovered tab.
# Mahijeet
says on April 15

Yeah, that’s true CSS3 helping the designers in very good manner. But the main argument against using CSS3 as discussed earlier i.e. browser support. Still 90% people use the older version of various browsers. They don’t know about any css and html and they don’t need to feel change their browser.
But hope one day the CSS3 will help designers 100%.
# Gui Maso
says on April 16

You guys worry too much. Make it uglier and worst for those who don’t want to use new technology. Just kidding. We need to find a intelligent way to make people aware that they are in a jurassic browser and what are the consequences of that.

Sacrificing the whole development of the web and have to work 10 times more only because some people are lazy is a idiotic action. We need to find ways to change this, for our benefit and of the users as well. We need better websites with better codes, structures, layouts and so on. And that is only possible if we don’t stop in time with our development because of the lazy user. It’s a win-win situation in the end, and we really need to start using our big brain to find a solution for this end, after all, it is that what a designer is, no? A problem solver.
And guys, we have this problem for years now.
# scott
says on April 16

there are plenty of ways to hack in css3 properties into even the older browsers.

css3please.com showcases a bunch of rules to get the same effect. There are javascripts out there now that will make IE render some css3 properties.

The extra work it takes to implement code to make these techniques work in older browsers is still quicker than the alternative of creating all the different images, I find.
# Beau
says on April 16

Nice CSS3 demo Amrinder. I totally agree with your assessment and you really illustrate how CSS 3 can cut away the cruft.

Our navigation uses this CSS sprite technique as it was a much more efficient way to achieve this style of navigation than our previous Javascript version. You brilliantly show the next iteration. I recently attended An Event Apart in Seattle where much of what you mention was discussed and encouraged to be used NOW in today’s browsers. Unfortunately, as we all know, one family of browsers lags significantly behind in the standards department. As our navigation is an important part of our brand, we can’t afford to have it looking markedly different in 20% of our customers browsers; though I agree that it is still very functional.

That doesn’t mean we won’t be adding CSS3 to our styles in upcoming releases. It will just follow the concept of progressive enhancement and be used in non-critical situations that improve the user experience. More whiz-bang for the mozilla/webkit crowd!

Another improvement to your example may be to include the vendor specific prefixes prior to declaring the actual property that will eventually make it into the the standard. That way the final spec will be used by the standards compliant browser. EG:

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius:4px;
border-radius: 4px;

Great example and thanks for the inspiration.

-beau
# Amrinder
says on April 16

@Beau: Glad to see you here.

As our navigation is an important part of our brand, we can’t afford to have it looking markedly different in 20% of our customers browsers; though I agree that it is still very functional.

I completely agree with your point and love the navigation design at Veer.com, and don’t want it to appear differently in different browsers. I am talking about IE, and for that you can use the current CSS rules you have while putting them in separate stylesheet and linking it using .

Nice to know that you guys are introducing CSS3 to new releases. I am sure it will save you time and money and your designers will appreciate this move.
# Zoe Gillenwater
says on April 16

Great article showing why CSS3 is about more than making things pretty. It can really improve efficiency, both in your development time and page performance.

I agree with Beau that the non-prefixed versions of the CSS3 properties should follow the prefixed ones. (Though, in the case of border-radius, no -o- version is needed, as Opera supports plain old border-radius.)
# Deluxe Blog Tips
says on April 16

Very nice. I’ve seen this type of navigation elsewhere, where the menu items are cascading. But I don’t know how they do it. The idea of using a large image in this post is really great. It’s so impressive to me. Thank you very much.
# Web Risorsa
says on April 16

Superb effort made. I have used this kind of menu few years back on one my client website. But i have used this as a whole image with rollover concept. But this one impressed me a lot…
# Inf3rnal
says on April 16

Very nice article. About the issues with cross-browser compliance. Why don’t you just make the old style sheet IE, Netscape, etc only and make the CSS3 everything else.
# todd g
says on April 17

i love it when people do stuff like this. efficient code is happy code.
# Dotker
says on April 17

really really cool! I always wondered how they did that!
# Piotr Skonieczny
says on April 17

“…crash-prone Photoshop.” ??

I’ve never had Photoshop crash on me. Never. On any computer.. weak or powerful.

From version 5.5 to CS4. Never.
# Tom Hermans
says on April 17

Wow, didn’t realize Veer had such a bloated nav. This solution is much prettier.

about “…crash-prone Photoshop.”
lately I’m reading a lot of Mac-users (exclusively) complaining about PS crashing.. I have rarely seen this happen on PC. Can’t even remember the last time..
# Deoxys
says on April 17

Haha, this a nice thing 🙂 Very funny CSS3 FTW, IE FTL!!

I also never got my PS crashed…
# Amrinder
says on April 17

@Piotr, @Tom, @Deoxys: I’m very happy for you guys that your PS never crashed. I hear it from people I follow on twitter, may be they use it too hard. It hasn’t happened with me from over an year now, because I’ve stopped using it :). I use Fireworks which is actually made to design websites (though it crashes more often).
# tejas
says on June 01

I guess it clearly depends on what your website’s audience is. I used CSS3 for minor as well as major things on Footerama, but I cannot use it on one of my forthcoming projects which is an eCommerce website for women accessories. Why? A lot of working females browse most of their internet at their workplaces and what is the workplace standard browser in the United States? Yes, it is IE6! 😛 Hence a 2-3 hours solution to create photoshop files and slicing them works ultimately better than easier CSS3 tweaks.

CSS3 and Veer navigation

How it works?

CSS3 to rescue

Share this:

Related

19 Comments

# Leon says on April 15

# Iwani says on April 15

# David says on April 15

# Mahijeet says on April 15

# Gui Maso says on April 16

# scott says on April 16

# Beau says on April 16

# Amrinder says on April 16

# Zoe Gillenwater says on April 16

# Deluxe Blog Tips says on April 16

# Web Risorsa says on April 16

# Inf3rnal says on April 16

# todd g says on April 17

# Dotker says on April 17

# Piotr Skonieczny says on April 17

# Tom Hermans says on April 17

# Deoxys says on April 17

# Amrinder says on April 17

# tejas says on June 01

# Leon
says on April 15

# Iwani
says on April 15

# David
says on April 15

# Mahijeet
says on April 15

# Gui Maso
says on April 16

# scott
says on April 16

# Beau
says on April 16

# Amrinder
says on April 16

# Zoe Gillenwater
says on April 16

# Deluxe Blog Tips
says on April 16

# Web Risorsa
says on April 16

# Inf3rnal
says on April 16

# todd g
says on April 17

# Dotker
says on April 17

# Piotr Skonieczny
says on April 17

# Tom Hermans
says on April 17

# Deoxys
says on April 17

# Amrinder
says on April 17

# tejas
says on June 01