Best Login Window

Uses icons in the username and password field, uses an icon for submit button, has tab index.

by kizer

HTML

<link rel="stylesheet" href="http://f.cl.ly/items/1V0E2m2i1R0811332N1g/animate-custom.css">
<body class='sessions new'>
    <div id='app'>
      
        <div class='middle' id='welcome'>
        <header>
          <h1>
            handl
            <span>alpha</span>
          </h1>
        </header>
        <div class='well'>
          
          <form accept-charset="UTF-8" action="/users/sign_in" class="user_new" id="user_new" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="WRpmKUNAjnM785EZqSLkcMkyajsrkuC7U5Py5E6ax8E=" /></div>
            <fieldset>
            <div class='input'>
              <input id="user_email" name="user[email]" placeholder="Username" size="30" tabindex="10" type="text" value="" />
            </div>
            <div class='input'>
              <input id="user_password" name="user[password]" placeholder="Password" size="30" tabindex="20" type="password" />
            </div>
            </fieldset>
            <div class='input'>
              <input class="btn primary" id="sign_in" name="commit" type="submit" value="" />
            </div>
          </form>
        </div>
      </div>
    </div>
    
  </body>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0; padding: 0;
    border: 0; outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    /* Improves handling of kerning pairs and ligatures */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: rgba(34,34,34,1);
}




/*login-window-system */

#welcome {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 357px;
  height: 169px;
  border-radius: 3px;
  padding: 20px;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
  box-shadow: 0 2px 8px rgba(0,0,0, .6384);
  background: #f5f5f5;
  /* Below behavior prevents text selection - nice clean web app */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: default;
}

#welcome h1 {
  -webkit-margin-before: 0px;
  margin-top: -5px;
  height: 35px;
  font-size: 14px;
  font-weight: bold;
  color: #666;
  text-shadow: 0 1px 0 rgba(255,255,255, 1);
  -webkit-font-smoothing: antialiased;
  /* Below behavior prevents text selection - nice clean web app */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: default;
}

#welcome h1 span {
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(76,76,76,.589);
}

#welcome...

JavaScript

// this makes the inputs bounce when you click the form title tag

$('h1').click(function() {
   $('#welcome').toggleClass('animated shake');
    //was addClass but I changed it to toggleClass to see if i could make it go on again
});