Hi, the name's Steffen and I'm writing about the Web, programming
and all those things coming to my mind. Enjoy your stay.Rounding corners with JavaScript has a long history. Everything started on 16th of March 2005 with Nifty Corners and loads of other libs followed.
RUZEE.ShadedBorder itself is the successor of RUZEE.Borders, which was the most feature-rich round corners library out there. But it wasn’t quite easy to use, was slow, had some browser compatibility problems, etc.
ShadedBorders removes most of these limitations and comes with the following features:
- JavaScript-only Photoshop(tm)-like rendering without external images
- Round corners
- Drop shadows
- Glow effects
- Gradient backgrounds
- Graceful degradation - will look ok if JavaScript is turned off
- Borders with different widths and semi-transparency
- Full support for liquid designs
- Anti-Aliasing
- On-hover support
- 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 (>=9.0)
- Non-obstrusive
- Leight-weight (8.8KB uncompressed)
- Fast (0.5s for the example on a 2.2GHz machine)
- No JavaScript library dependencies
Have a look at the full-featured example, the simple example, or just download the whole library as a ZIP archive (MIT licensed).
Version History
- 2007-12-04 - v0.6.1: Fix transparency on IE7
- 2007-12-02 - v0.6: Semi-transparent fat borders (thanks Ryan) and IE6 hover fixes (thanks NewTrax)
- 2007-10-23 - v0.5: More robust DIV creation, add split borders example for headline/content (for Virsir)
- 2007-10-21 - v0.4: Add graceful degradation, simplify usage, fix IE7(?)
- 2007-10-20 - v0.3: Gradient background support, speed improvements
- 2007-03-27 - v0.2: Fix IE: check boxes inside tables were disappearing
- 2007-03-25 - v0.1: Initial release
How-to
Some steps are required to make your page use ShadedBorder:
Include ShadedBorder to your HTML header section:
<script src="shadedborder.js" type="text/javascript"></script>Next, define an element you want to round. It is important that it does not directly contain text nodes, i.e. text must always be wrapped inside an HTML element (the “p” in this example):
<div id="round_me">
<p>I want to be rounded!</p>
</div>Then, in the header section, create the border object. You can define the radius of the round corners, the radius of the drop shadow and the width of the border.
var border = RUZEE.ShadedBorder.create({ corner:8, shadow:16, border:2 });Note that all parameters are optional, as long as you at least specify one of them. You may also define, which corners/edges should not be rounded. Have a look at the simple example source code for details.
The last thing to do is, to add some JavaScript code directly at the end of the HTML Body which will render the border around the element with the ID “round_me”:
...
<script type="text/javascript">
border.render('round_me');
</script>The radiuses and widths you specified for the border in the header section are one way of customization. The other way is to change colors. You do this in your CSS file:
#round_me, #round_me .sb-inner { background:red; }
#round_me .sb-shadow { background:blue; }
#round_me .sb-border { background:green; }This will give your border a red “inner-style”, a blue shadow and a green border - don’t ever use this color combination - it will look extremely ugly 
The first line is important for graceful degradation (new from v0.4 on): the background for your .sb-inner class must also be set on the element itself - but only for .sb-inner, NOT for .sb-shadow or .sb-border!
Adding some hover effect also happens in your CSS file. The following code snippet will change the “inner-style” of your border to purple, once you hover with your mouse over the #round_me element (hey purple will make this beast look even uglier - yuk!).
#round_me:hover, #round_me:hover .sb-inner { background:purple; }Of course, this will work with “.sb-border” and “.sb-shadow” as well.
Tips
You can use RUZEE.ShadedBorder with the JavaScript library of your choice to get support for CSS-Selectors (e.g. using Prototype, jQuery, etc.). Here’s an example using the $$ function of Prototype to round all child elements of the element with the ID “header” that have the class “tab”:
border.render($$('#header .tab'));Limitations
- Safari 2 seems to get pretty slow when showing ShadedBorder. I’m looking for people with a Mac and some JavaScript knowledge to speed things up. If you feel like you can help, please contact me via my contact form. Thanks!
- Since a ShadedBorder adds DIV elements to the element you round, those elements cannot be UL, OL, TABLE, TR, etc.. Allowed are DIV, LI, TD, TH, i.e. those elements that are allowed to directly contain DIV elements.
February 29th, 2008 at 6:41
[...] ruzee.com - Steffen Rusitschka » ShadedBorder - JavaScript Round Corners with Drop ShadowforumHow to use it http://www.karakas-online.de/forum/viewtopic.php?t=10617 [...]
March 9th, 2008 at 11:01
I am in same problem as 146. Please help me.
March 12th, 2008 at 23:30
I think I found a bug with your shaded border when using a border tile meant to repeat. I was using this for example to create windows that were translucent - by using a tiled PNG of a solid color with opacity for example, 40% black).
When you set the style like:
#myelement, #myelement sb-inner { background: url(tile.png); }
The tile only applies itself to the top quadrants of the generated divs. The bottom-most line (the bottom left, bottom and bottom right area) have no background at all… just transparent.
When you set a solid color they work fine. Setting an ‘opacity’ css sort of works but renders really ugly edges that overlap and acculuate alpha where your inner divs ‘touch’ one another.
Is there a fix/workaround for this? I really would like to use semi-transparent windows, not just solid colors or windows with a top-only fill.
March 12th, 2008 at 23:49
Sorry I jumped the gun on this one. But I found a hack workaround. Since I don’t need top-only gradients but do need ‘translucent’ fills for my elements, there were 2 lines of code in the original shadedborders.js that needed to be modified:
around line 118:
remove background-image:none; near the end of the line. I left the empty string ” …
around line 200:
remove background-image:none; before ‘bottom: ‘…
Doing this will re-apply the background tile to the bottom areas (bottom left, mid and right slices). This only really works correctly for solid filled tiles, since the tile would tend to repeat itself. So it only really applies to using solid but transparent tiles to create a ’solidly translucent’ window. Also, you have to be sure your corner radius doesn’t result in slices ‘overlapping’ or you will see accumulative addition of opacity since it sort of layers up.
Although this usage is limited, I think it should be an option when rendering… since a simple switch could handle whether to make background-image: none or allow it to re-apply the background.
March 13th, 2008 at 19:42
I need some help.
I’m trying to use this work with picasa (export to html).
But then, I come up with a very slow web page, even just for around 50 images. Any help to reduce the load?
I’m using help from the site in #242
March 17th, 2008 at 19:40
hi there,
congratulations on this script. i’ve included it into a wordpress theme i’m working on. it shades fine, however after approx. 5000 or 6000px i stops shading the container i created. any idea why?
March 17th, 2008 at 21:01
nevermind actually… i fixed this myself
for anyone else: located 2049px in the .js and replace with the value of your choice!
March 18th, 2008 at 2:51
http://www.pcmedx.com
I used my own gradient image which works fine in FF, but in IE7 & IE6 it is showing up with the orange border.
You can look at my source freely. Let me know if I am missing something. Thanks.
March 28th, 2008 at 0:42
Clarification of use of jQuery:
var sideBorder = RUZEE.ShadedBorder.create({ corner:8, shadow:16, border:2 });
sideBorder.render($(” JQUERY SELECTOR(S) GOES HERE “));
Using jQuery allows you to apply it to any elements you like, be it elements with a certain class, attribute, position, css value, and just about anything you can think of!
April 2nd, 2008 at 18:51
There seems to be a significant memory leak. In testing with Opera 9.22, I was watching task manager and noticed the Opera.exe process just kept consuming more RAM until the browser crashed.
Other than that specific problem, this is truly one of the greatest rounded corners scripts I have seen.
< Prev 1 … 25 26 27 … 31 Next > Show All
Leave a Reply