Advanced Search

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.

Expand | Embed | Plain Text

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;
  3.  
  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. }
  15.  
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.