Membuat Form Login, Pendaftaran dan Lupa Password Dengan Bumbu Animasi jQuery diracik dengan CSS3 dan HTML5

Membuat Form Login, Pendaftaran dan Lupa Password Dengan Bumbu Animasi jQuery diracik dengan CSS3 dan HTML5 kali ini saya sedang coba-coba, dan saya rasa sendiri hasil pada tutorial ini belum lah baik, jadi masih perlu penambahan dan perbaikan namun semoga tutorial ini bisa membantu rekan-rekan yang sedang coba-coba juga : pada markup dasarnya saya meramu seperti berikut : Daftar Nama Depan: Terjadi Ke Erroran Nama Belakang: Terjadi Ke Erroran Weblog/Website: Terjadi Ke Erroran Username: Terjadi Ke Erroran Email: Terjadi Ke Erroran Password: Terjadi Ke Erroran

Kirimi Saya Update Terbaru Bila anda sudah mempunyai akun? masuk dari sini Masuk Username: Terjadi Ke Erroran Password: Lupa dengan Password? Terjadi Ke Erroran Biarkan Tetap Masuk Belum Mempunyai Akun? Daftar Disini Lupa Password Masukan Email: Terjadi Ke Erroran Sudah Menjadi Anggota? Masuk Dari Sini Belum Mempunyai Akun?

Daftar Disini

kemudian untuk CSS saya meramu seperti berikut : *{ margin:0; padding:0; } body{ font-family:"Trebuchet MS", "Myriad Pro", Arial, sans-serif; font-size:14px; background:#51BD83; color:#121212; text-shadow:1px 1px 1px #E3DDDD; overflow-y:scroll; } a{ color:#777; } a:hover{ color:#222; } p{ padding:5px 0px; } .wrapper{ width:960px; margin:20px auto; min-height:550px; } .box{ width:49%; } .left{ float:left; } .right{ float:right;

} .clear{ clear:both; } a.back{ color:#777; position:fixed; top:5px; right:10px; text-decoration:none; } /* Form Style */ .form_wrapper{ background:#3AA76D; border:1px solid #43775B; margin:0 auto; width:350px; font-size:16px; -moz-box-shadow:1px 1px 7px #05AB52; -webkit-box-shadow:1px 1px 7px #05AB52; box-shadow:1px 1px 7px #05AB52; } .form_wrapper h3{ padding:20px 30px 20px 30px; background-color:#076E5C; color:#fff; font-size:25px; border-bottom:1px solid #ddd; } .form_wrapper form{ display:none; background:#81D0B6; } .form_wrapper .column{ width:47%; float:left; } form.active{ display:block; } form.masuk{ width:350px; } form.daftar{ width:550px; }

form.lupa_katakunci{ width:350px; } .form_wrapper a{ text-decoration:none; color:#777; font-size:12px; } .form_wrapper a:hover{ color:#000; } .form_wrapper label{ display:block; padding:10px 30px 0px 30px; margin:10px 0px 0px 0px; } .form_wrapper input[type=text], .form_wrapper input[type=password]{ border: solid 1px #E5E5E5; background: #FFFFFF; margin: 5px 30px 0px 30px; padding: 9px; display:block; font-size:16px; width:76%; background: -webkit-gradient( linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF) ); background: -moz-linear-gradient( top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px ); -moz-box-shadow: 0px 0px 8px #f0f0f0; -webkit-box-shadow: 0px 0px 8px #f0f0f0; box-shadow: 0px 0px 8px #f0f0f0; } .form_wrapper input[type=text]:focus, .form_wrapper input[type=password]:focus{ background:#BFF7F3;

} .form_wrapper .bottom{ background-color:#076E5C; border-top:1px solid #076E5C; margin-top:20px; clear:both; color:#fff; text-shadow:1px 1px 1px #000; } .form_wrapper .bottom a{ display:block; clear:both; padding:10px 30px; text-align:right; color:#FEFDFC; text-shadow:1px 1px 1px #000; } .form_wrapper a.forgot{ float:right; font-style:italic; line-height:24px; color:#656564; text-shadow:1px 1px 1px #fff; } .form_wrapper a.forgot:hover{ color:#000; } .form_wrapper div.remember{ float:left; width:140px; margin:20px 0px 20px 30px; font-size:11px; } .form_wrapper div.remember input{ float:left; margin:2px 5px 0px 0px; } .form_wrapper span.error{ visibility:hidden; color:red; font-size:11px; font-style:italic; display:block; margin:4px 30px; } .form_wrapper input[type=submit] {

background: #e3e3e3; border: 1px solid #ccc; color: #333; font-family: "Trebuchet MS", "Myriad Pro", sans-serif; font-size: 14px; font-weight: bold; padding: 8px 0 9px; text-align: center; width: 150px; cursor:pointer; float:right; margin:15px 20px 10px 10px; text-shadow: 0px 1px 0px #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0px 0px 2px #fff inset; -webkit-box-shadow: 0px 0px 2px #fff inset; box-shadow: 0px 0px 2px #fff inset; } .form_wrapper input[type=submit]:hover { background: #d9d9d9; -moz-box-shadow: 0px 0px 2px #eaeaea inset; -webkit-box-shadow: 0px 0px 2px #eaeaea inset; box-shadow: 0px 0px 2px #eaeaea inset; color: #222; } dan untuk JavaScriptnya $(function() { //the form wrapper (includes all forms) var $form_wrapper = $('#form_wrapper'), //the current form is the one with class active $currentForm = $form_wrapper.children('form.active'), //the change form links $linkform = $form_wrapper.find('.linkform'); //get width and height of each form and store them for later $form_wrapper.children('form').each(function(i){ var $theForm = $(this); //solve the inline display none problem when using fadeIn fadeOut

if(!$theForm.hasClass('active')) $theForm.hide(); $theForm.data({ width : $theForm.width(), height : $theForm.height() }); }); //set width and height of wrapper (same of current form) setWrapperWidth(); /* clicking a link (change form event) in the form makes the current form hide. The wrapper animates its width and height to the width and height of the new current form. After the animation, the new form is shown */ $linkform.bind('click',function(e){ var $link = $(this); var target = $link.attr('rel'); $currentForm.fadeOut(400,function(){ //remove class active from current form $currentForm.removeClass('active'); //new current form $currentForm= $form_wrapper.children('form.'+target); //animate the wrapper $form_wrapper.stop() .animate({ width : $currentForm.data('width') + 'px', height : $currentForm.data('height') + 'px' },500,function(){ //new form gets class active $currentForm.addClass('active'); //show the new form $currentForm.fadeIn(400); }); }); e.preventDefault(); }); function setWrapperWidth(){ $form_wrapper.css({ width : $currentForm.data('width') + 'px', height : $currentForm.data('height') + 'px' });

} /* for the demo we disabled the submit buttons if you submit the form, you need to check the which form was submited, and give the class active to the form you want to show */ $form_wrapper.find('input[type="submit"]') .click(function(e){ e.preventDefault(); }); });

Untuk File Lengkapnya silahkan Download File projectnya disini Dengan hasil di Google Chrome dan Opera sebagai berikut : halaman awalanmasuk.html

halaman lupapassword.html

halaman daftar.html

tampilan Opera,

Untuk File Lengkapnya silahkan Download File projectnya disini Selamat Mencoba dan Berkreasi hasil ini dasari dari ide Mary Lou (Manoela Ilic)