Cool HTML Effects That Anyone Can Add To Their Website

tableizer

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>
    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.
    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…
    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!

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

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>

Pages

Rohit's Tech Talk