XtGem Forum catalog

ChiaSeIT.Mobie.In

Tạo Login Form giống WordPress Admin với CSS3 và jQuery

Nếu các bạn đang hoặc đã dùng WordPress thì có lẽ đã quá quen thuộc với form login khi đăng nhập vào trang Admin. Khi chúng ta nhập sai username hoặc password thì nó sẽ thông báo lỗi đăng nhập cùng với hiệu ứng rung chuyển form. Hôm nay ChiaseIT.Mobie.In sẽ bày cho cho các bạn cách làm ra hiệu ứng tương tự như vậy cho chính website hay blog mà các bạn đang sở hữu.



Đầu tiên các bạn chèn đoạn khai báo sau vào bên trong thẻ <head>

<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js "> </script>
<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js "> </script>


index.php
Kế tiếp chúng ta sẽ chèn form login dùng để người dùng đăng nhập

<form method="post" action="index.php">
<p>
<label for="username">Username<br />
<input type="text" id="username" name="username" class="input" value="<?php echo (isset($_POST['username']) ? $_POST['username'] : '') ?>" size="20" tabindex="10" /></label>
</p>

<p>
<label for="password">Password<br />
<input type="password" id="password" name="password" class="input" value="<?php echo (isset($_POST['password']) ? $_POST['password'] : '') ?>" size="20" tabindex="20" /></label>
</p>

<p class="submit">
<input type="submit" name="submit" id="submit" class="submit-button" value="Log In" tabindex="100" />
<input type="hidden" name="task" value="login" />
</p>

</form>


PHP
Sau đó các bạn copy toàn bộ đoạn php bên dưới và đặt nó bên trên form đăng nhập, đoạn php này có tác dụng là kiểm tra thông tin nhập của người dùng và nếu dữ liệu nhập vào không trùng khớp thì hiệu ứng ” rung chuyển ” sẽ xuất hiện.

$errs = '';
$success = '';
if(isset($_POST['task']) && $_POST['task']=='login')
{
$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);

if( $username == "" || $password == "") {
$errs = 'Fields are required.';
//add jquery effect to shake our login form ?>
<script type="text/javascript">
$(document).ready(function() {
$(".login form").effect("shake", { times: 3 }, 64);
});
</script>
<?php
} else {
if( $username == "demo" && $password == "demo" ) {
$_SESSION['username'] = "Demo";
$_SESSION['password'] = "demo";
$_SESSION['stat'] = 1; //set status to 1
$success = 'You\re successfully login.';
} else {
$errs = 'Invalid Username or Password.';

//add jquery effect to shake our login form ?>
<script type="text/javascript">
$(document).ready(function() {
$(".login form").effect("shake", { times: 3 }, 64);
});
</script>
<?php
}

}
}

//add a condition if stat variable is already set
if(isset($_SESSION['stat']) == 1) : ?>
<form method="post" action="index.php"><fieldset>
<p><?php echo 'Welcome <strong>' . $_SESSION['username'] .'</strong>'; ?></p>
<input type="submit" class="submit-button" value="Logout" />
<input type="hidden" name="task" value="logout" />
</fieldset></form>
<?php else : ?>
<div class="message">
<!-- this display error and success message -->
<?php if($errs != "") { echo '<p class="error">'.$errs.'</p>'; } ?>
<?php if($success != "") { echo '<p class="success">'.$success.'</p>'; } ?>
<!-- this get the query log variable if is set or not. -->
<?php if(isset($_GET['log']) != "") { echo '<p class="success">You are now logged out.</p>'; } ?>
</div>


CSS
Và để form đăng nhập của chúng ta trông giống như bên WordPress Admin, các bạn sử dụng thêm đoạn css sau :

.login * {
margin: 0;
padding: 0;
}
.title{
font: italic 26px Georgia;
margin-bottom: 20px;
margin: auto;
}

.login{
width: 320px;
padding: 20px 0 0;
margin: auto;
}
.login label {
color: #777;
font-size: 14px;
cursor: pointer;
}

.login form {
margin-left: 8px;
padding: 24px 20px 46px;
font-weight: normal;
background: white;
border: 1px solid #E5E5E5;

/* add login box shadow */
-moz-box-shadow: rgba(200,200,200,0.7) 0 4px 10px -1px; /*for Mozilla*/
-webkit-box-shadow: rgba(200,200,200,0.7) 0 4px 10px -1px; /*for Chrome and Safari*/
box-shadow: rgba(200,200,200,0.7) 0 4px 10px -1px;
}

.login form .input {
font-weight: 200;
font-size: 24px;
line-height: 1;
width: 100%;
padding: 3px;
margin-top: 2px;
margin-right: 6px;
margin-bottom: 16px;
border: 1px solid #E5E5E5;
background: #FBFBFB;
outline: none;

/* add input box a inset shadow */
-moz-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2); /*for Mozilla*/
-webkit-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2); /*for Chrome and Safari*/
box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
}
input.submit-button {
float :right;
border :1pxsolid#298CBA;
font-weight :bold;
color :white;
background :#21759B;
text-shadow : rgba(0,0,0,0.3)0-1px0;
padding :3px10px;
cursor :pointer;
/* add submit button a rounded corner */
-o-border-radius: 10em; /*for opera*/
-khtml-border- radius:10em;
-webkit-border- radius:10em;
border-radius: 10em;
/* add background gradient effet */
/*for Chrome and Safari*/
background : -webkit-gradient(linear,lefttop,leftbottom, from(#298CBA), to(#217096));
/*for Mozilla*/
background : -moz-linear-gradient(top, #298CBA, #217096);
/*for IE*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#298CBA', endColorstr='#217096');
}
input.submit- button:hover {border:1px solid #000; }


Mình mong là qua bài viết này, các bạn sẽ học thêm được một chiêu mới và áp dụng cho chính website hay blog của mình.

Bình luận
Từ Khóa
Tạo Login Form giống WordPress Admin với CSS3 và jQuery , Nếu, các, bạn, đang, hoặc, đã, dùng, WordPress, thì, có, lẽ, đã, quá, quen, thuộ , Tìm hiểu Tạo Login Form giống WordPress Admin với CSS3 và jQuery làm theo và học hỏi , Bài viết Hot Tạo Login Form giống WordPress Admin với CSS3 và jQuery ,
Cùng Chuyên Mục
Tạo hiệu ứng loading 7 sắc cầu vòng với CSS3
Tạo modal window với HTML5 và CSS3
Thiết kế mẫu đồng hồ đếm ngược cực ấn tượng với CSS3
Tạo Tooltip bằng CSS3
Tạo hiệu ứng cầu vòng tuyệt đẹp cho văn bản bằng CSS3
Hướng dẫn làm Form Login style Facebook đẹp
Share Hiệu ứng Preload với CSS3 Đẹp đầy màu sắc cực ảo
CSS3 Hiệu Ứng Loading Đẹp Windows 8 cho mọi Wap/Web
Làm thẻ Tiêu đề tự đổi màu với CSS
Tạo hiệu ứng đèn nhấp nháy với Notepad , CSS, JavaScript
Chia sẻ coding miễn phí © 2017
Thiết kế: Mạnh Tuân

1.3% sitemap.xml robots.txt U-ONC-STAT