jQuery – Formulário Login Com Efeito Deslizamento

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


<div id="wraper" align="center">
  
      <div class="border" style="height: 240px;">
      
    <h1>Login</h1>
    
        <p>Username: <br />
          <input type="text" class="fields" size="15" name="username" id="username" />
          <br />
          Password: <br />
          <input type="password" class="fields" size="15" name="password" id="password" />

          <br />
          <input value="Login" type="submit" id="Send">
        </p>
      </div>
    
    <div class="border" style="height: 300px;">
    
      <h1>Register</h1>
    
       <p>Username: <br />
          <input type="text" class="fields" size="15" name="username" id="username" />
          <br />
          Password: <br />
          <input type="password" class="fields" size="15" name="password" id="password" />

          <br />
      Email: <br />
          <input type="email" class="fields" size="15" name="email" id="email" />

          <br />
          <input value="Register" type="submit" id="Send">
        </p>
      </div>
    
    
    </div>
  
    <div class="toggle_buttons"><img src="plus.png"/></div>
    <div class="toggle_buttons" id="hide" style="display: none;"><img src="minus.png" /> </div>

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

Be Sociable, Share!

3 Comentários

  1. Ana =)

    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…

  2. Chuck

    Gostaria de saber para onde  irá o formulário enviado pelo visitante.

    • Adriano

      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

Participa! Comenta...