A Pen by Kaushalya Mandaliya.

Bakery-Login.markdown

Bakery Login

Inspired by Dribbble Shot. Special thanks to Oliver Kühn for hack to blur the form.

A Pen by Kaushalya Mandaliya on CodePen.

License.

index.html

<form action="#" id="form__">
  <div id="background__"></div>
  <div id="title__">Enter your credentials</div>
  <input type="text" name="username" id="username" placeholder="username" /> <div class="entypo-user"></div> <br />
  <input type="password" name="password" id="password" placeholder="password" /> <div class="entypo-lock"></div>  <br />
  <input type="submit" value="Login" id="submit" />
</form>  
<div class="credit"><a href="http://seebeetee.com/?utm_source=CodePen">Kaushalya Mandaliya's sHtyle</a></div>

script.js

/*
**  Image credit: http://responsibleerp.com/wordpress/wp-content/uploads/2010/03/SYSPRO-Bread1.jpg  **
**  Inspired by: http://drbl.in/japG  **
**  2013 by Kaushalya Mandaliya  **
**  seebeetee.com / @kmandalwala  **
**  Special thanks to Oliver Kühn(http://codepen.io/0x04/) for hack to blur the form. **
**  Best experience in Google Chrome...Blur not working in -moz- **
*/

style.scss

@import "compass";
$color-1: #52321a;
$color-2: #42983F;
$color-3: #58472D;


$experimental-support-for-svg: true;

[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

body {
  background: url(http://responsibleerp.com/wordpress/wp-content/uploads/2010/03/SYSPRO-Bread1.jpg) top center fixed;
  @include background-size(cover);
}

#form__ {
  width: 65%;
  height: 20em;
  max-width: 28em;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  @include border-radius(0 0 0.5em 0.5em);
  
  #background__ {
    @include background(linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(http://responsibleerp.com/wordpress/wp-content/uploads/2010/03/SYSPRO-Bread1.jpg) top center fixed);
    position: absolute;
    top: -1.25em; left: -1.25em; right: -1.25em; bottom: -1.25em;
    border: 1.25em solid rgba(0,0,0,0.7);
    z-index: -1;
    @include filter(blur(0.25em));
  }

  #title__ {
    text-transform: capitalize;
    color: white;
    text-align: center;
    padding: 0.7em 0;
    font: bold 1.5em 'Ubuntu', sans-serif;
  }

  .entypo-user {
    display: inline-block;
    margin: -4em;
    color: $color-3;
    font-size: 1.5em;
  }

  .entypo-lock {
    display: inline-block;
    margin: -3.8em;
    color: $color-3;
    font-size: 1.5em;
  }  
 
  #username, #password {
    width: 60%;
    margin: 0.3em 1.9em;
    padding: 0.2em 1.1em 0.2em 0.4em;
    outline: none;
    border: none;
    font: normal 2em'Norican', cursive;
    @include border-radius(0.2em);
    
  
    &::-webkit-input-placeholder {
      color: $color-3;
      opacity: 0.8;
      text-align: center;
    }

    &:-moz-placeholder { 
      color: $color-3;
      opacity: 0.8;
      text-align: center;
    }

    &::-moz-placeholder { 
      color: $color-3;
      opacity: 0.8;
      text-align: center;
    }

    &:-ms-input-placeholder {  
      color: $color-3;
      opacity: 0.8;
      text-align: center;
    }
  }

  #submit {
    position: relative;
    margin: 0.8em 4em 1em;
    width: 61%;
    padding: 0.4em;
    font: normal 1.3em 'Ubuntu', sans-serif;
    color: white;
    background: $color-2;
    outline: none;
    border: none;
    @include border-radius(0.2em);
    @include box-shadow(inset 0 0.05em 0.05em 0 white, 0 0.1em 0.2em #111);
    @include transition(0.1s all linear);
  
    &:active {
      margin-top: 0.9em;
    }
  }  
}

.credit {
  bottom: 1em;
  right: 1em;
  position: absolute;
  font: bold 1.5em 'Ubuntu', sans-serif;
  
  a {
    color: #fff;
    text-decoration: none;
  }
}