How to Create a Stacked-paper Effect Login Form
Login forms are an essential part of any dynamic website. They provide a mechanism for website users to access restricted content. In this tutorial, we will be exploring a lot of the CSS3 features like text-shadow, box-shadow, linear gradients and transitions to create a simple and elegant login form with a stacked-paper look.
The image above shows a preview of the login form that we will be building. Ready to dive in? Let’s get started!
How to Create a Beautiful CSS3 Search Box
CSS3 is the new age of styling for web pages. It brings forward fresh and innovative tools like... Read more
1. Basic HTML markup
The HTML markup that we will be using is very simple, after the HTML5 Doctype declaration, we have the <head> and <title> tags. Within the <body> tag, we have a <section> tag with a class of ‘stacked’. This <section> tag is used to define the width of the content box and to align it to the center of the page. We’ll also use this tag’s class name to target this tag using CSS. A <form> tag follows <section> tag. The form tag does not have a valid value for the ‘action’ attribute, since it is only used for the purpose of demonstration. Inside the form field are the declarations for the email and password labels and input field, followed by a submit button. The important point to note here is that we have used an input field with a type of ’email’. This is provided to us by the HTML5 declaration and it degrades gracefully to a regular text input field in older browsers.
Here’s the entire HTML markup:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Simple Login Form</title>
<link rel="stylesheet" href="master.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrap">
<div class="stacked">
<h2>Login</h2>
<form action="" method="post" id="login">
<div class="field">
<label for="email">Email</label>
<input type="email" name="email" id="email" class="text-input" placeholder="john@doe.com" />
</div>
<!--field-->
<div class="field">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="text-input" placeholder="Secret Password" />
</div>
<!--field-->
<div class="action clearfix">
<input type="submit" />
</div>
<!--action-->
</form>
</div>
<!--stacked-->
</div>
<!--wrap-->
</body>
</html>
And here’s a preview of what we have created so far:
2. Adding Basic Styles
Create a new css file called master.css and add a link to this file in your main HTML file. We will start our CSS file with a quick reset to obtain uniformity across different browsers. Let’s also add a nice background image to our page. The image that I have used has been taken from SubtlePatterns. Feel free to browse the site to find a background image that suits your taste. We can add the background image with the help of the following declaration. Also note that I am using the Open Sans font from Google Web Font for the body text.
/* --------Base Styles--------- */
body, html {
margin: 0;
padding: 0;
}
body {
background: url("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") left top repeat;
font: 16px/1.5 "Open Sans", Helvetica, Arial, sans-serif;
}
div.wrap {
width: 400px;
margin: 80px auto;
}
3. Stacked-Paper effect
Now that we have the basic layout up and running, lets get started with designing the form. For obtaining the stacked-paper effect, we will make use of the :after and :before pseudo-elements. These pseudo-elements are mostly used for adding visual effects to any selector.
The :before pseudo-element is used to add content before the selector’s content and the :after pseudo-element for after a selector’s content.
We will start by giving the section, with a class of ‘stacked’, a width of 400px and a height of 300px. Further, we will give this box a background color of #f6f6f6 and a 1-pixel-thick border with the color #bbb. The key things to note here are the border-radius declaration and the box-shadow declaration. Here, “-moz-” and “-webkit-” browser prefixes have been used to ensure that this works in gecko and webkit-based browsers.
The border-radius declaration is very simple and is used to create rounded corners, with 3px representing the curvature. The syntax for the box-shadow declaration might look complicated, but let us break it down into smaller chunks to understand it better.
/*--------Border Radius and Box Shadow--------- */ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); box-shadow: 0 0 3px rgba(0,0,0,.2);
The first two zero’s indicate the x-offset and the y-offset and the 3px indicates the blur. Next is the color declaration. I have used rgba values here; rgba stands for red green blue and alpha (opacity). Thus the 4 values inside the parenthesis indicate the amount of red, green, blue and its alpha (opacity).
.stacked {
background: #f6f6f6;
border: 1px solid #bbb;
height: 300px;
margin: 50px auto;
position: relative;
width: 400px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
box-shadow: 0 0 3px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Now that we have created the basic bounding box for the form, let’s get started with the :after and :before pseudo-elements.
.stacked:after,
.stacked:before {
background: #f6f6f6;
border: 1px solid #aaa;
bottom: -8px;
content: '';
height: 250px;
left: 2px;
position: absolute;
width: 394px;
z-index: -10;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
box-shadow: 0 0 3px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.stacked:before {
bottom: -14px;
left: 5px;
width: 388px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);
box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
The code for :after and :before pseudo-elements are almost exactly similar to that of the bounding box discussed above. The only important thing to note here is that these pseudo-elements are positioned absolutely with respect to the bounding box. Each of the pseudo-element is progressively lowered by a few pixels to give it a stacked-paper look.
4. Input Fields
In the HTML markup, we have added a class of ‘text-input’ to both the email field and the password field to allow us to easily target these elements with our CSS declarations. Here’s the CSS declaration that is applied to both the input fields.
form input.text-input {
outline: 0;
display: block;
width: 330px;
padding: 8px 15px;
border: 1px solid gray;
font-size: 16px;
font-weight: 400;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}
Here, again we have made use of the border-radius and box-shadow declarations. In the case of text fields, the border-radius is given a higher value to ensure more curvature. In the case of box-shadow declaration, the keyword inset has been used to specify that the shadow will be inside the text field. Here, the vertical offset for the shadow is 2px and it has a blur of 8px, the color being declared using the rgba format.
To add some interactivity to the input fields, we will change the box-shadow property for the input field on ‘hover’ state. The new box-shadow declaration has zero x and y offsets but has a 5px blur, with the color being declared in rgba format.
5. Submit Button
The final portion of this form that we have to complete is the submit button. Similar to the input field, we will give the submit button a radius of 25px using the border-radius property. A box-shadow property with a y-offset of 1px has also been added to give the button an “inner-shadow” effect.
form input[type='submit'] {
float: right;
padding: 10px 20px;
display: block;
cursor: pointer;
font-size: 16px;
font-weight: 700;
color: #fff;
text-shadow: 0 1px 0 #000;
background-color: #0074CC;
border: 1px solid #05C;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background-image: -moz-linear-gradient(top, #08C, #05C);
background-image: -ms-linear-gradient(top, #08C, #05C);
background-image: -webkit-linear-gradient(top, #08C, #05C);
background-image: linear-gradient(top, #08C, #05C);
-webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.5);
-moz-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.5);
}
The important thing to note here is the declaration for adding the gradient to this button. CSS3 gradients is a fairly large topic and we will only be scratching the surface. For this submit button, we will be adding a linear gradient going from #08C to #05C. As with all the other CSS3 properties that we have used so far, we will be adding “-moz”, “-webkit”, and “-ms” vendor prefixes to ensure that the gradient work across different browsers.
6. Demo and Download
Our login form is now complete. Check out the demo to see how the completed form looks. If you are lost at any point or couldn’t follow up with the tutorial, don’t worry, just download the files to your desktop and tinker with the existing CSS code to understand how it works.
Hope you enjoyed this tutorial. Feel free to experiment with these features and don’t forget to share your thoughts.