Codepal

We develop enthralling web experiences.

Neon Blink Effect for Forms using CSS3 and jQuery

Creating a Neon Blink Effect for your Forms using CSS3 and jQuery

Our latest tutorial at 1stWebDesigner. How cool will it be to have a glowing blink effect behind your input boxes in a form without using Flash? Well, then this tutorial teaches you on how to build one in the easiest manner possible.

Live Demo Downloadhttp://www.1stwebdesigner.com/wp-content/uploads/2010/07/neonblink.zip

It would be awesome if you could like us on Facebook or subscribe to our feed...

Well thanks to the bright new kid on the block, CSS3, spruced up with a bit of jQuery, I will show you how to build a nifty effect to enhance your forms.

Am sure that this cool Neon blink effects in forms are going to be useful for a lot of purposes so don’t miss my tutorial on 1stWebDesigner.com.

neon-blink-effect-final

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.


Discussion 4 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>