|
Copied To Clipboard!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>CSS3 Animated Login And Registration Form With HTML5 Validation</title>
<style>
/* CSS3 Animated Login And Registration Form With HTML5 Validation */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
/* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
/* == Created by: Md Ashraf Malik : https://developer.mozilla.org/en-US/profiles/MdAshrafMalik : Creative Commons License == */
* {margin:0;padding:0;}
.h2 {color:white;margin-left:10px;height:28px;font-family: 'Lobster Two', cursive;padding:3px 5px;width:332px;border:solid 1px #06F;text-align:center;border-bottom:3px solid #06f;background:#06F;position:relative;}
.h2:before {height:20px;width:20px;position:absolute;content:'';background:#06F;left:46%;top:-10px;-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);}
.h2:after {position:absolute;content:'Login Form';height:auto;width:100%;left:0;text-align:center;}
.in {padding:8px 7px;border:solid 1px #999999;width:200px;outline:none;margin-top:15px;margin-left:59px;}
.button {background:#06F;padding:8px 7px;margin-left:59px;margin-top:15px;border:none;margin-bottom:15px;font-family:Tahoma, Geneva, sans-serif;width:217px;cursor:pointer;border: solid 1px #06F;font-size:16px;color:white;}
.in:focus:invalid {border-color:#06F;}
.log,.sig {width:340px;border:solid 2px #06F;height:auto;border-top:none;margin-left:10px;}
/* labels */
#ul li {float:left;list-style:none;}
#ul li a {text-decoration:none;background:#930;color:white;margin-left:55px;padding:10px 13px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
#login,#signup {display:none;}
#ul li a label {padding:8px 15px;cursor:pointer;}
#login:checked ~ ul li a.login {background:#06f;}
#login:checked ~ .sig {height:0px;overflow:hidden;border:none;transition:height 2s;}
#signup:checked ~ .log {height:0px;overflow:hidden;}
#signup:checked ~ .sig {height:auto;}
#signup:checked ~ ul li a.signup {background:#06f;}
#signup:checked ~ .h2:after {content:'Registration Form';}
.reg {height:auto;width:30%;margin-left:35%;margin-top:10%;}
/* not part of the code below */
.notes{font-family:arial, verdana, tahoma;color:#000;text-align:center;}
</style>
<link href="http://fonts.googleapis.com/css?family=Lobster+Two:400,400italic,700,700italic" rel="stylesheet" type="text/css">
</head>
<body>
<div style="text-align:center;font-family:verdana,arial;">CSS3 Animated Login And Registration Form With HTML5 Validation</div>
<div class="reg">
<input type="radio" checked id="login" name="log"/> <input type="radio" id="signup" name="log" />
<ul id="ul">
<li><a href="#login" class="login"><label for="login">Login</label></a></li>
<li><a href="#signup" class="signup"><label for="signup">Signup</label></a></li>
</ul>
<br /><br />
<h2 class="h2"></h2>
<form action="#" class="log">
<input type="email" placeholder="Your Email" required class="in"/><br>
<input type="password" placeholder="Your Password" required class="in"/><br>
<input type="submit" value="LogIn" class="button" />
</form>
<form action="#" class="sig">
<input type="text" placeholder="Your Name" required class="in" /><br>
<input type="tel" placeholder="Choose Username" required class="in" /><br>
<input type="email" placeholder="Your Email" required class="in"/><br>
<input type="password" placeholder="Your Password" required class="in"/><br>
<input type="submit" value="SignUp" class="button" />
</form>
</div>
<br /><br />
<div class="notes">Click the buttons above to preview the effect.</div>
<br /><br />
<div class="notes">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_252.html">CSS3 Animated Login And Registration Form With HTML5 Validation Code Snippet</a> page. ]
</div>
</body>
</html>
|