9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Monday, March 2, 2009

Clean User Interface CSS Tips

So in this post i want to explain how to design a clean user interface using CSS (Cascading Style Sheets). It's useful to make your web pages more simple and neat.

Better than images to use CSS buttons the web page download faster.
CSS Buttons

Style Sheet
CSS and HTML code
body
{
font-family:"Tahoma", Arial, sans-serif;
}
.css_button
{
 border:#658A33 solid 3px;
 background-color:#97CD39;
        color:#000;
 font-size:14px;
 padding:4px 
   -moz-border-radius: 6px; -webkit-border-radius: 6px; 
}

<span class="css_button"&gt; Save Now </span>

For rounded corners add this below CSS code:
-moz-border-radius: 3px; -webkit-border-radius: 3px;

Some buttons color combination:
Pink Button
- border:#fdd6d9 solid 4px; background-color:#fff; color:#b94d30;

Light Green Button
- border:#d8e2bd solid 4px; background-color:#fff; color:#819c2b;

Login Button Set
- border:#dedede solid 2px; background-color:#f5f5f5; color:#819215;

Download Script     Live Demo

Footer Design with DIV


<STYLE type='text/css'>
#right{
 background:url(bg1.jpg) bottom right no-repeat;
 background-color:#FFFFFF
}       
#left{
 background:url(bg2.jpg) bottom left no-repeat;
 height:80px; 
}
</style>

<body bgcolor="#666666">
 
<div id='right'>
<div id='left'>
 
</div>
</div>
 
</body>
Download Script     Live Demo

Related Posts
Some Clean JavaScript tips
Best Resources for Webmasters
Comments
{ 2 comments }
Css Tricks said...

Nice sharing good css tips i appreciate your effort

Anonymous said...

SASa

Post a Comment