article:
Website: Website Template for Agriculture (PSD / HTML / CSS)
article:
Elements Design & Code: Flat Social Links Buttons (PSD / HTML / CSS)

Elements Design & Code: Blackboard Login (PSD / HTML / CSS)

Advertisement

This is a beautifully designed school blackboard graphic, complete with a wooden border, chalk, and brackets fixing it to the wall!

Great as a realistic piece of UI design, or you could follow the example and create a login form with a twist!



Screenshot

demo - blackboard login

Resource: Blackboard Login (PSD / HTML / CSS)


Implementation

* HTML
<h1>Blackboard Login</h1>
<div id="center-container">
    <div id="container">
        
        <div id="login">
            <form action="/">
                <fieldset>
                    <label for="name">Username</label>
                    <input type="text" id="name" class="form-text" placeholder="username" />
                </fieldset>
                
                <fieldset>
                    <label for="name">Password</label>
                    <input type="password" id="name" class="form-text" placeholder="password" />
                </fieldset>
                
                <fieldset class="form-actions">
                    <input type="submit" value="Submit" />
                </fieldset>
            </form>
        </div>
        
    </div>
</div>

* CSS
html,
body {
    margin:0;
    padding:0;
    background: url("../images/bg.jpg");
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}
h1 {
    font-size: 60px;
    text-align: center;
    font-family: 'JerryshandwritingRegular';
    color: #FFFFFF;
    margin-top: 50px;
}
#center-container {
    width:500px;
    height:270px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-135px 0 0 -250px;
}
#container {
    display: inline-block;
    background: transparent;
    border: 0;
    background: url("../images/blackboard-bg.png") no-repeat;
    width:500px;
    height:270px;
}
form {
    width: 390px;
    height: 150px;
    overflow: hidden;
    padding: 80px 0 0 70px;
}
form fieldset {
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;
    font-size: 20px;
    }
form fieldset.form-actions {
    margin: 0;
    padding: 0;
    border: none;
    float: right;
    text-align: right;
    }
form fieldset label {
    float: left;
    width: 130px;
    margin: 4px 0 5px 0;
    font-weight: normal;
    font-family: 'JerryshandwritingRegular';
    font-size: 25px;
    color: #e4e4e4;
    }
form fieldset input.form-text {
    display: inline-table;
    width: 200px;
    padding: 5px;
    font-size: 14px;
    border: 2px solid #e4e4e4;
    background: none;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-family: 'JerryshandwritingRegular';
    font-size: 20px;
    }
form fieldset input.form-text:focus {
    border: 1px solid #ccc;
    background: #fff;
    }
form input[type="submit"] {
    margin: 0;
    border: 0;
    text-indent: -99999px;
    background: url("../images/submit.png") no-repeat;
    width: 78px;
    height: 24px;
    }

* JavaScript - jQuery
jQuery snipped that globally enables placeholder attribute in older browsers
$(function(){
  var d = "placeholder" in document.createElement("input");
  if (!d){
    $("input[placeholder]").each(function(){
      $(this).val(element.attr("placeholder")).addClass('placeholder');
    }).bind('focus',function(){
      if ($(this).val() == element.attr('placeholder')){
        $(this).val('').removeClass('placeholder');
      }
    }).bind('blur',function(){
      if ($(this).val() == ''){
        $(this).val(element.attr("placeholder")).addClass('placeholder');
      }
    });
  }
});

Screenshot

demo - blackboard login
Resource: Blackboard Login (PSD / HTML / CSS)


Easy to alter PSD is available for download.

I hope you enjoy!



demo
download psd
download html /css
source

Advertisement
Tags: blackboard, login, blackboard, login, elements, desing, interface, layout, border, chalk, wall, ui, user interface, login form, form, wooden border, wood, psd, web, creative

Leave a Comment

No Comment

© Creative3x Ltd.