User Login

by sebastianauer

HTML

<div id="main" role="main">
    <div class="userpanel custom">
        <h5 class="userpanel-title">User panel</h5>  
        <form action="" method="post" class="userpanel-content">
            <input type="text" name="username" value="" placeholder="username">
            <input type="password" name="password" value="" placeholder="password">
            <p class="form-actions">
                <a href="#">Remind password</a>
                <a href="#">Register</a>
            </p>
            <input type="submit" name="submit" value="Login">
        </form>
    </div>
</div>

CSS

@media screen {
  @font-face {
    font-family: 'PT Sans Caption';
    font-style: normal;
    font-weight: bold;
    src: local('PT Sans Caption Bold'), local('PTSans-CaptionBold'), url('http://themes.googleusercontent.com/static/fonts/ptsanscaption/v4/Q-gJrFokeE7JydPpxASt2w9wu1CdFtjuMIsaFqyYbWg.woff') format('woff');
  }
}

body { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }

#main {
  background-image: url(http://dl.dropbox.com/u/20586331/DiCi/1.user%20panel/bg.png);
  width: 600px;
  height: 320px;
  position: relative;
  padding-top: 80px;
}

.userpanel.custom { width: 210px; margin: 0 auto; }

.userpanel:before, 
.userpanel:after {
  content: '';
  position: absolute;
  top: -5px; right: -5px;
  bottom: -5px; left: -5px;
  border-radius: 4px;
  z-index: -1;
}
.userpanel:before { border:5px solid rgba(255, 255, 255, 0.3); }
.userpanel:after { border: 1px solid #d7d7d7; }

.userpanel {
  background-color: #fff;
  border-radius: 2px;
  position: relative;
  z-index: 1;
}

  .userpanel-title {
    color: #918e8e;
    font: 18px/37px 'PT Sans Caption';
    font-weight: bold;
    text-align: center;
    margin: 0 0 10px 0;
  }

  .userpanel-content { position: relative; margin: 0 10px; }

  .userpanel input[type=text], 
  .userpanel input[type=password] {
    -webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.4), 0 1px 8px #ddd inset;
    -moz-box-shadow: 0 1px rgba(255,255,255,0.4), 0 1px 4px #ddd inset;
    box-shadow: 0 1px rgba(255,255,255,0.4), 0 1px 4px #ddd inset;

    border: 0;
    border-top: 1px solid #dedede;
    border-left: 1px solid #dedede;
    border-radius: 2px;

    color: #828282;
    font-size: 11px;
    height: 24px;
    line-height: 24px;

    padding: 2px 4px 0 4px;
    margin-bottom: 10px;
    width: 95%;
  }

  .userpanel .form-actions a {
    background: #7bd8ee;
    background: -moz-linear-gradient(top,  #7bd8ee 0%, #00c7e9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7bd8ee),...

JavaScript

/* 
 * "Design it & Code it"
 *
 * #1. User panel
 *  
 * Author: Idered
 * http://idered.pl
 *
 */