Giriş formu

Css3 ve jQuery slayt kullanılarak hazırlanmış bir giriş formu örneği. İlk bakışta sadece giriş formu gibi görünen örnekte sign up linkine tıkladığınızda sayfa yenilenmeden üyelik formuna  dönüşüyor. kullanıcı adı ve şifrenin girilmesi için varolan iki adet input  alanı  sign up linkine tıklandığında üç adet input  alanı oluyor.  Never mind linkine  tıkladığınızda ise form alanı slayt olarak küçülüyor ve üç tane görünen input alanından bir tanesi kayboluyor ve geriye görünen iki tane input alanı kalıyor. Ayrıca input  alanları için Css3 geçişler ve dönüşümler kullanılarak güze  bir  efekt eklenmiş. E-mail, şifre yada username alanlarından herhangi birine tıkladığınızda input alanındaki sol çizgi 0.5rem miktarı kalınaşıyor. Resimdede görebilirsiniz. Tıklanmış olan input alanı ile tıklanmamış olan input alanı birbirinden farklı görünüyor.

  Kullanım

• Head etiketleri arasına eklemenz gereken bölümler.

Js adresi :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Css :

body {
 font-family: "Open Sans";
 background: #27ae60;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
 outline: none;
}
form {
 padding: 1rem;
 background: #fff;
 border-radius: 0.25rem;
 box-shadow: 0rem 0.3rem 1rem 0.1rem rgba(0, 0, 0, 0.35);
}
input {
 margin-bottom: 1rem;
 display: block;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
input:not([type=submit]) {
 text-align: center;
 padding: 0.25rem 0.5rem;
 border-radius: 0.15rem;
 border: 2px solid #2cc36b;
 -webkit-transition: border 0.5s ease;
 -moz-transition: border 0.5s ease;
 -o-transition: border 0.5s ease;
 transition: border 0.5s ease;
 box-shadow: 0rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.15) inset;
 font-size: 1.5rem;
 font-weight: 300;
 width: 100%;
}
input:not([type=submit]):focus {
 border-left-width: 0.5rem;
}
.signup-fields {
 display: none;
}
input[type=submit] {
 border: 0rem;
 width: 100%;
 background-color: #27ae60;
 color: white;
 margin-bottom: 0rem;
 font-size: 1.4rem;
 padding: 0.3rem 0rem;
}
input[type=submit]:hover {
 cursor: pointer;
 background-color: #36d278;
 -webkit-transition: background 0.5s ease;
}
input[type=submit]:active {
 -webkit-transition-duration: 0s;
 background-color: #229955;
}
#signup.on {
 color: #fff;
}
.main {
 margin: 2.5rem auto 0rem;
 width: 16rem;
}
.main .extras {
 text-align: center;
 font-size: 0.8rem;
 margin-top: 1rem;
}
.main .extras a {
 text-decoration: none;
 font-weight: 300;
 color: #75e0a2;
}
.main .extras a:hover {
 color: #fff;
 text-decoration: underline;
}

• Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<section>
 <div class="main">
 <form method="POST" action="" accept-charset="UTF-8">
 <input placeholder="username" name="username" type="text" />
 <input placeholder="password" name="password" type="password" value="" />
 <div class="signup-fields">
 <input id="email" placeholder="email" name="email" type="email" value="" />
 </div>
 <input id="submit" type="submit" value="log in" />
 </form>
 <div class="extras">
 <a id="signup" href="#">sign up</a>
 </div>
 </div>
</section>

JavaScript :

<script>
 $('#signup').click(function(){
 if($(this).hasClass("on"))
 {
 $(".signup-fields").slideUp();
 $(this).removeClass('on').html("sign up");
 $('#submit').attr('value','log in');
 $('#verb').html('continue');
 }
 else
 { 
 $(".signup-fields").slideDown();
 $(this).addClass('on').html("nevermind, log in");
 $('#submit').attr('value','sign up');
 $('#verb').html('begin');
 }
});
 </script>