Paint flash neon light in dark by CSS3 & jQuery

box-shadow in CSS3 is a very useful and important property, we can do very nice UI effect on webpage. In this demo that I did you can click anywhere to create a flashing neon light, more and more neon lights in the dark like bustling street in camera lens which lost focus.

DEMO

First, create a empty simple html page with empty body and set it’s  background as black by css code.

In order to create blur neon light, we can add an element which height and width in same size like below:

set it’s position as absolute in css code and to make it not visible by setting top & left as minus.

Now let’s us to use javascript with jQuery to make the light blinked and add onclick event on body for handling user’s click to create new neon light.

Remove that “light” and add jQuery library from google:

Below is the javascript added into body

Tagged with: , ,
Posted in CSS3, Javascript

Leave a Reply

Categories

Related Posts