Friday, June 12, 2009

Simple White Gradient Tabs and Borders

Working with a white background for most of the page can be a bit challenging, but you can use white gradients to get a paper with shadow effect pretty quickly. I used 45px high #ccc to #fff white gradient background for the tabs. Then the gradient at the top of the container is a 15px #eee to #fff. Finally for the bottom edge I used a 15px high #fff to #eee. You might want 15px of buffer white space under that.

Here's an example:

Example HTML and CSS:

<HTML>
<HEAD>
 <TITLE>Tabs Example</TITLE>
 <!-- from http://stufftohelpyouout.blogspot.com/2009/06/simple-but-stylish-white-paper-tabs-and.html -->
 <STYLE type="text/css">
ul#nav_main {margin:0; padding:0; border:none;}
ul#nav_main li {float:left; margin:0; padding:0; list-style:none;}
ul#nav_main li a {display:block; height:33px; min-width:4.5em; line-height:2.3;
 margin:0 0 0 1em; padding:0 .7em; color:#28305E; text-decoration:none;
 text-align:center; background-color:#eeeeee; background: url(./gradient1.png) left top;
 font-size:14px; font-weight:bold; padding-bottom:2px;}
ul#nav_main li a:hover {color:#F09905;}
ul#nav_main li a#current {color:#F09905;}
#container {background:#FFF url(./gradient2.png) repeat-x left top; padding-top: 15px;}
#footer {background:#FFF url(./gradient3.png) repeat-x left top; height:75px;}
 </STYLE>
</HEAD>
<BODY>
<div id="header">
<ul id="nav_main">
<li><a id="current" class="..." href="...">Welcome</a></li>
<li><a class="..." href="...">Map</a></li>
</ul>
</div>
<div style="clear:both;"></div>
<div id="container">
Welcome to white paper tabs!<br/>
<br/>
Hope you like it.<br/>
<br/>
<br/>
Thanks!<br/>
</div>
<div id="footer"></div>
</BODY>
</HTML>

Gradient images:

To create these gradients, I used Dynamic Drive's online gradient tool.

No comments: