Web2.0 Background with pure CSS

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:

LINK TO IMAGE (if it's not showing up)

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

examples:

• http://www.vois.com/
• 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.

cheers,
_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: 0px;
    padding: 0px 0px 0px 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

Posted by tcwrigh2 ( Dec 14 2006, 12:58:11 PM EST ) Permalink Comments [1]