Monday, March 26th, 2007

ShadedBorder: JavaScript Round Corners with Drop Shadow

Category: JavaScript, Library, UI

<p>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

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

Shaded Border

Related Content:

Posted by Dion Almaer at 6:06 am
17 Comments

+++--
3.9 rating from 107 votes

17 Comments »

Comments feed TrackBack URI

Nice one, quite handy lib.

Comment by Evgenios Skitsanos — March 26, 2007

Great Fx. But the scrolling on the example page isn’t very smooth.

Comment by Delapouite — March 26, 2007

I recently found a cross browser way to do a rounded corner with transparency and drop shadow. The trick is to use a PNG image with a style sheet. You can create a table and for the top left corner use the following for CSS class.

.roundedDropShadowTopLeft {
width : 9px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/dropshadow_top_left.png’,sizingMethod=’scale’);
background-image : url(../images/dropshadow_top_left.png);
background-image : expression(‘none’);
background-repeat : no-repeat;
}

IE DOES support PNG as of 5.5 but you just have to use the filter in css. The first backgroud-image is for Firefox, the second is recognized by IE and turns off the first one meant for IE. I have tested this in Firefox 2.0
and IE 6. Anyone else care to give it a shot?

Comment by Michael Connor — March 26, 2007

Ok, so I guess the whole concept of separating content and style via CSS is just a thing of the past, huh?

Oh wait, that’s right! This still does require the use of CSS. It’s just cooler because now we get to use Javascript to clobber the DOM!

Yeah I get it now! … Uh, no… actually I don’t… Or…?

Comment by Juergen — March 26, 2007

When the first word in the post is a typo, I officially stop reading. Rouding. Really?

Comment by Dan — March 26, 2007

@Juergen: Concerning the DOM – yeah, right you are, it’s a real browser-benchmark ;-). But, you don’t see the generated DOM elements in the markup, which is nice regarding the semantics of your page, e.g. when search engines have a look at it.

Actually, using a JavaScript solution usually results in less markup than any CSS solution (wrappers and stuff). As the features state, the JavaScript is non-obstrusive, i.e. it doesn’t require any additional script tags in the markup, except in the header (and in your on-load event).

@Dan: Thanks for the hint – you may continue reading now…

Comment by Steffen — March 26, 2007

Um, isn’t it almost time to move beyond JavaScript for rounded corners and drop shadows? If you know your visitors are using WebKit (and soon, Safari), you can just use the CSS3 specs implemented in WebKit:

Drop shadows
Rounded corners

Heck, Firefox users can see the rounded corners already, just not the drop shadows… though I don’t think they’re far behind. I’m not even going to speculate on when you-know-who may implement CSS3, but frankly, who cares? They just won’t see rounded corners or drop shadows, but my code will be a heckuva lot cleaner and lighter just using a few CSS3 styles.

Certainly, anyone with serious JavaScript skills should start thinking beyond these two old parlor tricks and start doing something more meaningful.

Comment by Leland Scott — March 26, 2007

Resizing the window on Safari completely froze my browser for about 30 seconds (replacing the screen with a white page) on an intel MacBook.

So that’s something you might want to look into.

Comment by Tobie Langel — March 26, 2007

I agree that it would be nice to see a JS library that brings CSS3 to all browsers, so that the developer can just use regular CSS for rounded corners, drop shadows, or even multi-column text blocks. Working with this approach is forward-compatible and would actually be quite useful since it would mean we can play with the CSS3 feature-set now.

Comment by Mike Ritchie — March 26, 2007

@Steffen

They’re just pushing what JS can do at the moment. If it goes into the presentation arena, so be it. CSS still hasn’t gotten to a point where it can be applied to a wide variety of situations to the same degree as which JS currently enjoys.

Plus, I see this particular usage of JS in presentation as being particularly useful for user interfaces. Let’s see what else can be done, shall we?

Comment by Rayne Van-Dunem — March 26, 2007

Hmm, most of it doesn’t work in IE6 according to the descriptions. Which is what 90% of people seem to use. That’s handy

Comment by John Burton — March 27, 2007

It makes me crazy that so many people are still using ie6.

Comment by Richard Kimber — March 28, 2007

Confused – it absolutely trashes Safari on my Intel. Safari freezes up and it renders after about 10-15 seconds… after every action.

Seems fine in Firefox.

Not sure if I could trust this code… but very impressed with the results.

Comment by The B. — March 29, 2007

Yea, very impressive but kinda laggy like prototype.

Comment by Tapety — March 30, 2007

I used it in my blog.

Comment by Web — April 6, 2007

very good !
thanks !

Comment by CodeBit.cn — May 17, 2007

Can’t wait till all browsers use CSS3!!

Comment by mgwalk — March 27, 2008

Leave a comment

You must be logged in to post a comment.