make neon effects with CSS and jquery

Today we are prepared for the js+css neon effect, so that your text like a lamp, every minute of color.

Today we're going to use CSS and jquery to make neon effects. Now let's start with the first step and create a background. There are 2 different colors of text versions.
To produce a colorful background image, you first need to create a new Photoshop file 650px and 300px document, #141414的背景颜色. Write your title with your favorite font. I used the Gothic century with the size of the 60px.
Then ctrl clicks on him and becomes a constituency.

Using the Rectangle tool, press Shift+alt to select the text, as shown in the following figure:

Then a new layer is copied:

Use the gradient tool in the appliance bar, choose the color you like, but the color of each word is best different, the following figure:

In the finished title, the following originals, the copy and apply a different set of color gradients. Align more than two other colorful headings so that it's easy to convert between them and provide a simple background picture in CSS on it.

The article below has the source file to download

Step 2–xhtml

XHTML annotations are really simple, you need to hold the background of the two versions of the container (#neonText H1).

demo.html

 
<H1 id= "Neontext" >  
Neon Text Effect with JQuery & CSS.  
<span class= "textversion" id= "Layer1" ></span> <span class= "textversion" id=  
"Layer2" ></ Span>  

Layer1 is shown above the layer2, and lowering its opacity will result in a smooth neon glow effect, the background image of the spacing under its fading into view.

Search engine Optimization For the reason we also provide plain text content for images. It is a neat and negative text indent hidden from the view.

Step 3–CSS

Make the style, 2 images are separate, we define the position of 2 graphs through CSS, let them appear above, or below.

Styles.css

/* The two text layers * * * #neonText span{ width:700px; height:150px; Position:absolute; left:0; top:0; Background:url ("Img/text.jpg") no-repeat left top; } span#layer1{ z-index:100; } span#layer2{ Background-position:left Bottom; z-index:99; } * * The H1 tag that holds the layers * * #neonText { height:150px; margin:180px Auto 0; position:relative; width:650px; text-indent:-9999px; }

#neonText Style setting relative position so that he is absolutely positioned to display at the top, and also to note that the text indents, our thing Iyongd is hidden style content

Step 4–jquery

The final step is to make a transition animation. Since we use the jquery library (we included on the same Script tab page).

script.js

View sourceprint?01 $ (document). Ready (function () {  
setinterval (function () {  
//selecting only the visible Layers:  
var versions = $ (". Textversion:visible");  
if (versions.length<2) {  
//If only one layer be visible, show the other  
$ (". Textversion"). FadeIn (a);  
else{  
//Hide the upper layer  
versions.eq (0). fadeout (a);  
}  
},1000);  
};

The declared function setinterval is not executed once, and is shown or hidden and the first diagram is exchanged.

Effect Preview File Download