Comments on: ShadedBorder: JavaScript Round Corners with Drop Shadow

By: mgwalk

mgwalk — Thu, 27 Mar 2008 12:54:38 +0000

Can’t wait till all browsers use CSS3!!

By: CodeBit.cn

CodeBit.cn — Fri, 18 May 2007 04:35:05 +0000

very good !
thanks !

By: Web

Web — Sat, 07 Apr 2007 00:46:59 +0000

I used it in my blog.

By: Tapety

Tapety — Fri, 30 Mar 2007 09:05:11 +0000

Yea, very impressive but kinda laggy like prototype.

By: The B.

The B. — Thu, 29 Mar 2007 12:39:39 +0000

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.

By: Richard Kimber

Richard Kimber — Wed, 28 Mar 2007 10:55:57 +0000

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

By: John Burton

John Burton — Tue, 27 Mar 2007 07:13:28 +0000

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

By: Rayne Van-Dunem

Rayne Van-Dunem — Mon, 26 Mar 2007 22:42:56 +0000

@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?

By: Mike Ritchie

Mike Ritchie — Mon, 26 Mar 2007 22:00:13 +0000

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.

By: Tobie Langel

Tobie Langel — Mon, 26 Mar 2007 21:37:04 +0000

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.

By: Leland Scott

Leland Scott — Mon, 26 Mar 2007 19:44:01 +0000

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.

By: Steffen

Steffen — Mon, 26 Mar 2007 17:30:16 +0000

@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…

By: Dan

Dan — Mon, 26 Mar 2007 17:27:03 +0000

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

By: Juergen

Juergen — Mon, 26 Mar 2007 15:56:40 +0000

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…?

By: Michael Connor

Michael Connor — Mon, 26 Mar 2007 15:27:34 +0000

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?

By: Delapouite

Delapouite — Mon, 26 Mar 2007 12:14:58 +0000

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

By: Evgenios Skitsanos

Evgenios Skitsanos — Mon, 26 Mar 2007 11:23:17 +0000

Nice one, quite handy lib.