Build Your Own Justin.tv With Ustream »
« BigPond V8 Supercars 2007

ShadedBorder: JavaScript Round Corners with Drop Shadow

Written by on March 26th, 2007 in Ajax News.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Steffen Rusitschka is keeping the rounded corner legend alive with his new RUZEE.ShadedBorder JavaScript library.

Why another?

  • JavaScript-only Photoshop(tm)-like rendering without external images
  • Round corners
  • Drop shadows
  • Glow effects
  • Borders with different widths
  • Full support for liquid designs
  • Anti-Aliasing
  • On-hover support (except for IE 6.0)
  • Disable some of the corners, e.g. bottom-left
  • Change borders on-the-fly
  • Real transparency - looks perfect on any background
  • Cross-Browser: Firefox, Internet Explorer (>=6.0), Safari, Opera
  • Non-obstrusive
  • Leight-weight (7.7KB uncompressed)
  • Fast (0.6s for the example on a 2.2GHz machine)
  • No JavaScript library dependencies

How to

HTML:

  1.  
  2. <script type=”text/javascript” src=”shadedborder.js”>
  3.  
  4. <div id=”round_me” class=”sb”>
  5.   <p>I want to be rounded!</p>
  6. </div>
  7.  
  8. </script><script type=”text/javascript”>
  9.     var border = RUZEE.ShadedBorder.create({ corner:8, shadow:16,  border:2 });
  10.     border.render(’round_me’);
  11. </script>
  12.  

Shaded Border

Source: Ajaxian
Original Article: http://ajaxian.com/archives/shadedborder-javascript-round-corners-with-drop-shadow

Leave a Reply

You must be logged in to post a comment.


Site Navigation

Pages

Recently

Archives