Login Widget



Ένα login Widget για το blog η το site σας!

Αντιγραφή τον παρακάτω κώδικα:



<style>
@charset "utf-8";
/* CSS Document */
/* ---------- ERIC MEYER'S RESET CSS ---------- */
/*----------http://foulscode.blogspot.gr--------*/
@import url(http://meyerweb.com/eric/tools/css/reset/reset.css);
/* ---------- GENERAL ---------- */
body {
background-color: #eaeaea;
color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
/* ---------- LOGIN-FORM ---------- */
#login-form {
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px; margin: 50px auto;
width: 300px;
}
#login-form h1 {
background-color: #282830;
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
color: #fff;
font-size: 14px;
padding: 20px;
text-align: center;
text-transform: uppercase;
}
#login-form fieldset {
border: none;
padding: 20px;
position: relative;
}
#login-form fieldset:before {
background-color: #fff;
content: "";
display: block;
height: 8px;
left: 146px;
position: absolute;
top: -4px;
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 8px;
z-index: 1; }
#login-form fieldset form {
overflow: hidden;
width: 260px;
}
#login-form fieldset form input {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
outline: none;
-webkit-appearance:none;
}
#login-form fieldset form input[type="email"] {
border: 1px solid #dcdcdc;
border-radius: 3px 3px 0px 0px;
-moz-border-radius: 3px 3px 0px 0px;
-webkit-border-radius: 3px 3px 0px 0px;
padding: 12px 10px;
width: 238px;
-webkit-appearance:none;
}
#login-form fieldset form input[type="password"] {
border: 1px solid #dcdcdc;
border-top: none;
border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
padding: 12px 10px;
width: 238px;
-webkit-appearance:none;
}
#login-form fieldset form input[type="submit"] {
background-color: #1dabb8;
border: none;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
color: #fff;
cursor: pointer;
float: right;
font-weight: bold;
margin-top: 20px;
padding: 12px 20px;
-webkit-appearance:none;
}
#login-form fieldset form input[type="submit"]:hover {
background-color: #198d98;
}
#login-form fieldset form span:before {
background-color: #e5e5e5;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
content: "?";
display: inline-block;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: center;
width: 20px;
}
#login-form fieldset form span {
font-size: 12px;
float: left;
margin-top: 32px;
}
#login-form fieldset form span a{
color: #999999;
text-decoration: none; }
#login-form fieldset form span a:hover {
color: #1dabb8;
}
</style>
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Social Navigation</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
    <div id="login-form">
        <h1>Login</h1>
        <fieldset>
            <form action="javascript:void(0);" method="get">
                <input type="email" required value="Email" onBlur="if(this.value=='')this.value='Email'" onFocus="if(this.value=='Email')this.value='' "> <!-- JS because of IE support; better: placeholder="Email" -->
                <input type="password" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' "> <!-- JS because of IE support; better: placeholder="Password" -->
                <span><a href="#">Forgot Password</a>?</span><input type="submit" value="Login">
            </form>
        </fieldset>
    </div> <!-- end login-form -->
</body>
</html>



DEMO

Αποθήκευση και αυτό ήταν!

Σχόλια