CSS3 and Veer navigation
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.
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.
# 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