¿Cómo crear un formularios como el de gmail html css?

Aquí tienes uno muy bueno que instalamos a un cliente y funciona perfectamente mediante pop-up

HTML

<div class="container">
<h1>Popup Login & Signup with jQuery</h1>
<a id="modal_trigger" href="#modal" class="btn">Click here to Login or register</a>

<div id="modal" class="popupContainer" style="display:none;">
<header class="popupHeader">
<span class="header_title">Login</span>
<span class="modal_close"><i class="fa fa-times"></i></span>
</header>

<section class="popupBody">
<!-- Social Login -->
<div class="social_login">
<div class="">

<form>
<label>Full Name</label>
<input type="text" />
<br />

<label>Email Address</label>
<input type="email" />
<br />

<label>Password</label>
<input type="password" />
<br />

<div class="checkbox">
<input id="send_updates" type="checkbox" />
<label for="send_updates">Send me occasional email updates</label>
</div>

<div class="action_btns">
<div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
<div class="one_half last"><a href="#" class="btn btn_red">Register</a></div>
</div>
</form>
</div>
</section>
</div>
</div>

CSS

overflow: hidden;
text-decoration: none;
color: #ED6347;
}
/* User Register Form */

.user_register {
display: none;
}

.user_register label {
display: block;
margin-bottom: 5px;
}

.user_register input[type="text"],
.user_register input[type="email"],
.user_register input[type="password"] {
display: block;
width: 90%;
padding: 10px;
border: 1px solid #DDD;
color: #666;
}

.user_register input[type="checkbox"] {
float: left;
margin-right: 5px;
}

.user_register input[type="checkbox"]+label {
float: left;
}

.user_register .checkbox {
margin-bottom: 10px;
clear: both;
overflow: hidden;
}

JAVASCRIPT

// Plugin options and our code
$("#modal_trigger").leanModal({
top: 100,
overlay: 0.6,
closeButton: ".modal_close"
});

$(function() {
// Calling Login Form
$("#login_form").click(function() {
$(".social_login").hide();
$(".user_login").show();
return false;
});

// Calling Register Form
$("#register_form").click(function() {
$(".social_login").hide();
$(".user_register").show();
$(".header_title").text('Register');
return false;
});

// Going back to Social Forms
$(".back_btn").click(function() {
$(".user_login").hide();
$(".user_register").hide();
$(".social_login").show();
$(".header_title").text('Login');
return false;
});
});

Puedes ver su funcionamiento online en:

http://codepen.io/anon/pen/GoPvdm 

Esperamos haberte ayudado y no olvides valorar la respuesta ;))

Un Saludo,

Presupuesto Web Gratis de Crear tu Página Web con WordPress

¡Perfecto.. Muchas Gracias! Excelente..