7 Cool HTML Effects That Anyone Can Add To Their Website

HTML-EffectsSkillfully designed websites with decent effects and carefully selected highlights are not only nice to view, they are also functional and enhances the user experience.

Unfortunately, not everyone has the gift, time or financial freedom to create an extraordinary and sophisticated website complete with CSS and whatnot. Some of us will just have to live with simple HTML pages for a little longer.

In the meantime, you may still want to take advantage of simple, cool HTML effects and tags to make information stand out with style.

Maybe one of these is what you’ve been looking for.

1. Tableizer!

If you have an existing Excel, Calc or other spreadsheet template, Tableizer! will transform your data into an HTML table in a jiffy. The resulting HTML code can easily be added to your website. Of course, this is not really an HTML effect, but it’s quite handy.

Ads by Google


cool html effects


cool html effects

With a little patience and editing of the background-colors you can make it look a lot cooler, for example by coloring the leftmost “index” column blue as well.

2. Scrollable Text Box

This is a helpful, cool HTML effect in case you want to pack long snippets of text into a compact format, so that it doesn’t take up the entire space on a page.


<div style=”width: 25%; height: 50px; overflow: auto; scrollbar-face-color: #CE7E00; scrollbar-shadow-color: #FFFFFF; br /scrollbar-highlight-color: #6F4709; scrollbar-3dlight-color:#11111; scrollbar-darkshadow-color: #6F4709; br /scrollbar-track-color: #FFE8C1; scrollbar-arrow-color: #6F4709;”>Your text goes here. And it can scroll down. You just have to add a sufficient amount of text to make the scrollbars show. That’s it! :)</div>


Your text goes here. And it can scroll down. You just have to add a sufficient amount of text to make the scrollbars show. That’s it! 🙂


You can play with the colors and the size of the text box.

3. Highlight Text

With a simple <span> HTML tag you can add a ton of effects to your text or images. Note that some may only work in IE and that I’m only mentioning those that work with both IE and Firefox.


<span style= “background-color: #FFFF00″>Your text here.</span>


Your text here.

4. Add Background Image to Text

Likewise, you can change the color of your text or add a background image. This one only becomes really exciting if your text has a big enough size, which is why I also increased the font size.


<SPAN STYLE=”background-image: url(http://www.makeuseof.com/wp-content/uploads/2009/08/HTMLEffects03.png ); font-size: 20pt”>MakeUseOf presents…</SPAN>


MakeUseOf presents…

5. Add Title Tool Tip

A title tool tip comes up when you scroll with the mouse over a piece of “manipulated” text or images. You know these from images or linked text. Here is how you can add this one to plain text.


<SPAN TITLE=”See, this is the tool tip. :)”>Move your mouse over me!</SPAN>


Move your mouse over me!

6. Change Background / Text Color

Picking colors that everyone enjoys is a tough business. In short, it’s impossible. Either you’ll violate someone’s personal taste or you will discriminate against color blind individuals. If you want to be super correct, simply let your visitors change the background and text colors on your website themselves.


<select name=”clr” onchange=”document.bgColor=this.options[this.selectedIndex].value” size=”1″><br > <option value=”black”>black <option value=”orange”>orange <option value=”flamingred”>fuschia <option value=”lightyellow”>light yellow <option value=”green”>green <option value=”cyan”>cyan <option value=”yellow”>yellow <option value=”red”>red <option value=”white”>white</option></select>&nbsp;&nbsp;Background Color

<br ><select name=”clr” onchange=”document.fgColor=this.options[this.selectedIndex].value” size=”1″><br > <option value=”black”>black <option value=”orange”>orange <option value=”flamingred”>fuschia <option value=”lightyellow”>light yellow <option value=”cyan”>cyan <option value=”yellow”>yellow <option value=”red”>red <option value=”white”>white</option></select>&nbsp;&nbsp;Text Color


This demonstration will actually not work here, which is why I have created a working example of it on this page (the link no longer available).

7. Add a Switchmenu

The most exciting HTML effects are dynamic HTML effects. However, they are often script based. Here is one effect for menus that I have come to adore. It’s a little more complicated than your avarage HTML tag because it works with a style sheet and scripts. The advantage is that you don’t have to upload a CSS or script file to make it work, you can plant all necessary information into the <head> section of your website.


Add the following code into the <head> section of your page:


<style type=”text/css”>
margin-bottom: 5px;
/*/*/border:1px solid #000000;/* */

margin-bottom: 0.5em;

<script type=”text/javascript”>

* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code

var persistmenu=”yes” //”yes” or “no”. Make sure each SPAN content contains an incrementing ID starting at 1 (id=”sub1″, id=”sub2″, etc)
var persisttype=”sitewide” //enter “sitewide” for menu to persist across site, “local” for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write(‘<style type=”text/css”>n’)
document.write(‘.submenu{display: none;}n’)

function SwitchMenu(obj){
var el = document.getElementById(obj);
var ar = document.getElementById(“masterdiv”).getElementsByTagName(“span”); //DynamicDrive.com change
if(el.style.display != “block”){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className==”submenu”) //DynamicDrive.com change
ar[i].style.display = “none”;
el.style.display = “block”;
el.style.display = “none”;

function get_cookie(Name) {
var search = Name + “=”
var returnvalue = “”;
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(“;”, offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
return returnvalue;

function onloadfunction(){
if (persistmenu==”yes”){
var cookiename=(persisttype==”sitewide”)? “switchmenu” : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!=””)

function savemenustate(){
var inc=1, blockid=””
while (document.getElementById(“sub”+inc)){
if (document.getElementById(“sub”+inc).style.display==”block”){
var cookiename=(persisttype==”sitewide”)? “switchmenu” : window.location.pathname
var cookievalue=(persisttype==”sitewide”)? blockid+”;path=/” : blockid

if (window.addEventListener)
window.addEventListener(“load”, onloadfunction, false)
else if (window.attachEvent)
window.attachEvent(“onload”, onloadfunction)
else if (document.getElementById)

if (persistmenu==”yes” && document.getElementById)



And this code goes wherever you want the dynamic menu to appear.


<!– Keep all menus within masterdiv–>
<div id=”masterdiv”>

<div onclick=”SwitchMenu(‘sub1′)”>Topics</div>
<span id=”sub1″>
– <a href=”http://www.makeuseof.com/service/browser”>Browsers/Addons</a><br>
– <a href=”http://www.makeuseof.com/service/web_based”>Web Apps</a><br>
– <a href=”http://www.makeuseof.com/service/how-to”>How-To Tips</a><br>
– <a href=”http://www.makeuseof.com/service/applications”>Cool Software</a><br>
…and more!

<div onclick=”SwitchMenu(‘sub2′)”>Staff Writers</div>
<span id=”sub2″>
– <a href=”http://www.makeuseof.com/tag/author/karl-l-gechlik/”>Karl Gechlik</a><br>
– <a href=”http://www.makeuseof.com/tag/author/tinsie/”>Tina</a><br>
– <a href=”http://www.makeuseof.com/tag/author/varunkashyap/”>Varun Kashyap</a><br>
…and more!

<div onclick=”SwitchMenu(‘sub3′)”>Miscellaneous</div>
<span id=”sub3″>
– <a href=”http://www.makeuseof.com/about/”>About</a><br>
– <a href=”http://www.makeuseof.com/contact”>Contact</a><br>
– <a href=”http://www.makeuseof.com/archives-2″>Archives</a><br>
– <a href=”http://www.makeuseof.com/disclaimer”>Disclaimer</a><br>



Again, this menu cannot be demonstrated here. Here is the original source for this dynamic HTML effect.

For more <span> tags, visit HTML Goodies. If you got interested in dynamic HTML, check out Dynamic Drive for tons of incredible scripts. And finally, don’t forget, that your website is best enjoyed when it loads fast. With this regard, you may find Guy’s article on 5 HTML Tips to Create a Fast Loading Website very informative.

What is your favorite HTML effect on your or any other website? Please share it with us!

Image credit: svilen001

Leave a Reply

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