7 Cool HTML Effects That Anyone Can Add To Their Website
Skillfully 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.
Input:
Output:
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.
Input:
<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>
Output:
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.
Input:
<span style= “background-color: #FFFF00″>Your text here.</span>
Output:
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.
Input:
<SPAN STYLE=”background-image: url(http://www.makeuseof.com/wp-content/uploads/2009/08/HTMLEffects03.png ); font-size: 20pt”>MakeUseOf presents…</SPAN>
Output:
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.
Input:
<SPAN TITLE=”See, this is the tool tip. ”>Move your mouse over me!</SPAN>
Output:
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.
Input:
<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> 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> Text Color
Output:
This demonstration will actually not work here, which is why I have created a working example of it on this page.
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.
Input:
Add the following code into the <head> section of your page:
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}
.submenu{
margin-bottom: 0.5em;
}
</style>
<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’)
document.write(’</style>\n’)
}
function SwitchMenu(obj){
if(document.getElementById){
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”;
}else{
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!=”")
document.getElementById(cookievalue).style.display=”block”
}
}
function savemenustate(){
var inc=1, blockid=”"
while (document.getElementById(”sub”+inc)){
if (document.getElementById(”sub”+inc).style.display==”block”){
blockid=”sub”+inc
break
}
inc++
}
var cookiename=(persisttype==”sitewide”)? “switchmenu” : window.location.pathname
var cookievalue=(persisttype==”sitewide”)? blockid+”;path=/” : blockid
document.cookie=cookiename+”=”+cookievalue
}
if (window.addEventListener)
window.addEventListener(”load”, onloadfunction, false)
else if (window.attachEvent)
window.attachEvent(”onload”, onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction
if (persistmenu==”yes” && document.getElementById)
window.onunload=savemenustate
</script>
And this code goes wherever you want the dynamic menu to appear.
<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!
</span>
<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!
</span>
<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>
</span>
</div>
Output:
Again, this menu cannot be demonstrated here, hence I’ve made it available for viewing at the demonstration page. And 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
(By) Tina has been writing for MakeUseOf since late 2007. In her other lifes she is a researcher, scientific writer, senior customer service representative or blogger. Tina is also an experienced host with CouchSurfing.
mind blowing
You call these “cool”? Hmm, yeah like 10 years ago!
They are cool because they require little skill and can be used on simple html pages by anyone.
Styling a website using CSS of course is way cooler, but it’s not for everyone.
Do you know other cool and simple to use HTML effects, that work both in Firefox and IE? Let’s hear!
Not everyone knows HTML and this article can help them start off with the basics.
This is quite informative and useful. Thanks.
Uck. No, just no.
First off, half of these are just inline CSS tricks not HTML.
Second, your demonstration pages link to a reported attack site, and Firefox blocks the page.
Also, the first item in your list is not a cool HTML trick, and you even admitted it. You’re supposed to hide those halfway through or near the end of the list.
Zak,
<span> and <div> tags are HTML tags, which are also used in CSS.
The demonstration page is a subpage of my personal domain or homepage and it’s definitely not an attack site. I guarantee you it’s safe.
It should have said “div” and “span” tags of course.
(Comments wont nest below this level)Well yes, but without the CSS the divs and spans are nothing special. Some of what you listed were CSS tricks, not HTML.
And yes, I figured the pages were safe. Firefox or Google probably flagged the site, and it’s just that most people will think it’s an actual attack site and it could look bad for makeuseof.
(Comments wont nest below this level)Tina’s site has been falsely flagged as an attack site and we are currently looking into it to get it unflagged.
Thanks for pointing out the issue with my website Zak. I only received the warning when visiting tinsie.net directly and would not have noticed this issue anytime soon. It is no longer listed as suspicious.
http://www.google.com/safebrowsing/diagnostic?site=http://www.tinsie.net/&hl=en
This web site at http://www.tinsie.net has been reported as an attack site and has been blocked based on your security preferences.
Fixed: http://www.google.com/safebrowsing/diagnostic?site=http://www.tinsie.net/&hl=en
When visiting the test page for the last 2 effects, Firefox says that the page on tinsie.net “has been reported as an attack page and has been blocked”
Sorry! I didn’t read the comments above by Zak and the author.
good for beginners, but to be honest most of them come annoying if done to intrusive….
Dynamic Drive = duff url ttp://www.dynamicdrive.com/
Correct URL http://www.dynamicdrive.com/ (missing h at the start)
I absolutely HATE grammar nazis but this is a simple typo so I dont feel too bad pointing this one out.
fixed!
Having just submitted I see that posts are moderated before being made visible.
NO NEED TO POST MY PREVIOUS. Just quitly correct the typo and maybe nobody will notice
Paul.
Thanks for sharing all of these great tips! I’ll send this article to my friends who are getting started with their websites too. Wow, this has made my life a whole lot easier, thanks to you! And I’ve always wanted to know how to add in a scrollable text box.
Have you considered creating a http://bit.ly/4bybHr poll for your readers? I find them pretty helpful for getting opinions, not to mention they’re great for voting!
by the way,in the last section, the link for ‘Dynamic Drive’ is missing the first h, ”ttp://www.dynamicdrive.com/”
good tips for the intended audience, cheers
already fixed it!
I visited the demonstration page in no.6 (using google chrome) and it showed me the malware warning page.
Also this has been fixed.
I want to stress that Google never detected any malware on my site! After I replaced the default index.html, removed some iframes and requested a review of my site, it is no longer listed as suspicious.
For details see this report: http://www.google.com/safebrowsing/diagnostic?site=http://www.tinsie.net/&hl=en
Great collection, i liked : “Add Background Image to Text”!
Thanks for sharing..
Great Tips.. Thanks for sharing. Its very useful for beginners like me….
I agree with a previous comment that not everyone knows HTML so these tips are very good. I even created a site to give tutorials on HTML as they are still in demand so thanks for sharing
Hi
Code of Highlight Text and Add Background Image to Text not working
Which browser were you using for viewing this code?
Firefox 3.5
(Comments wont nest below this level)I would just like to say no one really uses HTML anymore.Every web page desinger would use CSS. I liked this because it helped me a bit,I’m in gr.9 in a Bussiness Tech class, and we’re currently working on HTML (I have no clue why) but it seems alright but if you’re going to actually publish your page you might as well just use CSS.
But Cheers.