Slick login form with HTML5 & CSS3

September 19, 2011 by Catalin Rosu - 66 comments

We already know that CSS3 has the ability to create a lot of new possibilities to design and implement better web forms. Also, HTML5 has its important role when it comes about creating more usable forms, without actually needing any Javascript code.

Knowing that, check out the below preview to see the login form we’re going to create in this article:

View demo

Markup

<form id="login">
    <h1>Log In</h1>
    <fieldset id="inputs">
        <input id="username" type="text" placeholder="Username" autofocus required>   
        <input id="password" type="password" placeholder="Password" required>
    </fieldset>
    <fieldset id="actions">
        <input type="submit" id="submit" value="Log in">
        <a href="">Forgot your password?</a><a href="">Register</a>
    </fieldset>
</form>

The HTML5 stuff

New HTML5 attributes descriptions, according to latest specifications:

placeholder – A short hint (one word or a short phrase) intended to aid the user when entering data into the control represented by its element.
required – Specifies that the element is a required part of form submission.
autofocus – Specifies that the element represents a control to which a UA is meant to give focus as soon as the document is loaded.
type=”password” – Specifies that its input element is a one-line plain-text edit control for entering a password. (not HTML5 specific)

The CSS

For this article, I will not paste the whole lines here. Instead, I’ll just add the ones who help creating some cool effects.

Paper stack effect

Box-shadow will help us creating this nice effect by defining multiple shadows that actually overlap.

#login
{
    box-shadow:
          0 0 2px rgba(0, 0, 0, 0.2),  
          0 1px 1px rgba(0, 0, 0, .2),
          0 3px 0 #fff,
          0 4px 0 rgba(0, 0, 0, .2),
          0 6px 0 #fff,  
          0 7px 0 rgba(0, 0, 0, .2);
}

Stitch effect

This effect is added using pseudo-elements. Using pseudo-elements helps you avoid extra markup and this is a perfect example: keep the markup clean and let the CSS do the magic.

#login
{
    position: absolute;
    z-index: 0;
}

#login:before
{
    content: '';
    position: absolute;
    z-index: -1;
    border: 1px dashed #ccc;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    -moz-box-shadow: 0 0 0 1px #fff;
    -webkit-box-shadow: 0 0 0 1px #fff;
    box-shadow: 0 0 0 1px #fff;
}

Styles excerpt.

Subtle gradient lines

I’ve first seen this effect on Gene Locklin‘s page and I thought this is pretty cool. So, I decided to use it for highlighting the “Log in” heading. Using pseudo-elements (again) and CSS3 gradients some cool lines are added to simulate a strikeout effect.

h1
{
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
    text-transform: uppercase;
    text-align: center;
    color: #666;
    margin: 0 0 30px 0;
    letter-spacing: 4px;
    font: normal 26px/1 Verdana, Helvetica;
    position: relative;
}

h1:after, h1:before
{
    background-color: #777;
    content: "";
    height: 1px;
    position: absolute;
    top: 15px;
    width: 120px;   
}

h1:after
{ 
    background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(left, #777, #fff);
    background-image: -moz-linear-gradient(left, #777, #fff);
    background-image: -ms-linear-gradient(left, #777, #fff);
    background-image: -o-linear-gradient(left, #777, #fff);
    background-image: linear-gradient(left, #777, #fff);      
    right: 0;
}

h1:before
{
    background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(right, #777, #fff);
    background-image: -moz-linear-gradient(right, #777, #fff);
    background-image: -ms-linear-gradient(right, #777, #fff);
    background-image: -o-linear-gradient(right, #777, #fff);
    background-image: linear-gradient(right, #777, #fff);
    left: 0;
}

The final result

Using the above techniques, here’s the final result:

View demo

Conclusion

This login form looks very well also on older browsers, as you can see below:

Internet Explorer 8 screenshot.

As a future improvement, you can add also HTML5 placeholder fallback as you have seen in one of my previous articles.

If you enjoyed this article, get updates via RSS or email (it's free).

66 thoughts on “Slick login form with HTML5 & CSS3”

rick on September 19, 2011 at 17:05 said:

I liked the Gene Locklin‘s effect. Nice work Catalin, as always!
Reply ↓
nerkn on September 19, 2011 at 18:08 said:

Nice tutorial, will be saved under bookmarks.
Reply ↓
Rage Web Design on September 19, 2011 at 23:41 said:

Great article. Forms looking alot more exciting now!
Reply ↓
Micky on September 20, 2011 at 09:17 said:

Nice button
Reply ↓
Red on September 20, 2011 at 09:51 said:

Thanks guys, nice to hear you like it!
Reply ↓
- arnold morgan on April 23, 2013 at 16:50 said:
  
  HI Im new with programing and would like to make a login page with password and also button for them to create a user name if they dont have one can u send the code to my email,btw im using html5
  Reply ↓
Simon on September 20, 2011 at 16:19 said:

DUDE u are incredible.. This site is the best CSS3 site on the web
Reply ↓
- Red on September 20, 2011 at 23:54 said:
  
  :) thanks Simon, I’m glad you like my CSS3 tutorials.
  Reply ↓
Pedro Luz on September 20, 2011 at 23:16 said:

Pretty cool. nice work :)
Reply ↓
- Red on September 20, 2011 at 23:55 said:
  
  Thanks Pedro ;)
  Reply ↓
jim on September 28, 2011 at 23:49 said:

It is cool. A note: type=”password” is not html5 specific.
Reply ↓
- Red on October 3, 2011 at 09:31 said:
  
  Yep, type=”password” is not HTML5 specific. Thanks for pointing that!
  Reply ↓
jake on October 20, 2011 at 01:54 said:

That is one great form. Good job.
Reply ↓
- Red on October 20, 2011 at 09:30 said:
  
  Thanks Jake, I’m glad you like it!
  Reply ↓
  - Jake on October 20, 2011 at 18:32 said:
    
    I would love to use it, or a variation of it, on my new site. If that option is available, what would you charge to help me modify it. It would need a matching dropdown.
    Reply ↓
    - Red on October 20, 2011 at 18:42 said:
      
      Jake, you can use this or your website, with or without attribution.
      Though, a link back will be always appreciated ;)
      Reply ↓
Guilherme Ventura on October 21, 2011 at 16:39 said:

Really Cool! i loved it! so many interesting techniques here, thank you so much!
Regards!
Reply ↓
- Red on October 21, 2011 at 16:44 said:
  
  Thanks Guilherme, don’t forget to subscribe to RSS feed! :)
  Reply ↓
jonathan on November 3, 2011 at 13:36 said:

Hello I want to use your page effect in my website but I used a grid framework. Can we use this css3 style without position:absolute ? Because when I delete this I don’t have the style.
Thanks
Reply ↓
- Red on November 3, 2011 at 13:46 said:
  
  Jonathan, the position:absolute for the #login is only to center the form vertically and horizontally.
  If you don’t need that, just replace it with position:relative to avoid any problems.
  Reply ↓
  - Fuad on May 21, 2012 at 23:42 said:
    
    same here. but the problem happens with the positioning of the “dashed border”, since it is absolute ad the parent isn’t absolute, the effect no longer rounds the box. Is there a workaround for this?
    Reply ↓
    - Catalin Rosu on May 22, 2012 at 15:05 said:
      
      Add position:relative instead for the #login
      Reply ↓
      - Fuad on May 22, 2012 at 19:58 said:
        
        Doesn’t seem to work here. I made some modifications to the layout. This is what it looks now, if you don’t mind to take a look: http://cali.com.br/testes/web2.php
Marcin on November 27, 2011 at 15:08 said:

Hi,
great tutorial :)
I have one question: how to get this effect?
http://oi40.tinypic.com/sv71q9.jpg
Reply ↓
- Red on November 27, 2011 at 21:39 said:
  
  Marcin, that behavior is caused by the required HTML5 attribute. Please check above for the markup.
  Thanks for your comment.
  Reply ↓
  - Marcin on November 27, 2011 at 21:42 said:
    
    OK, thanks :)
    RedTeamDesign has already added to RSS reader :)
    Greetings from Polish;)
    Reply ↓
  - Babu on March 10, 2013 at 19:02 said:
    
    pls send me the code for loginpop page using html5 and css3 to my mail id which is static page..
    Reply ↓
Steven on December 19, 2011 at 03:40 said:

Hello:
Nice work I like it. So I have one question, You have more icons like the inputs icons?
Thank you
Reply ↓
- Red on December 19, 2011 at 13:45 said:
  
  Steven, that might be a good suggestion.
  Perhaps one of my future articles will contain some freebies like icons. Stay tuned!
  Reply ↓
  - Steven on December 19, 2011 at 15:48 said:
    
    Ok, and thanks again.
    Reply ↓
jay on January 25, 2012 at 19:28 said:

how do i change the “Please fill out this field” ? where is it defined?
Reply ↓
- Red on January 25, 2012 at 20:20 said:
  
  Jay, that message is generated by the new HTML5 required attribute. This is not customizable and it’s specific to the browser.
  As an alternative, you can always try :http://docs.jquery.com/Plugins/validation
  Reply ↓
Rahul Sonker on March 9, 2012 at 08:59 said:

It does not work in Internet Explorer 8 what should I do ? Please Suggest a Solution for this ?
Reply ↓
- Red on March 9, 2012 at 09:09 said:
  
  It works quite well on IE8, notice the above “Internet Explorer 8 screenshot”.
  Though, HTML5 new form stuff like placeholder is not supported by IE8. You can try HTML5 Cross Browser Polyfills for your projects.
  Reply ↓
  - Rahul Sonker on March 9, 2012 at 10:48 said:
    
    thnx for replying, why the placeholder is not working properly in google chrome & it is working perfectly in mozilla firefox. And the problem is that when I clck into the field the label is dissapeared from the field in mozilla perfectly but the placeholder is not working in google chrome as in mozilla firefox. tell me the solution ?
    Reply ↓
vish on March 12, 2012 at 17:18 said:

I want to use this kind of forms in asp.net 3.5. But the properties are not present like box shadow. Pls suggest me
Reply ↓
top on April 16, 2012 at 03:17 said:

thank you very match >>
amazing website
Reply ↓
expresnt on April 17, 2012 at 02:14 said:

hi Red,
How can the amendment to Words:
please fill out this field ?
thanks.
Reply ↓
Tom on April 18, 2012 at 17:01 said:

how do you run this, it gives me a different results
Reply ↓
eyesover on April 20, 2012 at 03:37 said:

thanks!
Reply ↓
yeba on April 26, 2012 at 02:03 said:

hey i really like your design
i wanted to add it to my current project and it only show the login as in the picture but the rest is messed up
the register link is too close to the forget pass link and the boxes come up bad :/
what should i do?
i don’t really have experience in this and have no time to learn html-css3 :/ cuz gotta turn my project in within 3 weeks :s
Reply ↓
- Red on April 26, 2012 at 11:25 said:
  
  Send me a link and I’ll take a look, but I also think you need to invest some time in learning basics in order to play with CSS.
  Reply ↓
yeba on April 26, 2012 at 02:04 said:

oh yea forgot to say am using visual web developer:)
Reply ↓
Cicely Durfey on April 28, 2012 at 09:48 said:

I was reading some of your blog posts on this internet site and I conceive this web site is very informative! Continue posting.
Reply ↓
abdul on May 11, 2012 at 09:18 said:

Mehn you are the bomb of bombs i love your work! Its amazing! Pls i would love you send me the full css code with any latest improvements thanks let me show some of my friends {eichieabdul@yahoo.com}
Reply ↓
qianqian on May 29, 2012 at 13:29 said:

very nice!!
Reply ↓
Stephen on June 20, 2012 at 02:10 said:

Hey Red; First of all every article you post is revolutionary and amazing! This login form is amazing and I am using it with all my web projects! I have one issue though… In IE 8 you lose some of the CSS 3 but the form is still sleek however in IE 9 which unfortunately most of my users have the form gets deformed and may make it hard for the user. Any way to fix it?
Screenshot: http://i.imgur.com/gZOXj.png
Reply ↓
- Stephen on June 20, 2012 at 02:11 said:
  
  my users have **IE 9 and** the form
  Reply ↓
- Catalin Rosu on June 22, 2012 at 13:59 said:
  
  Hey Stephen, thanks for your kind words.
  Regarding your issue, it’s kinda strange as your screenshot doesn’t look as it should be. I guess some other CSS rules apply there. Please check your CSS inheritances…
  The demo you found in this article degrade gracefully also for IE6-IE8. However, IE9 support most of CSS3 properties and that’s why this demo looks really well on IE9…
  Reply ↓
Aswin on July 22, 2012 at 09:43 said:

Can we make * instead of dots in password field, Anyone have that html code?
Reply ↓
keegan on October 5, 2012 at 15:15 said:

it dosen’t look that good for me please help
Reply ↓
ankit on November 3, 2012 at 07:54 said:

using this code page not like your demo page
Reply ↓
Cristi on November 26, 2012 at 22:12 said:

Te urmaresc de ceva timp si nu-mi vine sa cred ca abia acum am gasit acest tutorial. Apropo, mie imi place mai mult cum arata versiunea de ie8. Super culori. Am sa o folosesc cu o singura modificare si anume fading-ul de la strikeout-ul h1.
Reply ↓
Shekar on November 28, 2012 at 11:39 said:

Nice css3 and HTML5 tutorial with login example. Thanks lot for your way of exploring….
Reply ↓
Luffy on November 29, 2012 at 03:50 said:

It’s really cool. Tks for share.
Reply ↓
Ionut on December 8, 2012 at 16:14 said:

Salut. E bestial ce aveti aici. Tot respectul. Am o intrebare. Login sprite-ul e facut de voi sau as putea gasi ceva imagine mai complexa cu mai multe modele (ceva pentru email, adresa, telefon etc..)
Ms mult.
Reply ↓
Billa on December 24, 2012 at 20:37 said:

Thanks for sharing such a wonderful login box… I should fix this login box for my website.
Reply ↓
john on January 17, 2013 at 14:51 said:

Wow, it’ cool, thanks for tutorial :D
Reply ↓
Andi Liss on January 27, 2013 at 04:15 said:

. wow .. I Like it .
. that a great :D
Reply ↓
sreeni on January 29, 2013 at 12:49 said:

Great article.. Lovin it
Reply ↓
kumar on February 14, 2013 at 09:11 said:

cool……………………… Thanks for sharing
Reply ↓
julio on February 21, 2013 at 11:23 said:

good tutorial, but i can’t get the same result!!
Reply ↓
Alappin on February 24, 2013 at 10:12 said:

Hie Catalin,
Thanx for the tutorial. This helped when i was creating my first wordpress theme which I named silver blue. Just as a token of gratitude I also created the same version of the theme with a ‘red styling flavour’ or ‘ruso styling flavour’. You have a very useful blog here, keep up the good work. Here is a link to see the theme http://www.alappin.com/wordpress-themes/.
again thanx.
Reply ↓
samah on March 5, 2013 at 20:30 said:

très belle formulaire.
si c’est possible me donner le code complet de cette formulaire HTML et CSS
c’est urgent
merci :)
Reply ↓
- Catalin Rosu on March 5, 2013 at 22:49 said:
  
  Samah, as there are no external resources, you can just copy and paste the source code for the demo page.
  Good luck!
  Reply ↓
  - samah on March 5, 2013 at 22:56 said:
    
    thank you for your answer,
    j’ai fait que ce que tu dit mais j’ai obtient un formulaire pas totalement équivalente à celui-ci : exemple le bouton chez moi et trés simple et aussi les champs texte.
    j’espère que tu m’aider pour résoudre ce problème :)
    mercii
    Reply ↓