Beautiful Facebook inspired Login Form Panel using Mootools glass box technique
This tutorial explains how to develop Beautiful Facebook inspired Login Form Panel using Mootools glass box technique.
The result is something like this:
Step 1: HTML page:
Create a new HTML page and copy and paste the following code inside <body> tag:
<div id=”Layer1″>
<a href=”javascript:;” onclick=”flashnotice_2()” ><img src=”../images/signin.png” width=”130″ height=”45″ border=”0″ /></a><br />
</div>
<div id=”myBox_2″ style=”display:none”>
<div class=”box”>
<h1>Sign in</h1>
<p>Do you have an account? Sign in!</p>
<form action=”” method=”post”>
<label><span>E-mail</span>
<input type=”text”name=”email” id=”email” class=”input-text”/>
</label>
<label><span>Password</span>
<input type=”password”name=”psw” id=”psw” class=”input-text”/>
</label>
</form>
<div class=”spacer”><a href=”#” onClick=”” class=”green”>Sign in</a></div>
<div class=”spacer”>
Lost your data? <a href=”#”>Get your password</a><br/>
New User? <a href=”#”>Sign up</a>
</div>
</div>
</div>
<div id=”Layer2″>
<h1>Beautiful Facebook inspired Form Panel using Mootools glassbox technique.</h1>
</div>
Step 2: CSS file
Create a new CSS file and copy and paste the following code for Facebook inspired Login Form Panel (remeber to link this file in your HTML page):
body {
font-family:Arial, Helvetica, sans-serif;
background:#CCCCCC;
}
#myBox_contentBoxBg {
filter: alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
#myBox_content,
#myBox_2_content {
padding: 20px;
}
#myBox h3,
#myBox_2 h3 {
font-size: 17px;
margin: 0px;
text-align: center
}
#Layer1 {
position:absolute;
left:445px;
top:422px;
width:60px;
height:40px;
z-index:1;
}
a{color:#0033CC;}
h1, h2, p, form{
border:0px;
margin:0px;
padding:0px;
}
input{ font-family:”Lucida Sans Unicode”, “Lucida Grande”, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
h2{ color:#666666;
margin-bottom:20px;
font-size:16px;
}
div.main{
margin:30px auto;
width:340px;
}
div.box{
border:solid 1px #c6cfe1;
background:#dfe4ee;
padding:10px;
color:#333333;
margin-bottom:20px;
}
div.box h1 {
font-size:14px;
color:#000000;
padding-bottom:4px;
}
div.box p{padding-bottom:14px;}
div.box input .input-text{
border:1px solid #3b6e22;
color:#666666;
width:180px;
}
div.box label{
display:block;
margin-bottom:10px;
color:#555555;
}
div.box label span{
display:block;
float:left;
padding-right:6px;
width:70px;
text-align:right;
font-weight:bold;
}
.spacer{margin-left:80px;
margin-bottom:10px;
font-size:11px;
color:#555555;
}
.green{
background:url(../images/green.gif);
padding:0px 6px;
border:1px solid #3b6e22;
height:24px;
line-height:24px;
color:#FFFFFF;
font-size:12px;
margin-right:10px;
display:inline-block;
text-decoration:none;
}
#Layer2 {
position:absolute;
left:277px;
top:75px;
width:441px;
height:30px;
z-index:2;
}
Step 3: simple JavaScript for glass box Effect
copy and paste the following code for Facebook inspired Login Form Panel to give glass box effect to login form panels.
<script type=”text/javascript”>
function flashnotice_2() {
var myBox_2 = new GlassBox();
myBox_2.init( ‘myBox_2’, ‘500px’, ‘300px’, ‘hidden’, ”, true, true );
myBox_2.lbo( true, 0.0 );
myBox_2.appear();
}
</script>
Step 4: link prototype.js, scriptaculous effects.js , glassbox.js file to your html pages
Download the prototype.js, scriptaculous effects.js , glassbox.js files and link this file in your HTML page inside <head> tag.
Download the scriptaculous effects.js
Save and test the result!