Wednesday, January 13, 2010
CSS Based Vertical Navigation With Mouse-Over Effect
Create following styles in your head section ;
<style type="text/css">
*{padding:0; margin:0;}
body{background:#f6f6f6; font-family:Tahoma, Geneva, sans-serif;}
ul.nav{ list-style:none inside; margin:10px; width:200px; font-size:14px; font-weight:bold;}
ul.nav li{ height:auto; margin:0; border-top:1px #9cf solid; border-bottom:1px #369 solid;}
ul.nav li a{ text-decoration:none; display:block; color:#fff; border-left:20px #069 solid; background:#09C; padding:5px 10px;}
ul.nav li a:hover, ul.nav li.active a{ text-decoration:none; display:block; color:#036; border-left:20px #09c solid; background:#ace; padding:5px 10px;}
</style>
Type the following code in your body section
<body>
<ul class="nav">
<li class="active"><a href="#">Link-1</a></li>
<li><a href="#">Link-2</a></li>
<li><a href="#">Link-3</a></li>
<li><a href="#">Link-4</a></li>
<li><a href="#">Link-5</a></li>
<li><a href="#">Link-6</a></li>
<li><a href="#">Link-7</a></li>
</ul>
</body>
</html>
Labels:
basics of css,
css html,
css navigation,
css xhtml,
learn css,
psd to css html
Saturday, December 26, 2009
How to design a CSS based Login Form
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Based Login Form</title>
<style type="text/css" media="all">
*{padding:0; margin:0}
body{margin:10px; font-family:Arial, Helvetica, sans-serif; font-size:14px;}
form{border:1px #369 solid; background:#35414e; padding:20px; float:left; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; color:#eef;}
label{display:block; margin:10px 0 0;}
input[type=text], input[type=password] {background:#404e5b; border:none; display:block; margin:5px 0 10px; padding:3px; width:300px; color:#eee;}
input[type=submit] {background:#404e5b; border:1px #666 solid; display:block; margin:0 auto; color:#eee; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:5px; -khtml-border-radius:3px; color:#eee; font-weight:bold; padding:3px; cursor:pointer;}
.legend{border-bottom:1px #eee solid; display:block; font-weight:bold;}
</style>
</head>
<body>
<form name="" id="" action="#" method="">
<span class="legend">Login Here</span>
<label>User Name</label>
<input type="text" name="">
<label>Password</label>
<input type="password" name=""><br />
<input type="submit" value="Login" name="">
</form>
</body>
</html>
Labels:
css base for,
css basics,
css form,
css xhtml,
psd to css html
Wednesday, December 23, 2009
Basics of Web Graphic Design
Web design is a kind of graphic design intended for development and styling of objects of the Internet's information environment to provide them with high-end consumer features and aesthetic qualities. The offered definition separates web design from web programming, emphasizing the functional features of a web site, as well as positioning web design as a kind of graphic design.
Web design is the skill of creating presentations of content (usually hypertext or hypermedia) that is delivered to an end-user through the World Wide Web, by way of a Web browser or other Web-enabled software like Internet television clients, microblogging clients and RSS readers.
Web design is the skill of creating presentations of content (usually hypertext or hypermedia) that is delivered to an end-user through the World Wide Web, by way of a Web browser or other Web-enabled software like Internet television clients, microblogging clients and RSS readers.
Subscribe to:
Posts (Atom)