By popular request today we are going to take Adrian's wonderful Clean Login Box Tutorial made in Adobe Photoshop and translate it into a functional HTML/CSS website. Now since this is only a tutorial we will not be covering how to make it a fully functional login. This will be a working mock up to display different CSS techniques. The functionality may be covered down the road with a CMS or PHP tutorial.

You can use pretty much and client for coding this that you want. I myself am going to be using Zend Studio for Eclipse, although this does not mean you have to be. Use any editor you can comfortable with, hell you could even use notepad (duh).

 

This tutorial is a continuation of this tutorial in which you learn how to design a clean login box.

Click here to view the login box in action before we start! Test out the rollovers, etc. (This is the final outcome)

 

Step 1: Review and Plan

This is perhaps the most important step. In this step we determine how we want to approach coding the project. Without proper planning we might end up re coding large sections of the site. This step requires plenty of time thought and experience. In this case however it is fairly straight forward.

 

 

Step 2: Cutting the design

We now cut the image down into smaller easy to work with images or "cuts". These are the basis for how the website will be coded via CSS and HTML. This step is heavily based on Step 1 above, if we have made a mistake or overlooked something we will need to revisit Step 1. Sometimes in extreme cases we will not figure out a proper cut until later on during coding.

Below are the cuts we will be using in this tutorial:

 

 

Step 3: Set up your environment

In this case we have a simple environment. All we need are login.htm, login.css and an images folder.

See example below:

 

 

Step 4: Coding

Coding is always the most rewarding and frustrating part of any project. Normally for programming I like having Zend Studio running along with Firefox and the source folder open. For the reset of this tutorial we will go by the different sections of code.

 

 

Formatting Links and Text:

In this case we will apply the formats to the entire project by using the CSS body tag. We are going to use "Helvetica, Arial, sans-serif" and a font size of 14 pixels. We could have done this in each section but since its global I will apply it to the entire site/demo. With our links we are just using white with no underline and highlighting them a lighter blow.

Here is the CSS to do this:

body{
font-family: Helvetica,Arial,sans-serif;
margin: 0px 0px 0px 0px;
font-size: 14px;
}
a:link, a:visited{
color:#ffffff;
text-decoration:none;
}
a:hover{
color:#95ddf9;
}

On to actually putting visible material onto the site!

 

 

The Background:

In this example the main portion of the Login Box is the background with parts on top of it. To begin open up the login.htm file and add the following code:

I have named this div "wrapper" since it will wrap around 99% of the HTML. You can call anything you wish of course without spaces. This name is important as it will relate to the class name in login.css.

Now open up login.css we need to add the following block of code to make our background appear:

div.wrapper{
background-image:url(images/bg.gif); /* our wrapper bg image */
background-repeat:no-repeat; /*we dont want this image to repeat ever! */
width:348px; /*width of the image */
height:384px; /* height of image */
margin-left:4px; /*margin from left side of screen */
padding-top:75px; /* used to position rest of content below ribbon */
}

In this cas we required bg.gif as our main background in the demo. We don't want it to repeat and have set the size and width to be the complete size of the image. The reason for the margin on the left is to account for the light blue banner which will be added in the next step.

You should now have the following:

 

 

The Ribbon:

We will be floating the one piece ribbon overtop of our background div. Floating allows us to stack images, and other objects on top of each other. The following is the HTML code for the ribbon:

<div class="ribbon">Login to your account</div>
<div class="wrapper">......

Note this is placed above the "wrapper" div. I have also added in the text which is displayed in the template.

Here is the CSS which will move the ribbon to the correct position and and force the font to be white and bold. Padding was used to position the text within the div to where it belongs.

div.ribbon{
background-image:url(images/ribbon.png); /* our ribbon image */
background-repeat:no-repeat; /* no repeating of image */
width:358px; /* width of image */
height:45px; /* height of image */
float:left; /* float this image to the left */
margin-top:25px; /* our margin from the top of the background */
padding-left:25px; /* text padding left */
padding-top:5px; /* text padding above text */
color:#ffffff; /* text color */
font-weight:bold; /*text weight */
}

You should now have the following:

 

 

The Logo:

This section is fairly simple. In the login.htm file we need to add the following line of code just underneath our "wrapper" div:

<div class="wrapper">
<div class="logo"></div>

In the login.css file we need to now add the following block of code:

div.logo{
background:url(images/logo.png) no-repeat; /* combined background attribute */
width:330px;
height:115px;
}

I have combined the background attributes into one line for simplification. This is just another way of saying"background-image" and "background-repeat".

You should now have the following:

 

 

The Login Block:

I have broken the design into two main areas the "Login Block" and the "Bottom Block". This was done for simplicity of code and to group the items together. Here is the code with an explanation below:

<div class="loginwrapper">
<span class="usertext">Username:</span><br>
<input class="textbox" type="text" size="25"><br>
<span class="usertext">Password:</span><br>
<input class="textbox" type="password" size="25">
<img src="http://www.blogfullbliss.com/images/lock.png" alt="Lock Image"><br>
</div>

I have encased the entire block into a single div called "loginwrapper". To keep the text formatted the same I have put it into a span tag called "usertext". I could have also used a label, regardless both are fine in this case. As you can see I have also added a textfield and a password field both with the class "usertext" so they will be formatted the same. Since I wasn't sure what Adrian had in mind for the the lock picture I have just added it as a simple image after the password field.

Below are each of the three CSS classes with descriptions:

div.loginwrapper{
margin-left:40px;
}

In this class all we needed to do was set the font color and the weight to match the design.

input.textbox{
background:url(images/text_field.png) 0px -25px;
width:264px;
height:20px;
border:0px;
padding-top:5px;
padding-left:4px;
}
input.textbox:hover{
background:url(images/text_field.png) 0px 0px;
border:0px;
}

With input fields there are different states based on mouse position and activity. In this case we are concerned about the default when there is no mouse and hover (when the mouse is over the box). In both cases I have removed the border from the box and set a finite height and width. To make the text inside the box line up I have applied padding to the default inputbox only as the hover class will inherit the attributes. You will again notice the single background tag. In this case we are using CSS sprites to provide our background images.

CSS sprites is a simple way of using a single image and background offsets to load multiple classes and portions of websites. It allows for less calls to the server by web browsers and gives a dramatic increase in speed. The sprite we used for the background looks like this:

We are almost done! You should now have the following:

 

 

The Bottom:

As with the login area I have also broken this area into another wrapped "block". Here is the code:

<div class="bottomwrapper">
<input type="button" class="button">
<a href="#">Forgot my password.</a><br>
<a href="#">Register a new account.</a>
</div>

As you can see I have set the wrapping div to be called "bottomwrapper" and have added a button. This button I have made a member of class “button”. The links themselves are nothing special as they just link to nothing.

Here is the CSS for this section with comments:

div.bottomwrapper{
margin-left:40px;
margin-top:50px;
}

As with the above block I have moved it over 40 pixels from the outer wrapper edge and also moved it 50 pixels down from the Login Block.

input.button{
background:url(images/login_btn.png) 0px 0px;
width:92px;
height:31px;
border:0px;
float:right;
margin-right:20px;
margin-top:5px;

}
input.button:hover{
background:url(images/login_btn.png) 0px -31px;
}
input.button:active{
background:url(images/login_btn.png) 0px -62px;
}

Like the textboxes above the button also follows the same rules. In this case we are using the three states default, hover and active. Active occurs when the button is clicked. In this case we are also using CSS sprites to display the background which gives the button the impression it is an actual button. I have also floated the button to the right for alignment purposes and moved it way from the right side of the background by 20 pixels and moved it down about 5 pixels for alignment purposes.

You should now have the following:

Congratulations you have completed the coding! Notice all the highlights and functionality!

Click here to view the login box in action!

Click here to download all the files used for this coding tutorial

If you have any questions/comments or need some help please post them in the comments below!

 

 

 

About the Author

Sean Habing is a web developer, project coordinator and general IT geek (B. Sc. Comp Sci, A+ Certified, Business Analyst Certificate). Sean currently works as a Client Support Analyst for a Canadian software company. He also runs his own company Oncall Software. It is his goal to inform people about technology while providing industry insight into common issues and problems. He also likes muscle cars.

 

Subscribe to our RSS Feed! Follow Sean on Twitter!