Creating A Stacked-paper Effect Login Form

Posted by Harshad

Creating A Stacked-paper Effect Login Form

Posted: 30 May 2012 12:22 AM PDT

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.

simple login form screenshot Creating A Stacked paper Effect Login Form

The image above shows a preview of the login form that we will be building. Ready to dive in? Let’s get started!

Recommended Reading: Creating A Rocking CSS3 Search Box

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:

unstyled login form Creating A Stacked paper Effect Login Form

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("http://media02.hongkiat.com/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--------- */  -webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;    /* --------Box Shadow--------- */  -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.

How to Unfollow Post Updates After Leaving Comments on Facebook

Posted: 29 May 2012 07:15 AM PDT

We’ve all been caught in this. A friend graduates, had a baby, is engaged or posted their cool birthday cake on facebook and you had not think twice to comment on it. Then the notifications of ‘X also commented on Y’ starts coming. And coming. And coming. And you can’t make the notifications stop!

unfollow post comments facebook How to Unfollow Post Updates After Leaving Comments on Facebook

Annoyed with too many notifications of posts updates on Facebook after leaving a comment? Thinking of deleting your participation from the thread or topic involved? Actually, we have another idea. There’s actually a way to escape from following comment updates on Facebook, and it doens’t need any extensions and isn’t even a trick.

Recommended Reading: 20 Facebook Tips/Tricks You Might Not Know

Unfollow Facebook Comment Updates

To unfollow comment updates or alert, assuming you have already left a comment on a post, you need to go to the post’s page to unfollow.

From your Facebook Wall or your friend’s Timeline, click on the time stamp of the post you commented earlier (the time stamp may appear as ‘date’ if it has been posted for quite sometime).
This will bring you to the post’s page, and you will see a link that says ‘Unfollow Post’. Click that link to immediately unfollow the post.

Alternatively, clicking on comment alert will also direct you to the post’s page where you can find the unfollow link.

Follow Facebook Comment Without Commenting

Now when you click on time stamp of any post on Facebook, it will direct you to the post’s page where you will see the ‘Follow Post’ link. Click on this link to follow the post’s updates without commenting, or you can also use this link to follow back the post you have unfollowed earlier.

Unfollow Follow How to Unfollow Post Updates After Leaving Comments on Facebook

Conclusion

With these simple steps, now you can forget the annoying comment updates by simply unfollowing the particular post without deleting your comment. This way, no one would know you have left the conversation. Also, you get to follow comment updates to a status without having to comment first.

Future 2 tech.

all the latest information of the cool stuffs with their details.

Archive

visits

About me

G$earch