After several days of hibernation, here is a tutorial on how to build a simple xHTML login page with CSS3 effects. The page that will be designed in the tutorial was inspired by the chromium style login page. The tutorial is written and dedicated for those who have some basic experience of writing CSS and xHTML before. Therefore, the basic explanation will be skipped.
Let start with building the basic html outline.
<form> <h1>Chromium OS</h1> <label>Username :</label> <input name="username" type="text" /> <label>Password :</label> <input name="password" type="password" /> <input class="submit" name="submit" type="submit" value="Submit" /> </form>
The code above will produce the following output when it is saved and accessed via any Internet browser. It is recommend to try preview the page in Google Chrome since other web browser doesn’t support CSS3 100%.
The CSS Styling.
Now, lets write CSS styling for the elements in the html file.
/*Page Background*/
body{
background-color:#5d8ada;
margin:auto 0;
font-family:Arial, Helvetica, sans-serif;
color:white;
}
/*To Centralize Form On The Page*/
form{
width:300px;
margin:auto;
}
The CSS code above has 2 main elements; body and form. In the body, the color of the background, font family, font color and the margin is declared. While in the form, the width is mentioned and also the margin. The margin is used to centralize the form in the page. Once the CSS code above added, the page should produce output similar to the screen shot below.
/* Header Styling*/
h1{
font-size:40px;
margin-bottom:15px;
/*Text Shadow Effects For Header*/
text-shadow:#436ec9 4px 4px 5px;
}
/* Label Styling */
label{
color:#a7bde8;
}
The code above is for the styling of the header “Chromium OS” and the labels. The header has been added with the text shadow effect.
The last section for the CSS styling is included below. This is where we implement some of the CSS3 effects. The shadow for the input box is added together with the hover effect. The shadow in the background of the input box will glow as you moves the mouse on top of it. Similar styling also added to the submit button. The submit button will change the background color on hover. The duration of the transition for the hover effect is also set within the style sheet.
input{
width: 230px;
padding: 6px;
margin-bottom: 10px;
border: 1px solid #5d8ada;
/*Shadow For Input (Text Box Field)*/
-moz-box-shadow: 0px 0px 2px white;
-webkit-box-shadow: 0px 0px 2px white;
}
input:hover {
/*Shadow For Input (Text Box Field) On HOVER*/
-webkit-box-shadow: 0px 0px 10px #ffffff;
-moz-box-shadow: 0px 0px 10px #ffffff;
}
input.submit
{
width: 245px;
margin-top:10px;
font-size:medium;
font-weight:bold;
/*Elements to be animated and duration */
-webkit-transition-property: -webkit-box-shadow, background;
-webkit-transition-duration: 0.25s;
}
input.submit:hover
{
background:#a7bde8;
/*Shadow For Submit Button On HOVER*/
-moz-box-shadow: 0px 0px 10px white;
-webkit-box-shadow: 0px 0px 10px white;
}
The Final Output
Check out the live demo or download the code for self study. Please share with us, if you have any suggestion or tips on the codes.
DemoDownload