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>

Download

Demo