CSS XHTML Tutorial

CSS XHTML Tutorial
CSS XHTML tutorial
Showing posts with label psd to css html. Show all posts
Showing posts with label psd to css html. Show all posts

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>

Saturday, December 26, 2009

How to design a CSS based Login Form

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>