ruzee.com - Steffen Rusitschka

Ryan gave the idea and some code for a new ShadedBorder feature. Fat semi-transparent borders:

And thanks alot NewTrax for fixing the hover issues on IE6. It needs a bit more CSS to get going, but will solve any issues. Check out the CSS included in test.html on how to use it.

Ah, right: it’s version 0.6 which has all these features.

NewTrax and loads of others asked about the progress with the Safari 2 performance. Well… There isn’t… Apparently the problems result from the poor rendering performance of Safari 2 when lots of semi-transparent elements are on your page. As for ShadedBorder, there are millions. So maybe it’s a good approach, as NewTrax suggested, to disabled ShadedBorder on Safari 2 - not that bad, at least we’ve got the graceful degradation feature…

Tags: fat transparent borders, shadedborder, ruzee, rounded corners, javascript

Yeah well, it was raining… And I’ll be on holiday for quite some days from Tuesday on - without any computer. So this weekend was kind of the perfect time to hack a little bit on my neat little fun project ShadedBorder.

The result: after version 0.3 yesterday, today comes version 0.4. The new features:

• Graceful Degradation: If JavaScript is disabled, your page will look almost as good as if ShadedBorder could do its job.
• Simplified Usage: You no longer have to manually set the “sb” class to the elements you wish to round.
• New example: Not really a feature, but it may help to see what’s really required to use ShadedBorder. Have a look at the source code of this page.

Plus: maybe the IE7 bug is gone… Not really sure about that, because it seems to depend on how you use ShadedBorder…

Tags: shadedborder, ruzee, round corners, drop shadow, javascript, css

The new version 0.3 of ShadedBorder supports gradient backgrounds:

Have a look at the updated example.

The new feature is quite intuitive to use. You need some one pixel wide gradient background image with any height you like, which when repeated in x direction gives you your gradient (grad.png). All you need to know is the color of the last (bottom most) pixel in this image, let it be #444444 a dark gray in this example.

Then simply add the following rule for each of the elements which should be “bordered” to your CSS style sheet:

#shadowed-border .sb-inner { background:#444444 url(grad.png) repeat-x; }

That’s it. Thanks to Piotr for reminding me that this feature was missing And thanks to all you guys answering questions in the comments section of ShadedBorder - it’s getting kind of a forum, right?

While touching the code I also added an optimization which results in much less DIVs generated and should give quite some speed improvements.

Tags: shadedborder, round corners, javascript, shadow