Effective Use of the CSS3 box-shadow Property

/ Published in: CSS
Save to your folder(s)

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.

Copy this code and paste it in your HTML
  1. css:
  2. box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
  4. script:
  5. ctl=false;
  6. pntr=0;
  7. function animLoop()
  8. {
  9. styl='showbox clrs'+pntr;
  10. document.getElementById('anim').className=styl;
  11. pntr=(pntr>2) ? 0 : pntr+1;
  12. if(!ctl) TO = setTimeout('animLoop()', 600);
  13. ctl=false;
  14. }
  16. markup:
  17. <div id="anim" class="showbox clrs0">content
  18. <button id="b1" onclick="this.style.display='none';document.getElementById('b2').style.display='inline';animLoop();">Animate</button>
  19. <button id="b2" onclick="this.style.display='none';document.getElementById('b1').style.display='inline';ctl=1;">Stop Lame Animation</button></div>

URL: http://coboldinosaur.com/pages/Using-the-CSS3-box-shadow-property.html

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.