{"id":13773,"date":"2012-05-31T21:02:55","date_gmt":"2012-05-31T13:02:55","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=13773"},"modified":"2025-04-21T19:17:53","modified_gmt":"2025-04-21T11:17:53","slug":"create-stack-paper-effect-login-form","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/create-stack-paper-effect-login-form\/","title":{"rendered":"How to Create a Stacked-paper Effect Login Form"},"content":{"rendered":"<p><a href=\"https:\/\/www.hongkiat.com\/blog\/login-registration-form\/\">Login forms<\/a> are an essential part of any dynamic website. They provide a mechanism for users to access restricted content.<\/p>\n<p>In this tutorial, we will explore various CSS3 features such as text-shadow, box-shadow, linear gradients, and transitions to create a simple and elegant login form with a stacked-paper look.<\/p>\n<p>The image above shows a preview of the login form we will be building. Ready to dive in? Let\u2019s get started!<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css3-search-field\/\" class=\"ref-block__link\" title=\"Read More: How to Create a Beautiful CSS3 Search Box\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Create a Beautiful CSS3 Search Box<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css3-search-field.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-9687 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css3-search-field.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Create a Beautiful CSS3 Search Box<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tCSS3 is the new age of styling for web pages. It brings forward fresh and innovative tools like...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>1. Basic HTML Markup<\/h2>\n<p>The HTML markup we will be using is very simple. After the HTML5 Doctype declaration, we have the <code>&lt;head&gt;<\/code> and <code>&lt;title&gt;<\/code> tags. Within the <code>&lt;body&gt;<\/code> tag, we have a <code>&lt;section&gt;<\/code> tag with a class of \u2018stacked\u2019. This <code>&lt;section&gt;<\/code> tag defines the width of the content box and aligns it to the center of the page. We\u2019ll also use this tag\u2019s class name to target it using CSS.<\/p>\n<p>A <code>&lt;form&gt;<\/code> tag follows the <code>&lt;section&gt;<\/code> tag. The form tag does not have a valid value for the \u2018action\u2019 attribute since it is only used for demonstration purposes. Inside the form field are the declarations for the email and password labels and input fields, followed by a submit button.<\/p>\n<p>An important point to note is that we have used an input field with a type of \u2019email\u2019. This is provided by the HTML5 declaration and gracefully degrades to a regular text input field in older browsers.<\/p>\n<p>Here\u2019s the entire HTML markup:<\/p>\n<pre>\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;meta http-equiv=\"Content-type\" content=\"text\/html; charset=utf-8\"&gt;\n        &lt;title&gt;Simple Login Form&lt;\/title&gt;\n        &lt;link rel=\"stylesheet\" href=\"master.css\"&gt;\n        &lt;link href=\"http:\/\/fonts.googleapis.com\/css?family=Open+Sans:400,700,600\" rel=\"stylesheet\" type=\"text\/css\"&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;div class=\"wrap\"&gt;\n            &lt;div class=\"stacked\"&gt;\n                &lt;h2&gt;Login&lt;\/h2&gt;\n                &lt;form action=\"\" method=\"post\" id=\"login\"&gt;\n                    &lt;div class=\"field\"&gt;\n                        &lt;label for=\"email\"&gt;Email&lt;\/label&gt;\n                        &lt;input type=\"email\" name=\"email\" id=\"email\" class=\"text-input\" placeholder=\"john@doe.com\" \/&gt;\n                    &lt;\/div&gt;\n                    &lt;div class=\"field\"&gt;\n                        &lt;label for=\"password\"&gt;Password&lt;\/label&gt;\n                        &lt;input type=\"password\" name=\"password\" id=\"password\" class=\"text-input\" placeholder=\"Secret Password\" \/&gt;\n                    &lt;\/div&gt;\n                    &lt;div class=\"action clearfix\"&gt;\n                        &lt;input type=\"submit\" \/&gt;\n                    &lt;\/div&gt;\n                &lt;\/form&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n<p>And here\u2019s a preview of what we have created so far:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"153\" src=\"https:\/\/assets.hongkiat.com\/uploads\/stack-paper-login-form\/unstyled-login-form.jpg\" width=\"226\"><\/figure>\n<h2>2. Adding Basic Styles<\/h2>\n<p>Create a new CSS file called <strong>master.css<\/strong> and add a link to this file in your main HTML file. We will start our CSS file with a quick reset to ensure uniformity across different browsers.<\/p>\n<p>Let\u2019s also add a nice background image to our page. The image I have used is from <strong>SubtlePatterns<\/strong>. Feel free to browse the site to find a background image that suits your taste. We can add the background image with the following declaration.<\/p>\n<p>Note that I am using the <strong>Open Sans<\/strong> font from <a href=\"https:\/\/fonts.google.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Google Web Fonts<\/a> for the body text.<\/p>\n<pre>\n\/* --------Base Styles--------- *\/\nbody, html {\n    margin: 0;\n    padding: 0;\n}\n\nbody {\n    background: url(\"https:\/\/assets.hongkiat.com\/uploads\/stack-paper-login-form\/bg.png\") left top repeat;\n    font: 16px\/1.5 \"Open Sans\", Helvetica, Arial, sans-serif;\n}\n\ndiv.wrap {\n    width: 400px;\n    margin: 80px auto;\n}\n<\/pre>\n<h2>3. Stacked-Paper Effect<\/h2>\n<p>Now that we have the basic layout ready, let\u2019s start designing the form. To create the stacked-paper effect, we will use the <code>:after<\/code> and <code>:before<\/code> pseudo-elements. These pseudo-elements are commonly used for adding visual effects to any selector.<\/p>\n<p>The <code>:before<\/code> pseudo-element adds content before the selector\u2019s content, while the <code>:after<\/code> pseudo-element adds content after it.<\/p>\n<p>We will begin by giving the section with a class of \u2018stacked\u2019 a width of 400px and a height of 300px. We\u2019ll also give this box a background color of #f6f6f6 and a 1-pixel-thick border with the color #bbb.<\/p>\n<p>The key elements to note here are the border-radius and box-shadow declarations. We\u2019ve used \u201c-moz-\u201d and \u201c-webkit-\u201d browser prefixes to ensure compatibility with gecko and webkit-based browsers.<\/p>\n<p>The border-radius declaration is straightforward and creates rounded corners, with 3px representing the curvature. While the box-shadow declaration might look complex, let\u2019s break it down into smaller parts to understand it better.<\/p>\n<pre>\n\/*--------Border Radius and Box Shadow--------- *\/\n-webkit-border-radius: 3px;\n-moz-border-radius: 3px;\nborder-radius: 3px;\n\n-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);\n-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);\nbox-shadow: 0 0 3px rgba(0,0,0,.2);\n<\/pre>\n<p>The first two zeros indicate the x-offset and 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 four values inside the parentheses indicate the amount of red, green, blue, and opacity.<\/p>\n<pre>\n.stacked {\n    background: #f6f6f6;\n    border: 1px solid #bbb;\n    height: 300px;\n    margin: 50px auto;\n    position: relative;\n    width: 400px;\n    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);\n    -moz-box-shadow: 0 0 3px rgba(0,0,0,.2);\n    box-shadow: 0 0 3px rgba(0,0,0,.2);\n    -webkit-border-radius: 3px;\n    -moz-border-radius: 3px;\n    border-radius: 3px;\n}\n<\/pre>\n<p>Now that we have created the basic bounding box for the form, let\u2019s implement the <code>:after<\/code> and <code>:before<\/code> pseudo-elements.<\/p>\n<pre>\n.stacked:after,\n.stacked:before {\n    background: #f6f6f6;\n    border: 1px solid #aaa;\n    bottom: -8px;\n    content: '';\n    height: 250px;\n    left: 2px;\n    position: absolute;\n    width: 394px;\n    z-index: -10;\n    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);\n    -moz-box-shadow: 0 0 3px rgba(0,0,0,.2);\n    box-shadow: 0 0 3px rgba(0,0,0,.2);\n    -webkit-border-radius: 3px;\n    -moz-border-radius: 3px;\n    border-radius: 3px;\n}\n\n.stacked:before {\n    bottom: -14px;\n    left: 5px;\n    width: 388px;\n    -webkit-border-radius: 3px;\n    -moz-border-radius: 3px;\n    border-radius: 3px;\n    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);\n    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);\n    box-shadow: 0 0 15px rgba(0,0,0,0.5);\n}\n<\/pre>\n<p>The code for :after and :before pseudo-elements is almost identical to that of the bounding box discussed above. The key point to note is that these pseudo-elements are positioned absolutely relative to the bounding box.<\/p>\n<p>Each pseudo-element is progressively lowered by a few pixels to create the stacked-paper effect.<\/p>\n<h2>4. Input Fields<\/h2>\n<p>In the HTML markup, we added a class of \u2018text-input\u2019 to both the email and password fields to easily target these elements with our CSS declarations. Here\u2019s the CSS declaration applied to both input fields.<\/p>\n<pre>\nform input.text-input {\n    outline: 0;\n    display: block;\n    width: 330px;\n    padding: 8px 15px;\n    border: 1px solid gray;\n    font-size: 16px;\n    font-weight: 400;\n    -webkit-border-radius: 25px;\n    -moz-border-radius: 25px;\n    border-radius: 25px;\n    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);\n}\n<\/pre>\n<p>Again, we have used the border-radius and box-shadow declarations. For text fields, the border-radius is given a higher value to create more curvature.<\/p>\n<p>In the box-shadow declaration, we use the keyword \u2018inset\u2019 to specify that the shadow will be inside the text field. Here, the vertical offset for the shadow is 2px with an 8px blur, and the color is declared using the rgba format.<\/p>\n<p>To add interactivity to the input fields, we will modify the box-shadow property on the \u2018hover\u2019 state. The new box-shadow declaration has zero x and y offsets but has a 5px blur, with the color declared in rgba format.<\/p>\n<h2>5. Submit Button<\/h2>\n<p>The final element we need to complete is the submit button. Similar to the input field, we\u2019ll give the submit button a radius of 25px using the border-radius property. A box-shadow property with a 1px y-offset has also been added to create an \u201cinner-shadow\u201d effect.<\/p>\n<pre>\nform input[type=\"submit\"] {\n    float: right;\n    padding: 10px 20px;\n    display: block;\n    cursor: pointer;\n    font-size: 16px;\n    font-weight: 700;\n    color: #fff;\n    text-shadow: 0 1px 0 #000;\n    background-color: #0074CC;\n    border: 1px solid #05C;\n    -webkit-border-radius: 25px;\n    -moz-border-radius: 25px;\n    border-radius: 25px;\n    background-image: -moz-linear-gradient(top, #08C, #05C);\n    background-image: -ms-linear-gradient(top, #08C, #05C);\n    background-image: -webkit-linear-gradient(top, #08C, #05C);\n    background-image: linear-gradient(top, #08C, #05C);\n    -webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.5);\n    -moz-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.5);\n    box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.5);\n}\n<\/pre>\n<p>The crucial aspect here is the gradient declaration for the button. CSS3 gradients is a broad topic, and we\u2019ll only cover the basics.<\/p>\n<p>For this submit button, we\u2019re adding a linear gradient transitioning from #08C to #05C. As with other CSS3 properties we\u2019ve used, we\u2019ll add \u201c-moz\u201d, \u201c-webkit\u201d, and \u201c-ms\u201d vendor prefixes to ensure the gradient works across different browsers.<\/p>\n<h2>6. Demo and Download<\/h2>\n<p>Our login form is now complete. Check out the demo to see the final result. If you got lost at any point or couldn\u2019t follow the tutorial, don\u2019t worry \u2013 you can download the files to your desktop and experiment with the CSS code to understand how it works.<\/p>\n<p>I hope you enjoyed this tutorial. Feel free to experiment with these features and share your thoughts in the comments.<\/p>\n<div class=\"button\">\n<a href=\"https:\/\/hongkiat.github.io\/html5-datalist\/\" rel=\"nofollow noopener\" target=\"_blank\">View Demo<\/a>\n<a href=\"https:\/\/github.com\/hongkiat\/html5-datalist\/\" rel=\"nofollow noopener\" target=\"_blank\">Download Source<\/a>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Login forms are an essential part of any dynamic website. They provide a mechanism for users to access restricted content. In this tutorial, we will explore various CSS3 features such as 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&hellip;<\/p>\n","protected":false},"author":204,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[1312,506,2016,1659],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create a Stacked-paper Effect Login Form - Hongkiat<\/title>\n<meta name=\"description\" content=\"Login forms are an essential part of any dynamic website. They provide a mechanism for users to access restricted content. In this tutorial, we will\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/create-stack-paper-effect-login-form\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Stacked-paper Effect Login Form\" \/>\n<meta property=\"og:description\" content=\"Login forms are an essential part of any dynamic website. They provide a mechanism for users to access restricted content. In this tutorial, we will\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/create-stack-paper-effect-login-form\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-31T13:02:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T11:17:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/stack-paper-login-form\/unstyled-login-form.jpg\" \/>\n<meta name=\"author\" content=\"Bharani M\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bharani M\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-stack-paper-effect-login-form\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-stack-paper-effect-login-form\\\/\"},\"author\":{\"name\":\"Bharani M\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/6c4cc0d9470c96a53f074757818755cb\"},\"headline\":\"How to Create a Stacked-paper Effect Login Form\",\"datePublished\":\"2012-05-31T13:02:55+00:00\",\"dateModified\":\"2025-04-21T11:17:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-stack-paper-effect-login-form\\\/\"},\"wordCount\":942,\"commentCount\":26,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-stack-paper-effect-login-form\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/stack-paper-login-form\\\/unstyled-login-form.jpg\",\"keywords\":[\"Forms\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\",\"login\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-stack-paper-effect-login-form\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-stack-paper-effect-login-form\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-stack-paper-effect-login-form\\\/\",\"name\":\"How to Create a Stacked-paper Effect Login Form - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-stack-paper-effect-login-form\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-stack-paper-effect-login-form\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/stack-paper-login-form\\\/unstyled-login-form.jpg\",\"datePublished\":\"2012-05-31T13:02:55+00:00\",\"dateModified\":\"2025-04-21T11:17:53+00:00\",\"description\":\"Login forms are an essential part of any dynamic website. They provide a mechanism for users to access restricted content. In this tutorial, we will\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-stack-paper-effect-login-form\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-stack-paper-effect-login-form\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-stack-paper-effect-login-form\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/stack-paper-login-form\\\/unstyled-login-form.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/stack-paper-login-form\\\/unstyled-login-form.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-stack-paper-effect-login-form\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Stacked-paper Effect Login Form\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/6c4cc0d9470c96a53f074757818755cb\",\"name\":\"Bharani M\",\"description\":\"Bharani is a designer\\\/developer from New Delhi, India. He is currently working on Resumonk.com - an online resume builder that helps you create a professional and beautiful resume in minutes. Also check out his side project - Quotescube.com - your daily dose of quotes.\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/bharanim\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Stacked-paper Effect Login Form - Hongkiat","description":"Login forms are an essential part of any dynamic website. They provide a mechanism for users to access restricted content. In this tutorial, we will","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/create-stack-paper-effect-login-form\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Stacked-paper Effect Login Form","og_description":"Login forms are an essential part of any dynamic website. They provide a mechanism for users to access restricted content. In this tutorial, we will","og_url":"https:\/\/www.hongkiat.com\/blog\/create-stack-paper-effect-login-form\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-05-31T13:02:55+00:00","article_modified_time":"2025-04-21T11:17:53+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/stack-paper-login-form\/unstyled-login-form.jpg","type":"","width":"","height":""}],"author":"Bharani M","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Bharani M","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/create-stack-paper-effect-login-form\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-stack-paper-effect-login-form\/"},"author":{"name":"Bharani M","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/6c4cc0d9470c96a53f074757818755cb"},"headline":"How to Create a Stacked-paper Effect Login Form","datePublished":"2012-05-31T13:02:55+00:00","dateModified":"2025-04-21T11:17:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-stack-paper-effect-login-form\/"},"wordCount":942,"commentCount":26,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-stack-paper-effect-login-form\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/stack-paper-login-form\/unstyled-login-form.jpg","keywords":["Forms","HTML","HTML5 \/ CSS3 Tutorials","login"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/create-stack-paper-effect-login-form\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/create-stack-paper-effect-login-form\/","url":"https:\/\/www.hongkiat.com\/blog\/create-stack-paper-effect-login-form\/","name":"How to Create a Stacked-paper Effect Login Form - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-stack-paper-effect-login-form\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-stack-paper-effect-login-form\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/stack-paper-login-form\/unstyled-login-form.jpg","datePublished":"2012-05-31T13:02:55+00:00","dateModified":"2025-04-21T11:17:53+00:00","description":"Login forms are an essential part of any dynamic website. They provide a mechanism for users to access restricted content. In this tutorial, we will","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-stack-paper-effect-login-form\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/create-stack-paper-effect-login-form\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/create-stack-paper-effect-login-form\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/stack-paper-login-form\/unstyled-login-form.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/stack-paper-login-form\/unstyled-login-form.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/create-stack-paper-effect-login-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a Stacked-paper Effect Login Form"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/6c4cc0d9470c96a53f074757818755cb","name":"Bharani M","description":"Bharani is a designer\/developer from New Delhi, India. He is currently working on Resumonk.com - an online resume builder that helps you create a professional and beautiful resume in minutes. Also check out his side project - Quotescube.com - your daily dose of quotes.","sameAs":["https:\/\/www.hongkiat.com\/blog\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/bharanim\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3A9","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/13773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/204"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=13773"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/13773\/revisions"}],"predecessor-version":[{"id":73958,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/13773\/revisions\/73958"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=13773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=13773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=13773"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=13773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}