Login form using HTML5 and CSS3

Developer
Brad Bodine
Size
3,652 Kb
Views
38,456
  1. Login form using HTML5 and CSS3 Previews
  2. Login form using HTML5 and CSS3 HTML Codes
  3. Login form using HTML5 and CSS3 CSS Codes
  4. Login form using HTML5 and CSS3 JS Codes

How do I make an login form using html5 and css3?

This is an example how to create a simple login form using HTML5 and CSS3. This form uses pseudo elements (:after and :before) to create the multi page effect. These elements are rotated using the CSS3 transform property. This form uses HTML5 to make validation and submission easy.. What is a login form using html5 and css3? How do you make a login form using html5 and css3? This script and codes were developed by Brad Bodine on 11 August 2022, Thursday.

Login form using HTML5 and CSS3 Previews
IQ Test

Login form using HTML5 and CSS3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Login form using HTML5 and CSS3</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<div class="container">	<section id="content">	<form action="">	<h1>Login Form</h1>	<div>	<input type="text" placeholder="Username" required="" id="username" />	</div>	<div>	<input type="password" placeholder="Password" required="" id="password" />	</div>	<div>	<input type="submit" value="Log in" />	<a href="#">Lost your password?</a>	<a href="#">Register</a>	</div>	</form><!-- form -->	<div class="button">	<a href="#">Download source file</a>	</div><!-- button -->	</section><!-- content -->
</div><!-- container -->
</body> <script src="js/index.js"></script>
</body>
</html>

Login form using HTML5 and CSS3 - Script Codes CSS Codes

body {	background: #DCDDDF url(http://cssdeck.com/uploads/media/items/7/7AF2Qzt.png);	color: #000;	font: 14px Arial;	margin: 0 auto;	padding: 0;	position: relative;
}
h1{ font-size:28px;}
h2{ font-size:26px;}
h3{ font-size:18px;}
h4{ font-size:16px;}
h5{ font-size:14px;}
h6{ font-size:12px;}
h1,h2,h3,h4,h5,h6{ color:#563D64;}
small{ font-size:10px;}
b, strong{ font-weight:bold;}
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
.left { float:left; }
.right { float:right; }
.alignleft { float: left; margin-right: 15px; }
.alignright { float: right; margin-left: 15px; }
.clearfix:after,
form:after {	content: ".";	display: block;	height: 0;	clear: both;	visibility: hidden;
}
.container { margin: 25px auto; position: relative; width: 900px; }
#content {	background: #f9f9f9;	background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);	background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);	background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);	background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);	background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );	-webkit-box-shadow: 0 1px 0 #fff inset;	-moz-box-shadow: 0 1px 0 #fff inset;	-ms-box-shadow: 0 1px 0 #fff inset;	-o-box-shadow: 0 1px 0 #fff inset;	box-shadow: 0 1px 0 #fff inset;	border: 1px solid #c4c6ca;	margin: 0 auto;	padding: 25px 0 0;	position: relative;	text-align: center;	text-shadow: 0 1px 0 #fff;	width: 400px;
}
#content h1 {	color: #7E7E7E;	font: bold 25px Helvetica, Arial, sans-serif;	letter-spacing: -0.05em;	line-height: 20px;	margin: 10px 0 30px;
}
#content h1:before,
#content h1:after {	content: "";	height: 1px;	position: absolute;	top: 10px;	width: 27%;
}
#content h1:after {	background: rgb(126,126,126);	background: -moz-linear-gradient(left, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);	background: -webkit-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);	background: -o-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);	background: -ms-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);	background: linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); right: 0;
}
#content h1:before {	background: rgb(126,126,126);	background: -moz-linear-gradient(right, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);	background: -webkit-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);	background: -o-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);	background: -ms-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);	background: linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); left: 0;
}
#content:after,
#content:before {	background: #f9f9f9;	background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);	background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);	background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);	background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);	background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );	border: 1px solid #c4c6ca;	content: "";	display: block;	height: 100%;	left: -1px;	position: absolute;	width: 100%;
}
#content:after {	-webkit-transform: rotate(2deg);	-moz-transform: rotate(2deg);	-ms-transform: rotate(2deg);	-o-transform: rotate(2deg);	transform: rotate(2deg);	top: 0;	z-index: -1;
}
#content:before {	-webkit-transform: rotate(-3deg);	-moz-transform: rotate(-3deg);	-ms-transform: rotate(-3deg);	-o-transform: rotate(-3deg);	transform: rotate(-3deg);	top: 0;	z-index: -2;
}
#content form { margin: 0 20px; position: relative }
#content form input[type="text"],
#content form input[type="password"] {	-webkit-border-radius: 3px;	-moz-border-radius: 3px;	-ms-border-radius: 3px;	-o-border-radius: 3px;	border-radius: 3px;	-webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;	-moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;	-ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;	-o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;	box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;	-webkit-transition: all 0.5s ease;	-moz-transition: all 0.5s ease;	-ms-transition: all 0.5s ease;	-o-transition: all 0.5s ease;	transition: all 0.5s ease;	background: #eae7e7 url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) no-repeat;	border: 1px solid #c8c8c8;	color: #777;	font: 13px Helvetica, Arial, sans-serif;	margin: 0 0 10px;	padding: 15px 10px 15px 40px;	width: 80%;
}
#content form input[type="text"]:focus,
#content form input[type="password"]:focus {	-webkit-box-shadow: 0 0 2px #ed1c24 inset;	-moz-box-shadow: 0 0 2px #ed1c24 inset;	-ms-box-shadow: 0 0 2px #ed1c24 inset;	-o-box-shadow: 0 0 2px #ed1c24 inset;	box-shadow: 0 0 2px #ed1c24 inset;	background-color: #fff;	border: 1px solid #ed1c24;	outline: none;
}
#username { background-position: 10px 10px !important }
#password { background-position: 10px -53px !important }
#content form input[type="submit"] {	background: rgb(254,231,154);	background: -moz-linear-gradient(top, rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);	background: -webkit-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);	background: -o-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);	background: -ms-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);	background: linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 );	-webkit-border-radius: 30px;	-moz-border-radius: 30px;	-ms-border-radius: 30px;	-o-border-radius: 30px;	border-radius: 30px;	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;	-ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;	-o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;	box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;	border: 1px solid #D69E31;	color: #85592e;	cursor: pointer;	float: left;	font: bold 15px Helvetica, Arial, sans-serif;	height: 35px;	margin: 20px 0 35px 15px;	position: relative;	text-shadow: 0 1px 0 rgba(255,255,255,0.5);	width: 120px;
}
#content form input[type="submit"]:hover {	background: rgb(254,193,81);	background: -moz-linear-gradient(top, rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);	background: -webkit-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);	background: -o-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);	background: -ms-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);	background: linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
}
#content form div a {	color: #004a80; float: right; font-size: 12px; margin: 30px 15px 0 0; text-decoration: underline;
}
.button {	background: rgb(247,249,250);	background: -moz-linear-gradient(top, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);	background: -webkit-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);	background: -o-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);	background: -ms-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);	background: linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0',GradientType=0 );	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;	-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;	-o-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;	box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;	-webkit-border-radius: 0 0 5px 5px;	-moz-border-radius: 0 0 5px 5px;	-o-border-radius: 0 0 5px 5px;	-ms-border-radius: 0 0 5px 5px;	border-radius: 0 0 5px 5px;	border-top: 1px solid #CFD5D9;	padding: 15px 0;
}
.button a {	background: url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0 -112px no-repeat;	color: #7E7E7E;	font-size: 17px;	padding: 2px 0 2px 40px;	text-decoration: none;	-webkit-transition: all 0.3s ease;	-moz-transition: all 0.3s ease;	-ms-transition: all 0.3s ease;	-o-transition: all 0.3s ease;	transition: all 0.3s ease;
}
.button a:hover {	background-position: 0 -135px;	color: #00aeef;
}

Login form using HTML5 and CSS3 - Script Codes JS Codes

/*
Originally found at http://cssdeck.com/labs/login-form-using-html5-and-css3
by: http://cssdeck.com/user/kamalchaneman
*/
Login form using HTML5 and CSS3 - Script Codes
Login form using HTML5 and CSS3 - Script Codes
Home Page Home
Developer Brad Bodine
Username bbodine1
Uploaded August 11, 2022
Rating 4
Size 3,652 Kb
Views 38,456
Do you need developer help for Login form using HTML5 and CSS3?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brad Bodine (bbodine1) Script Codes
Name
A Pen by Brad Bodine
CSS3 Notepad
Blockequote Cite line with text
CSS3 Checkbox Styles
Single L shape element link
Flat UI Login Form
Figure Flip Card
SASS Color Adjustments
Foundation Full Width Rows
Card flip and zoom
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!