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.
June 26th, 2008 at 10:58
I’ve never used the caption tag, but accoording specs: - The caption tag must be inserted immediately after the table tag. - Yours is in the td tag. Maybe this is the problem and thus it is not related to shaded borders?
Piotr
June 27th, 2008 at 22:18
Steffen, folks, just don’t start throwing bad eggs at me right away …
what about IE8 ? Doesn’t seem to work there. Tried on http://browsershots.org/
June 30th, 2008 at 18:09
Nice examples, and easy to follow. Will be examining this carefully.
One small issue I notices is in IE7 and browser resizing. If up-sizing to full screen, or down-sizing, one tends to skew either horzontally or vertically. I did a snapshot that can be seen here:
http://www.overtheweb.org/downloads/shadeborder-IE7.jpg
Very nice code.
James Leahy
July 2nd, 2008 at 5:49
Someone more experienced with the script might be able to point me in the right direction to overcome some problems Im having with this script.
#1 Applying one curve class rather than ID to multiple divs within a page.
At present it seems the only way to apply curves to many elements on a page is to target and define each ID individually. This is not very efficient and would negate the saving made using the script in comparison to using png images to achieve the same effect because it would mean unnecessary code bulk.
#2 The script does not allow for defined elements which become redundant.
I have many DIVs within a page to apply the curve effect to thousands of pages dynamically created. Depending on content some DIV elements do not display and if they are defined for the curves but are dynamically not displayed then the script stalls and does not render any following elements.
Am i missing some functionality or has anyone achieved a fix for these situations?
July 2nd, 2008 at 8:34
Hi, I just found your ShadedBorder and was trying to use it, I got to say that it’s awsome, but It only works for me when the ShadedBorder.js file is in the same directory as my index.html. Weired! It will not work if it’s nested in a sub directory (e.i. /js). Is this a bug or is there something I’m doing wrong? I still have not tested it fully but I like what I see so far.
Thanks for the code!
Alex
July 3rd, 2008 at 18:52
Nice code, BUT WHY don’t you explain how to use it???????
You just posted up a half-ass description of how to use it, but don’t go into any details of the specifics…
What is PARTIALID, PARTIALBORDER, etc etc.
We are just supposed to view the source code of your example page and decipher it???
I don’t understand javascript, I spent 5 hours trying to learn your script and it doesn’t work on ff, only ie7.
Man this is just frustrating, almost borderline waste of time.
If you post a script, take the time and make FULL documentation explaining every piece of detail, if you want anyone to actually use your script successfully.
Rich Boy
http://www.TheRichBoy.com
July 5th, 2008 at 22:09
shadowborder.js conflicts with Autocompleter.js on IE. The autocompleter popup window is placed correctly on FF but not on IE. The problem lies with the absolute left positioning of the autocompleter popup. the top positionig is fine.
the js codes can be ound at: http://phpfi.com/329330 and http://phpfi.com/329332
does anyone has a clue about thif absolute left positioning conflict and how to get around it?
Tx
A
July 19th, 2008 at 14:40
I’d like to know if it’s possible to get dashed or dotted border.
And, if so, how to.
Thank in advance.
- - - ShadedBorder is great!!! - - -
Riccardo from Milan, Italy
July 29th, 2008 at 7:46
I modifed your simple demo - changed some colors, text, etc. It ran fine on the latest ver of these browsers:
IE7
FF3
Safari
Opera
Nice to see you designed it so that I can control different rectangle attributes on the same web page.
Very nice work - thank you - I’ve spent many days downloading and installing most of the rounded corners solution out there (with and without images, CSS-only, JS/CSS) and I’ve found NONE that render the same on all 4 of these browsers except for yours!
RalphF
July 30th, 2008 at 17:58
Having the latest jquery installed prevents any of the examples working correctly in full-featured example except the first which is shadowedborder.
In other word when jquery present:shadowedborder works, all other example does not!!!
You can see the example what Im talking about at:
http://weboldal.biz/temp/test.html
If I take out the jquery, the script works the way it should. Anyone can tell me why?????
Please, Im not familar that much with javascript, and jquery has to be present for other applications!
Gabor
< Prev 1 … 30 31 32 … 35 Next > Show All
Leave a Reply