7 Cool HTML Effects That Anyone Can Add To Their Website

HTMLEffects04   7 Cool HTML Effects That Anyone Can Add To Their WebsiteSkillfully 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:

HTMLEffects01   7 Cool HTML Effects That Anyone Can Add To Their Website

Output:

HTMLEffects02   7 Cool HTML Effects That Anyone Can Add To Their Website

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:

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.

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>&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

Output:

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.

Input:

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

 

<style type=”text/css”>
.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.

 

<!– 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!
</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. 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

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

32 Comments -

Hassaan

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

Hassaan

Sorry! I didn’t read the comments above by Zak and the author.

tudor

mind blowing :)

herb

You call these “cool”? Hmm, yeah like 10 years ago!

Tina

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! :)

Mark O'Neill

Not everyone knows HTML and this article can help them start off with the basics.

Richard

This is quite informative and useful. Thanks.

Miley

Hey ya thats what i say and umm thanks to you lol this is kinda well ya peace out

Zak

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.

Tina

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.

Tina

It should have said “div” and “span” tags of course.

Zak

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.

Mark O'Neill

Tina’s site has been falsely flagged as an attack site and we are currently looking into it to get it unflagged.

drcypher

good for beginners, but to be honest most of them come annoying if done to intrusive….

Paul G

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.

Aibek

fixed!

Paul G

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.

Mary Swanson

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!

ozzy

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

Aibek

already fixed it!

JK the Fifth

I visited the demonstration page in no.6 (using google chrome) and it showed me the malware warning page.

resourcesmix.info

Great collection, i liked : “Add Background Image to Text”!

Thanks for sharing..

Abdul

Great Tips.. Thanks for sharing. Its very useful for beginners like me….

Craig

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

Alinn

Hi
Code of Highlight Text and Add Background Image to Text not working :(

Tina

Which browser were you using for viewing this code?

Alinn

Firefox 3.5

SEAN MCNAMEE

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.

Video Converter

I Collected some best video converter. You can free download video converter here.

Miley

ya well everyone can be nice. i think that its stupid to be a jerk to someone and even someone you dont know. for example this person.

Noicroek

now I know it..

Joseph

I had to replace double quotes (“”) with single quotes(”). In the highlight code, I had to replace type the double quotes in…the copied and pasted ones weren’t working. But they are awesome code examples. Thanx. XD XD