Pinterest Stumbleupon Whatsapp
Ads by Google

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

Input:

cool html effects

Output:

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.

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 5 HTML Tips to Create a Fast Loading Free Website 5 HTML Tips to Create a Fast Loading Free Website Read More very informative.

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

Image credit: svilen001

  1. 2srenu
    November 24, 2016 at 10:07 am

    Page Title

    My First Heading
    My first paragraph.

    • Tina Sieber
      November 24, 2016 at 10:08 am

      What are you trying to do?

  2. sqeky squeaks
    June 9, 2016 at 1:39 pm

    Can anyone tell me how to install minecraft texture packs?

    • Tina Sieber
      June 9, 2016 at 6:17 pm

      Is that question somehow related to this article? Did you search Google?

      How about this: How to install a texture pack in Minecraft
      Note that texture packs have been removed since version 1.6.1.

      • ItsXenon_
        July 24, 2016 at 4:33 pm

        Hasn't been removed. They improved it so now, its called resource packs.

        • Tina Sieber
          July 24, 2016 at 5:28 pm

          Thanks for the correction and helping out!

    • ItsXenon_
      July 24, 2016 at 4:35 pm

      After downloading your texture pack

      1)Open Run ( Start Button + R )
      2)type in %appdata%
      3)click on .minecraft
      4)open texture packs/reasource packs
      5)Place your texture packs/reasource packs in there

  3. COOL
    March 23, 2016 at 9:55 pm

    This is very helpful

  4. HaremKing
    March 20, 2016 at 9:33 pm

    Lmao this is like the most basic stuff... I'm trying to find cool features not this!

    • ItsXenon_
      July 24, 2016 at 4:36 pm

      Did You Fin Any Cool Stuff?? Please Reply A Link.

  5. pepe
    January 29, 2016 at 3:08 pm

    lol hi

    • xd123
      February 12, 2016 at 3:34 pm

      rare

  6. BOB
    January 24, 2016 at 11:16 am

    HONESTLY

  7. Marisa Zantey
    July 24, 2015 at 3:51 am

    Your "Dynamic Menu" didn't work. And it messed up my site... thanks ._.

    • Tina Sieber
      July 24, 2015 at 4:45 am

      Sorry for that Marisa. Hope you were able to fix it by simply removing the code you added. And it's always a good idea to prepare a backup before you make changes.

      Note that this article was published in 2009 and HTML standards have changed in the meantime. While it should still work, it may also depend on what your hosting service supports. Good luck!

  8. Mc Smashers
    May 31, 2015 at 7:12 pm

    this BS doesn't even work

  9. Sau
    April 2, 2015 at 6:28 am

    have you got some other coll tags

  10. Joseph
    January 17, 2010 at 4:44 pm

    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

  11. Noicroek
    December 20, 2009 at 10:04 pm

    now I know it..

  12. Miley
    December 9, 2009 at 5:59 pm

    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.

  13. Video Converter
    November 29, 2009 at 6:15 am

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

  14. SEAN MCNAMEE
    September 26, 2009 at 12:34 pm

    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.

  15. Alinn
    September 11, 2009 at 1:53 pm

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

    • Tina
      September 22, 2009 at 4:52 pm

      Which browser were you using for viewing this code?

      • Alinn
        November 9, 2009 at 5:58 am

        Firefox 3.5

  16. Craig
    August 26, 2009 at 5:44 am

    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

  17. Abdul
    August 26, 2009 at 12:40 am

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

  18. resourcesmix.info
    August 25, 2009 at 9:53 pm

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

    Thanks for sharing..

  19. JK the Fifth
    August 25, 2009 at 4:04 pm

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

  20. ozzy
    August 25, 2009 at 12:58 pm

    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
      August 26, 2009 at 4:08 am

      already fixed it!

  21. Mary Swanson
    August 25, 2009 at 12:25 pm

    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!

  22. Paul G
    August 25, 2009 at 11:17 am

    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.

  23. Paul G
    August 25, 2009 at 11:15 am

    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
      August 26, 2009 at 4:07 am

      fixed!

  24. drcypher
    August 25, 2009 at 11:14 am

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

  25. Zak
    August 25, 2009 at 10:21 am

    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
      August 25, 2009 at 10:34 am

      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
        August 25, 2009 at 10:35 am

        It should have said "div" and "span" tags of course.

      • Zak
        August 25, 2009 at 10:49 am

        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
          August 25, 2009 at 11:37 am

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

  26. Richard
    August 25, 2009 at 9:56 am

    This is quite informative and useful. Thanks.

    • Miley
      December 9, 2009 at 6:01 pm

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

  27. herb
    August 25, 2009 at 9:53 am

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

    • Tina
      August 25, 2009 at 9:59 am

      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
      August 25, 2009 at 10:46 am

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

  28. tudor
    August 25, 2009 at 9:21 am

    mind blowing :)

  29. Hassaan
    August 25, 2009 at 11:05 am

    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
      August 25, 2009 at 11:06 am

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

Leave a Reply

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