Cool Html Effects

If you are looking to improve your website with a few neat tricks, here are 5 cool HTML effects which will help you .

1) Add Background Image to Text

This one only becomes really exciting if your text has a big enough size, which is why I also increased the font size.

Here type your text – http://free-stuffonline.com/ -

Html Code:

<SPAN STYLE="background-image: url(http://free-stuffonline.com/wp-content/uploads/2009/12/cool-html-effects-2.jpg); font-size: 15pt">Here type your text – http://free-stuffonline.com/ -</SPAN>

2)MouseOver

Run your mouse cursor over the image.

Html Code :

<SPAN onMouseOver="freestuff.src='http://free-stuffonline.com/wp-content/uploads/2009/12/cool-html-effects-3.gif'" onMouseOut="freestuff.src='http://free-stuffonline.com/wp-content/uploads/2009/12/cool-html-effects-4.gif'"><img src="http://free-stuffonline.com/wp-content/uploads/2009/12/cool-html-effects-3.gif" height="40" width="100" name="freestuff"></SPAN>

3)Highlight text

Highlight text

Html code:

<span style="background-color: #FFFF00">Highlight text</span><br />

4)Walking picture

Html Code :

<marquee behavior=”scroll” direction=”left”><br /> <a href="http://free-stuffonline.com/wp-content/uploads/2009/12/logo-400-x-42.jpg"><img src="http://free-stuffonline.com/wp-content/uploads/2009/12/logo-400-x-42.jpg" alt="logo (400 x 42)" title="logo (400 x 42)" width="400" height="42" class="alignnone size-full wp-image-851" /></a></marquee><br />
Walking picture:left to right, you can set left,right,up,down, just modify direction=”xxxxx”

5) Cool Text Effect to Create A Logo

My Cool Logo Text

Html Code :
<marquee behavior=”scroll” direction=”left”></p> <p style="color: #CCCCCC;"><font size="5"><b>My Cool <span style="background: #CCCCCC; color: #000000; padding: 5px 5px 5px 5px;">Logo Text</span></b></font></p> <p>

You can get our articles in your email inbox each day for free. Just enter your email below:

FeedBurner