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]

Web Developers: Taking Action

This is a call to arms for all the web developers out there who constantly complain about Microsoft and how they didn't auto update when IE7 was released.

All over the web I see developers complaining about how they have to develop for IE 5, IE6 & IE7, but there are no real solutions presented, just a lot of talk about how bad microsoft is. I'm asking web developers to make steps to make the average user aware that there is an updated version of internet explorer out there.

People use IE. Microsoft is everywhere, and the average user is not going to switch to firefox. I think helping people move onto IE7 and start abandoning IE6 is a step in the right direction. So here's my solution

developers: start letting your users know about their old browser with this code:

HTML:
<!--[if lte IE 6]>
    <div id="browser">You are currently running an old version of Internet Explorer <a href="http://www.microsoft.com/windows/ie/default.mspx" target="_blank">click here to update your browser</a></div>
<![endif]-->

CSS:

#browser{
    display:block;
    background:#AA030D;
    color:#FFF;
    font-weight:bold;
    text-align:center;
    font-size:100%;
    line-height:2em;

}

#browser a{
    color:#FFF;
    text-decoration:underline;
}

#browser a:hover{text-decoration:none;}

Customize as you wish. If someone comes to your site using IE6 or less it will let them know and provide them a way to update to IE7. I installed it on this site if you want to see it in action (open in IE6-ish).

I hope this idea spreads, I'm not supporting IE by doing this. I just want to take some steps towards people using updated broswers (yea, yea i know). Let's stop complaining and do something about it!

cheers
_tim


Posted by tcwrigh2 ( Dec 04 2006, 04:26:44 PM EST ) Permalink Comments [1]