Computers, Software, Web

Easy Rounded Corners

I have worked with NiftyCube in the past, and it works (I supposed) well for what it did – making containers round. I had a couple of issues with its implementation however:

  1. It doesn’t leverage any Javascript frameworks, so the code is larger than necessary. Also, despite its size, little of its internal functionality can be reused elsewhere.
  2. It relies on inserting table cells to give the illusion of rounded corners. A 25px rounded object needs to insert 12 different table rows – so the HTML gets ugly fast.
  3. Its implementation was clunky. I found it necessary to load an external stylesheet to format the newly created table elements, as well as hardcode the path to this stylesheet, since I have no idea where it is pulling it in from relative to the Javascript file.
  4. The choices for rounded sizes are limited to small, medium, large – and nothing in between.

However, we live in an era of evolving Javascript, and our alternatives are getting better. I recently found Nurey Corner’s – an extension to the Prototype / Scriptaculous frameworks. Its implementation is clean as can be:

document.getElementsByClassName("round").each( 
  function(x){ 
    new Effect.Corner(x);
  }
);

I am happy to report that it addresses all of my concerns about NiftyCube above. Give it a try!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s