Css com estilo, tabela de login e cadastro!

Muito facil e simples de implementar, e perfeito para ocupar menos espaço em seus layouts, confira!

Passo 1
Layout é dividido em 3 partes, Container, Tabbox e Panel, a div Container é a div principal.

Codigo HTML:
<div id=”container”>
<div id=”tabbox”></div>
<div id=”panel”></div>
</div>

Codigo CSS
#container
{
width:350px
}
#tabbox
{
height:40px
}
#panel
{
background-color:#FFF;
height:300px;
}

Passo 2
Div Tabbox é dividida em 2 partes verticais a aba Login e Cadastro

Codigo HTML
<div id=”tabbox”>
<a href=”#” id=”signup”>Signup</a>
<a href=”#” id=”login”>Login</a&gt;
</div>

Codigo CSS

.tab
{
background: #dedede;display: block;height: 40px;
line-height: 40px;text-align: center;
width: 80px;float: right;font-weight: bold;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius: 4px 4px 0px 0px;
}
a
{
color: #000;
margin: 0;
padding: 0;
text-decoration: none;
}
.signup
{
margin-left:8px;
}
.select
{
background-color:#FFF;
}

Passo 3
Agoa a Div Panel dividida em 2 parte, são Loginbox e Signupbox.

Codigo HTML
<div id=”panel”>
<div id=”loginbox”>Login Form</div>
<div id=”signupbox”&gt;Signup Form</div>
</div>

Codigo CSS
#loginbox
{
min-height:200px;
padding:10px;
}
#signupbox
{
min-height:200px;
padding:10px;
display:none;
}

Passo 4
Manipulação de objetos DOM com JavaScript.

Codigo Javascript

<script type=”text/javascript” src=”http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function()
{

$(“.tab”).click(function()
{
var X=$(this).attr(‘id’);

if(X==’signup’)
{
$(“#login”).removeClass(‘select’);
$(“#signup”).addClass(‘select’);
$(“#loginbox”).slideUp();
$(“#signupbox”).slideDown();
}
else
{
$(“#signup”).removeClass(‘select’);
$(“#login”).addClass(‘select’);
$(“#signupbox”).slideUp();
$(“#loginbox”).slideDown();
}

});

});
</script>

Baixar o Script | Veja o Sctipt funcionando

Agora é só usar sua criatividade e dar mais vida a isso, boa sorte!