Total Followers 132,503
How cool will it be to have a glowing blink effect behind your input boxes in a form without using Flash? Well thanks to the bright new kid on the block, CSS3, spruced up with a bit of jQuery! In this tutorial, I will show you how to build a nifty effect to enhance your forms.
Note: In this tutorial, we have made use of @-webkit-keyframes which works only in browsers using the Webkit layout engine like Chrome and Safari. For browsers like Firefox and Opera, where there is no alternative, we will have to gracefully degrade the effect, which in this case will be just a box-shadow on focus. Internet Explorer (till version 8) cannot render most of what we will learn here, but IE 9 does seem to be very promising from what I’ve seen in the recent platform preview.
You can see the live demo of what we are going to build here. The source code of our experiment is also available here to download.
This is how the form will look after we complete building it:
Make sure you download the latest release of jQuery (version 1.4.2 at the time of writing), if you feel the need for a local copy, otherwise one always has the option of using the Google API(if working online), in this case the AJAX libraries. To include the latest release under the “1″ branch, add the following line of code in the head tag above all the other scripts which make use of jQuery.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
This line fetches the latest version under the “1″ branch. To be more specific, that is if you want the latest version under “1.4″ branch, just change the “1″ to “1.4″. In my code, I’ve made use of a local copy of jQuery 1.4.2, which I’ve provided in the source files.
The naming of the files is as follows:
Put all the files in the same folder, along with the local copy of jQuery (if any), if you are following the exact code I’ve written. Let’s begin!
The next step would be to create the form layout in xHTML. Following are the contents of index.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" class="no-js"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Form Tutorial</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="highlight.js"></script> </head> <body> <div id="page-wrap"> <form id="myform" method="post" action="#"> <div> <div class="field"> <label for="personname" >Name</label> <input class="inputfield textfield" name="personname" type="text" /> </div> <div class="field"> <label for="email" >E-mail</label> <input class="inputfield textfield" name="email" type="text" /> </div> <div class="field"> <label for="website" >Website</label> <input class="inputfield textfield" name="website" type="text" /> </div> <div class="field area"> <label for="details" >Details</label> <textarea class="inputfield textarea1" name="details" ></textarea> </div> </div> <!--div class="clear"></div--> <input class="submitbutton" type="submit" value="Submit" /> </form> </div> </body> </html>
Let’s understand the code above. The xhtml body consists of a page-wrap inside which we wrap our <form>, so that it can be centered in the CSS styling, as shown below. Each label, input and textarea is wrapped inside a
inputfield with the textarea having an additional class of textarea1, so that we can adjust the height of the textarea in the CSS, and for the same purpose, we have also given an additional class area to its parent div.
Now we provide some basic CSS styling to the bare xHTML page as follows. Put the following piece of code in style.css.
*{
margin:0;
padding:0;
}
textarea, input{
outline:none;
}
body{
background:#3D3D3D;
}
#page-wrap{
width:350px;
min-height:500px;
height:auto;
margin:0 auto;
position:relative;
padding-top:50px;
font:15px Arial;
}
#myform{
width:375px;
-moz-border-radius: 8px; /* FF1+ */
-webkit-border-radius: 8px; /* Saf3+, Chrome */
border-radius: 8px; /* Opera 10.5, IE 9 */
margin:0 auto;
position:relative;
}
#myform label{
top:10px;
position:relative;
color:white;
}
.field{
background:gray;
padding:15px 15px 0 10px;
height:50px;
width:350px;
}
#myform div:first-child{
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
#myform div:last-child{
-moz-border-radius-bottomleft: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.area{
padding:15px 15px 0 10px;
min-height:195px;
}
.inputfield{
padding:0 10px 0 10px;
float:right;
width:200px;
font:15px Arial;
border:2px aqua inset;
-moz-border-radius: 8px; /* FF1+ */
-webkit-border-radius: 8px; /* Saf3+, Chrome */
border-radius: 8px; /* Opera 10.5, IE 9 */
}
.textfield{
height:25px;
padding-top:5px;
}
.textarea1{
padding-top:10px;
padding-bottom:10px;
height:150px;
max-height:200px;
max-width:250px;
}
Here, the CSS3 border-radius property is very essential in the inputfield class since the box-shadow property, which we are going to add later on, has to follow the border-radius property, according to the specification. Elsewhere, the use of border-radius is just to improve the look and feel of the form, and the usage is optional.
The outline is set to 0 for textarea and input fields to remove the default focus highlighting in browsers like Chrome and Safari. The code above is just how the form will appear at first sight and will look like this.
Now, let’s style the Submit button, such that it blends with the rest of the form. Add the following piece of code to your CSS file.
.submitbutton{
border: 0px;
float:right;
width:75px;
height:40px;
font:20px Arial;
position:relative;
top:20px;
right:10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 0px 0px 30px #3cdfdf;
-webkit-box-shadow: 0px 0px 30px #3cdfdf;
box-shadow: 0px 0px 30px #3cdfdf;
background-image: -moz-linear-gradient(top, white, #3cdfdf); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, white),color-stop(1, #3cdfdf)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='white', EndColorStr='#3cdfdf'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='white', EndColorStr='#3cdfdf')"; /* IE8 */
}
.submitbutton:hover{
background: #3cdfdf;
color:white;
}
The CSS3 elements used above are border-radius, box-shadow and gradient properties. We have added linear gradients to the background image of the Submit button, using White and #3cdfdf (aqua-blue) for which we use -moz-linear-gradient property for Firefox 3.6+ and the -webkit-gradient property for Chrome 4+ and Safari 4+, as shown above. For Internet Explorer, we have made use of filter (IE 6,7) and -ms-filter (IE 8+) properties. Unfortunately, there are no available alternatives for Opera.
On hover, we just change the entire background-color to #3cdfdf (aqua-blue) and the text color to White.
After adding the above code, the Submit button, in its full glory, will look somewhat like this.
Now it’s time to dive into the newer elements of CSS3, the -webkit-animation feature. Add the following lines of code to the CSS file.
@-webkit-keyframes pulsate {
0% { -webkit-box-shadow: 0px 0px 0px #3cdfdf; border:2px aqua inset }
25% { -webkit-box-shadow: 0px 0px 35px #3cdfdf; border:2px aqua inset }
50% { -webkit-box-shadow: 0px 0px 0px white; border:2px white inset }
75% { -webkit-box-shadow: 0px 0px 35px white; border:2px white inset }
100% { -webkit-box-shadow: 0px 0px 0px #3cdfdf; border:2px aqua inset }
}
.inputfield:focus{
-webkit-animation-name: pulsate;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-moz-box-shadow: 0px 0px 30px #3cdfdf;
box-shadow: 0px 0px 30px #3cdfdf;
}
Many of you may not be aware of this feature, which is why I’ll try and explain in detail how it actually works.
Keyframes are defined using the CSS “@-rule” and the syntax is:
@-webkit-keyframes animation-name
{
from{ before-state }
to{ after-state }
}
To insert multiple frames, just use percentage(%) as shown in the above code. “x%” implies x% of the total time elapsed. The total time is the one which we will specify in -webkit-animation-duration when we use the animation.
In the above code, we use two colors, #3cdfdf and white, to create an animation named pulsate. Here, a definite pattern has been defined, using box-shadow, for alternating pulse effect and the border property to go along with it, but you can play around with the values, and use any CSS property to create your own animation effortlessly. To use the animation, all you have to do is add the following three lines (see code above for example usage):
-webkit-animation-name: animation-name;
-webkit-animation-duration: animation-duration;
-webkit-animation-iteration-count: number_of_times;
We have made use of -moz-box-shadow for Firefox 3.5+ and box-shadow for browsers which support it, like Opera 10.5+.
Now, when you focus on a textfield or textarea, it should glow as shown below.
This is merely an optional part to give it a nice finishing touch. Just add the following lines of code in highlight.js.
$(document).ready(function(){
var globalParent=null;
var mouse_is_inside=false;
/*The snippet below is activated when an inputfield is focused*/
$('.inputfield').focus(function(){
globalParent=$(this).parent('div');
globalParent.click();
});
/*This following part will be activated when the inputfield loses focus*/
$('.inputfield').blur(function(){
globalParent.click();
});
/*Following part will be activated when the user clicks anywhere inside
the container div of the inputfield*/
$('.field').click(function(){
if(!($(this).is('.dummy'))){
$('.dummy').css('background-color','gray');
$('.dummy label').css('color','white');
$('.dummy').removeClass('dummy');
$(this).css('background-color','black');
$(this).children('label').css('color','#3cdfdf');
$(this).addClass('dummy');
}
});
/*The following code checks time and again whether the mouse is inside the form or not*/
$('form').hover(function(){
mouse_is_inside=true;
},
function(){
mouse_is_inside=false;
}
);
/*If user clicks anywhere outside the form, all highlighting is removed*/
$('body').click(function(){
if(!mouse_is_inside)
{
$('.field').css('background-color','gray');
$('.field label').css('color','white');
$('.dummy').removeClass('dummy');
}
});
});
The parts of the code have been documented as to which part corresponds to which functionality.
This is a simple jQuery code, which selects the container div of the focused inputfield and changes its background-color to Black, and also changes the corresponding label color to #3cdfdf (aqua-blue). Even if one clicks anywhere inside the container div, its background-color changes to Black and all the other siblings will have their background-color changed to Gray, i.e., not more than one div will be highlighted at the same time. As soon as the inputfield loses its focus, the background-color is reverted back to Gray, and the label color to white. Here, we need to use jQuery in order to select the Parent of an element, which is not possible using only CSS (at the time of writing).
After including the jQuery code, field highlighting will occur as shown below.
This may look a bit difficult at first sight, but it’ll hardly take more than 40 minutes to implement it. To use such an effect in a website, one will have to be very specific about the target users as of now, since Chrome and Safari users hardly make up for 20% of the total internet users and is more common amongst the younger generation. I had mentioned before we started that for browsers which do not support CSS3, we will have to gracefully degrade the effect according to the capability of the concerned browsers, rather than completely scrapping it. CSS3 is the Future of Web, and it is already here. So gear up! All advices and suggestions will be welcomed with open arms… :-)
Get The Only Freelancer crash course you will ever need to read!
Rakesh Menon is a Computer Science Engineering graduate from Kolkata, India, a web developer and a budding entrepreneur. He developed an early passion for programming and is a raging workaholic. He currently provides services under the Code-pal brand. Follow him on Twitter and Facebook.
Saturday, November 12th, 2011 16:50
Nice tutorial for CSS3. Will try this one on my site. Thanks.
Friday, August 12th, 2011 14:22
Nice way of spicing up enquiry forms!
Monday, August 16th, 2010 19:48
i like this effect hats off buddy. Keep it up
Tuesday, July 27th, 2010 20:04
Nice tutorial, really appreciate it. Keep it up dude.
Monday, July 26th, 2010 19:59
It’s a fascinating CSS3 proof-of-concept; cool to imagine all that will be possible once there is more cross-browser support for these properties. But ultimately I find the effect used here superfluous and distracting. Maybe it’s just me :P but I’d rather not fill in a form that is blinking at me while I’m typing.
Wednesday, August 4th, 2010 15:44
Yeah, well one can’t expect everyone to like his work – and see the irony here is that I agree with you. This was something one can use to create something of his own…
Friday, July 16th, 2010 23:06
Nice one. But not XHTML valid.
The XHTML valid package can be downloaded here, if needed.
I have added some comments.
http://1click.at/lab/xhtml-valid-form-tut.zip
The effect is nice, good idea and nicely done :-)
Saturday, July 17th, 2010 11:46
thanks for pointing it out :-) … the class “no-js” is there by mistake, i was experimenting with Modernizr at some point… sorry for that :-|
Friday, July 16th, 2010 16:46
Quick tip:
Add an id attribute to your form elements with the same value as the name:
[label for="personname" ]Name[/label]
[input class="inputfield textfield" name="personname" type="text" /]
With that in place, when you click a label, the associated form element gets the focus.
Sadly, you need both name AND id, name to pass the value when the form is posted, id for javascript hooks and to link it to it’s label.
Friday, July 16th, 2010 22:29
Nice tip Richard… thank you :-)
Friday, July 16th, 2010 21:55
Great tutorial Rakesh. Keep up the good work :D We are looking for to some more innovative ideas from you.
@Richard: Nice suggestion.
Friday, July 16th, 2010 20:06
Nice tutorial :)
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Abhishek
Friday, July 16th, 2010 20:06
Nice tutorial :)
Michael Pehl
Friday, July 16th, 2010 23:06
Nice one. But not XHTML valid.
The XHTML valid package can be downloaded here, if needed.
I have added some comments.
http://1click.at/lab/xhtml-valid-form-tut.zip
The effect is nice, good idea and nicely done :-)
Rakesh Menon
Saturday, July 17th, 2010 11:46
thanks for pointing it out :-) … the class “no-js” is there by mistake, i was experimenting with Modernizr at some point… sorry for that :-|
Richard
Friday, July 16th, 2010 16:46
Quick tip:
Add an id attribute to your form elements with the same value as the name:
[label for="personname" ]Name[/label]
[input class="inputfield textfield" name="personname" type="text" /]
With that in place, when you click a label, the associated form element gets the focus.
Sadly, you need both name AND id, name to pass the value when the form is posted, id for javascript hooks and to link it to it’s label.
Rakesh Menon
Friday, July 16th, 2010 22:29
Nice tip Richard… thank you :-)
Sumeet Chawla
Friday, July 16th, 2010 21:55
Great tutorial Rakesh. Keep up the good work :D We are looking for to some more innovative ideas from you.
@Richard: Nice suggestion.
Brian
Monday, July 26th, 2010 19:59
It’s a fascinating CSS3 proof-of-concept; cool to imagine all that will be possible once there is more cross-browser support for these properties. But ultimately I find the effect used here superfluous and distracting. Maybe it’s just me :P but I’d rather not fill in a form that is blinking at me while I’m typing.
Rakesh Menon
Wednesday, August 4th, 2010 15:44
Yeah, well one can’t expect everyone to like his work – and see the irony here is that I agree with you. This was something one can use to create something of his own…
Francis
Saturday, November 12th, 2011 16:50
Nice tutorial for CSS3. Will try this one on my site. Thanks.
Jay Pick
Friday, August 12th, 2011 14:22
Nice way of spicing up enquiry forms!
rozario
Monday, August 16th, 2010 19:48
i like this effect hats off buddy. Keep it up
Narendra Keshkar
Tuesday, July 27th, 2010 20:04
Nice tutorial, really appreciate it. Keep it up dude.