Beautiful Facebook inspired Login Form Panel using Mootools glass box technique

By abhi Last updated Jun 10, 2020

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.

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.