Você já deve ter visto muitos formulários de login atrativos criados com jQuery e CSS. Neste tutorial, eu vou explicar como criar um formulário de login e registo espetacular com alguns efeitos jQuery de deslizamento.
Usei efeitos jQuery e CSS3. Veja a demo e faça o download dos ficheiros, disponíveis no fim do tutorial, para experimentar este script.
DEMO: jQuery – Formulário Login Com Efeito Deslizamento
Código jQuery
$(document).ready(function() {
$("div.toggle_buttons").click(function(){
$("div#wraper").animate({
width: "400px"
})
.animate({
width: "300px"
}, "fast");
$("div.toggle_buttons").toggle();
});
$("div#hide").click(function(){
$("div#wraper").animate({
width: "0px"
}, "fast");
});
});
Código HTML
Login
Username:
Password:
Register
Username:
Password:
Email:
Código CSS
body {
text-align: center;
font-family: Georgia, Verdana, “Lucida Sans Unicode”, sans-serif;margin: 0px;
text-shadow:1px 1px 1px #000;
text-transform:uppercase; color:#fff;
}
p{ font-size:16px; font-weight:bold; text-align:left; padding:0 15px 15px 15px }
#holder{height: 100%;}
#wraper {
width: 0px;
position: relative;
top: 1px;
right:0px;
z-index: 10;
float:left;
overflow: hidden;
text-align: center;
}
input.fields{ padding:3px; height:20px; width:235px; margin-bottom:7px;}
.toggle_buttons img{ cursor:pointer; float:left;}
.border:hover{border: 10px #666 solid;}
.border {
border: 10px #A2A2A2 solid;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
background:url(background.jpg) top center no-repeat;
-moz-border-radius: 10px;
border-radius: 10px;
}
h1{ padding:0px; font-size:22px; margin:0xp;}
.toggle_buttons {top: 1px;z-index: 10;right:0px;position: relative; text-align:right; width: 60px; float:left}
#Send{ border:#CC0000 solid 1px;background:#CC0000; color:#FFFFFF; padding:8px; width:110px; cursor:pointer}
Download do código usado neste tutorial: jQuery – Formulário Login Com Efeito Deslizamento
3 Responses
Amei toda a parte com o jquery do site!
eu estava com dificuldades em alguns códigos, mas tirei todas as minhas dúvidas por aqui!
Obrigada…
Gostaria de saber para onde irá o formulário enviado pelo visitante.
Oii, você quem decidirá, voce terá que envolver todos os inputs da pagina dentro da tag "<form action="aqui_voce_defini_qual_a_proxima_pagina"> " e depois do botao Input, voce devera fechar sua tag "</form>". Espero ter ajudado, apesar do tempo hehe. Abraços