Advanced Search

Return to Snippet

Revision: 63196
at April 16, 2013 05:52 by COBOLdinosaur
Initial Code 
css:
box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;

script:
ctl=false;
pntr=0;
function animLoop()
{
    styl='showbox clrs'+pntr;
    document.getElementById('anim').className=styl;
    pntr=(pntr>2) ? 0 : pntr+1;
    if(!ctl) TO = setTimeout('animLoop()', 600);
    ctl=false;
}

markup:
<div id="anim" class="showbox clrs0">content
<button id="b1" onclick="this.style.display='none';document.getElementById('b2').style.display='inline';animLoop();">Animate</button>
<button id="b2" onclick="this.style.display='none';document.getElementById('b1').style.display='inline';ctl=1;">Stop Lame Animation</button></div>
Initial URL 
http://coboldinosaur.com/pages/Using-the-CSS3-box-shadow-property.html
Initial Description 
I cannot imagine why developers spend all kinds of time trying to get some lame jquery menu working and don't have 15 minutes to spend enhancing the content with a few shadows instead of bloating the page with images that include a shadow.
Initial Title 
Effective Use of the CSS3 box-shadow Property
Initial Tags 

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS