CSSKarma

Main Nav:

• home
• articles
• lab
• research
• portfolio
• contact

Social Nav:

• facebook
• twitter
• dopplr
• plurk
• pandora

Extra Nav:

• RSS
• Twitter
• FatFold

Web2.0 Background with pure CSS

The split-color background is a fairly common sleek trend in the age of web2.0, and this is how you can do it without images!

With everyone throwing around the term "web2.0" and try out new things, I thought I'd give it a try and see if some CSS can create a web2.0 look for a website (gradients, glassy buttons, etc.). I also love irritating graphic designers by finding a CSS alternative to using bulky images.

So I sat down to see what I could come up with; this is what I got:

That split-color background is a fairly common sleek trend in the age of web2.0

examples:

• http://www.yahoo.com/
• http://espn.go.com/

you get the point.

if you examine the graphic, it's basically 2 flat colors, a few hex codes apart. I consistently see people using graphics to achieve this effect, but now you don't have to!

The code is below, you can copy it and customize it as you wish. I'll just explain some of it now. The HTML is nothing special, just your basic unordered list, so I'll skip that.

The main CSS components that make this work are in"#nav" and "#nav a".

#nav

border-top:12px solid #FCDB58 creates the top half (lighter yellow)
background: #FC0 creates the bottom half (darker yellow)
border-bottom:4px solid #F60 is just the orange bottom border
position:relative makes this work in different browsers

#nav a

margin-top: -7px pulls the text over the top border making it look like the div is split in half
position:relative makes this work in different browsers (it's important to have both)
everything else is pretty standard for horizontal navigation. Feel free to email me with any trouble.

with ease,
_tim

CSS

#nav{    
height:12px;    
background: #FC0;    
border-top:12px solid #FCDB58;   
border-bottom:4px solid #F60;    
padding:0;    
clear:both;    
position:relative;    
}            

#nav a{    
color:#26354A;    
padding:0 10px;    
display:block;    
font-size:70%;    
border-right:solid 1px #F60;    
margin-top: -7px;    
position:relative;    
}        

#nav ul{    
list-style:none;   
margin: 0;    
padding: 0 0 0 20px;      
font-size:100%;    
}        

#nav li{float:left;}

Verified in:

- Firefox 2.0 (PC)
- Firefox 2.0 (MAC)
- Internet Explorer 6
- Internet Explorer 7
- Opera 9
- Safari 2.0