RUZEE.Borders
RUZEE.Borders, formerly known as RuzeeBorders, is the first and only JavaScript library for rendering shadows and anti-aliased rounded corners inside a web browser without the designer needing to create background images. You can easily include it into your web site/blog etc. with only minor knowledge about JavaScript.
Features
- Border style definition via CSS and CSS-like JavaScript
- Anti-aliased rounded corners similar to the successors of Nifty Corners
- A symmetric shadow similar to the ones of Mac OS X
- Configurable border widths
- Outside as well as inside background image support (gradients)
- A kind of glow which is based on the shadow feature with a configurable color
- A fade effect which lets the border color fade into the background color
- All that at every edge/corner or only at some of them
- Works on all modern browsers, even Opera and Konqueror
- Colors and layout of the borders are defined in the CSS - if JavaScript is disabled your web site looks like its cubistic twin ;-)
Supported Browsers
These are the browser I'm testing my releases with (and others may work as well):
- Internet Explorer 6.0
- Firefox 1.5
- Safari 2
- Opera 9
- KDE Konqueror 3.5
Usage
When rendering borders, CSS is used for all border style settings that can be definied via standard means. These are: border-width, border-color, etc. Here's an example CSS fragment:
#myborder: {
border: 2px solid red;
background: blue;
padding: 10px;
}
If you have an HTML element with the ID 'myborder' in your HTML document, it will show up blue with a 3px wide, red solid border. This is the standard CSS way and works without RUZEE.Borders (of course ;-)). Make sure to always apply some padding, because RUZEE.Borders will "eat" some of it!
All style settings that are not available in the current CSS standard, i.e. everything that RUZEE.Borders need to round, shadow, glow, etc., have to be set via a CSS-like JavaScript code fragment in your page. Check out the tutorial or the example HTML file for details on how to do that (included in the download ZIP file). For now, have a look at the following examples - the borders you see are rendered by the definition inside - the value before the colon is a CSS selector, the values after it the style settings.
Draw a simple border with the corner radius of 4 pixels around the HTML element with the ID 'rbex1':
Draw a glowing border with an edge radius of 4 pixels and a blueish glow that has a width of 5 pixels around the elements with the ID 'rbex2':
Draw a border with a corner radius of 4 pixels and a shadow with the width of 5 pixels around the element with the ID 'rbex3':
Draw a border with a corner radius of 8 pixels that fades out to the color of the background around the element with the ID 'rbex4':
Draw a simple border, but round only the left/right bottom ('l'=left, 'r'=right, 'b'=bottom):
Draw a simple border, but round only the left on bottom/top bottom ('l'=left, 't'=top, 'b'=bottom):
Draw a simple border, but round only the top left corner ('l'=left, 't'=top):
All borders can have a background image inside. It will be aligned to the top and can only be drawn inside the upper border. But together with repeat-x, this limitation isn't as bad as it seems - it's perfect for all those nifty Web 2.0 style gradients ;-). This example shows, that the image is really in the top of the border - clear gradients are possible this way.
Simple borders can be put on top of a background image using pseudo-transparency. I've decided to not use the CSS3 opacity or similar techniques due to the reasons described here, which means that you have to set a background color "similar" to the color of your background image:
As you can see, you do not need to specify any color values at all for the border, background, etc. only for the glow where there is no CSS style value that could be "misused" for that issue...
In the examples above, only ID based CSS selectors were used. The library included supports all the things you know from CSS and more (have a look at the credits section).
Download
Feel free to download RUZEE.Borders v0.16.1. The license is included in the archive, it's MIT-style. Have fun playing around with the lib and if you have any suggestions, bug fixes, etc. please comment at the end of this page.
Credits
For the CSS-like selection of DOM elements, I'm using a CSS level 2 customized version of Dean Edwards' cssQuery, thanks for this cool piece of code!
I'm also using a JavaScript CSS color converter that I stripped down to my requirements - cheers go to Stoyan Stefanov for that.
Tips and Tricks
To speed up the loading time of your page, especially if there are lots of images or IFRAME ads (e.g. Google), use the domload event of RUZEE.Events.
If you are using the Google Web Toolkit and want to add rounded corners to your site, check out the RUZEE.Borders based rounded corners component by Alexei Sokolov.
Internet Explorer displays a page very soon. If you want a blank page till RUZEE.Borders finished rendering, add the following lines to your page code:
CSS (hides HTML body when JavaScript is enabled):
* html body { display:expression('none'); }
HTML/body.onload():
RUZEE.Borders.render(function(){
// rendering finished, now show the body
document.body.style.display='block';
});
You can instantiate RUZEE.Borders.Border directly and call its render() method, if you know the DOM elements you want to put borders around. That's ideal for 3rd party libs using RUZEE.Borders (e.g. GWT, hint!!! ;-)).
For "askew" corners, e.g. let only top-left and bottom-right be rounded, but the other two right angle, have a look at the Emad Workaround.
A nice design idea came from Simon - put your inner title on top of your corners.
Known Bugs and Limitations
Quirks Mode is not supported.
!!! Floated elements inside a rounded border have to be positioned relatively (i.e. style="float:left; position:relative;") !!! Not doing so will mess up Internet Explorer's rendering completely (The Peekaboo Bug is responsible for that).
If you want a DIV with a fixed height, heights have to be specified via CSS and the height attribute of a RUZEE.Border (via RUZEE.Borders.add(...)
), because the height of a DIV cannot be read from the CSS properties reliably on all browsers.
Konqueror has a bug when getting the styles for an element. RUZEE.Borders try to calculate the background color recursively until they reach an element with a non-transparent background. Konqueror unfortunately returns #000000 when the background is transparent. Hence #000000 is interpreted as transparent. If you want a black background using #010101 in your CSS is a possible workaround - assuming "almost black" is ok for you (see also my blog posting on that issue).
Version History
- v0.16.1 (2006-10-06):
- v0.16 (2006-09-30):
- Fix IE elements jump bug reported by Russ.
- Refactorings, made most of the internal methods really private.
- v0.15 (2006-09-15):
- Loads of bug fixes with the newly introduced 0 padding feature of version 0.14 (overflow no longer needed, but take care of floated elements inside a rounded border, see limitations section). This should fix some of Adam's problems.
- v0.14 (2006-08-25):
- The top border gets anti-aliased even when a background image is set. Looks better with most gradients.
- Add the "Jakob feature": Paddings can now be definied in em, in, cm, etc.. I'm heavily using negative margins now - please tell me if this makes any trouble (see Limitations section). One side effect: You don't have to use paddings anymore and work with margins on your inner elements which is much cleaner.
- Removed Quirks Mode support.
- v0.13 (2006-07-08):
- Fix Chris' height bug - when the height definied in JavaScript was "too less", sometimes RUZEE.Borders tried to set a negative height which IE didn't like...
- Some clean-ups in the CSS style retrieval code.
- v0.12 (2006-07-01):
- The RUZEE.Borders.render() method is potentially asynchronous now. Fix the "unresposive script" error message of Firefox. If you need to do things AFTER the rendering finished, use the new onfinished parameter - that's a semantic change in the API, please be aware of that! This also applies to the IE "blank page" tip.
- v0.11 (2006-06-04):
- Widths of the bordered elements get no longer lost.
- Pixel heights can be specified via the "height" property in RUZEE.Borders.add().
- Seb's workaround is no longer needed while still maintainig the simon feature.
- Some speed optimizations.
- v0.10.1 (2006-05-29):
- Remove the ugly alert box in cssQuery...
- v0.10 (2006-05-28):
- A new CSS-like JavaScript based API has been introduced. It is much cleaner than the old API, especially when you are used to CSS. The old API is still available (backward compatible), but will probably be removed in future versions.
- Tweak the padding adjustment for borders that are only rendered top or bottom.
- v0.9.1 (2006-05-21):
- Remove a bug fix that broke the simon feature. The fix was for Seb's problem (ugly gaps between the top/bottom of the border), which now has to be solved via a workaround in the HTML source (see link).
- v0.9 (2006-05-21):
- Support for background images inside the border DIV, currently limited to repeat-x backgrounds at the top - which is perfect for Web 2.0 style gradients.
- Less DIVs are generated and no more floats are used, which speeds things up again and solves DarkAngle's problem (partly I guess...).
- Fix a bug when there was no background color set in for "inside the border" and also for no background color set anywhere outside the border on Firefox.
- The Firefox top right pixel jog bug no longer exists as RUZEE.Borders no longer use floated elements.
- Already in 0.8 but not documented: The .class based selection of elements now also works with IEs <6.0.
- v0.8 (2006-05-13):
- Cache the corners already draw, reduce the number of DIVs -> speeeeed! Cheers, Simon, for the hint.
- Cache for getElementsByClass (the .className feature). Source out into a seperate JavaScript file - please don't forget to include it!
- Documented the Firefox speed-up trick.
- First release under an MIT license.
- v0.7.3 (2006-05-11):
- Let the inner DIV no longer be "overflow:hidden" - fix the "Simon" bug.
- v0.7.2 (2006-05-09):
- Fix a NullPointerException in rzGetStyle - the "Lolita" bug ;-).
- v0.7.1 (2006-05-05): only seconds after 0.7 ...
- Bug fix for 0px borders (e.g. style="border:none") not having been anti-aliased correctly.
- v0.7 (2006-05-05):
- Support for border widths via the corresponding CSS property (e.g. style="border: 4px solid green").
- Bug fix for IE padding adjustment being 3 pixel off left and right when rendering non-simple borders without the top edge.
- v0.6 (2006-04-26):
- Support for pseudo-transparency of simple borders - usefull if you have a bordered element on top of a background image.
- Bug fix for HTML elements inside the border having margins splitting the border top and bottom (thanks to Seb for sending me the bug report and a test case).
- Removed support for Internet Explorer 5.0 - it got broken with one of the last releases and I just realized... Is there anyone missing it?
- Removed official support for Firefox 1.x due to the lack of an installed browser - it should work if it works on version 1.5...
- v0.5 (2006-04-17): Changes are
- The API has changed! The glow/shadow color is no longer passed via .draw(), but via the constructor (i.e. the rcCrXxx methods).
- Support for different edges to not being rounded. This is done via the .draw() method, e.g. it is possible to instantiate a border once but draw different edges with it.
- Added documentation for the fade feature (and did some clean-ups before).
- v0.4 (2006-03-31): Back to the old versioning scheme - forget about 0.30 ;-) Changes:
- No more "flipping" - RuzeeBorder now leaves the layout as it is by modifying the padding of your DIVs. This results in a much cleaner site impression. But... it seems to buggy on IE.
- Support for classes via ".classname" (rzGetElementsByClass is no longer needed, see example.html)
- Support for XHTML pages
- v0.30 (2006-03-19): Workaround for Safari transparency (rgba color strings) which caused white backgrounds sometimes - Thanks to Sebastian for the VNC connection to his Mac mini.
- v0.2 (2006-03-04): Fixes Internet Explorer 5.5 ("font-size: 1px;" hack) double height bug, a bug when using fixed widths (was an Internet Explorer issue), and a "NullPointerException"
- v0.1 (2006-03-01): First release
Additional Information
Get the latest version of RUZEE.Borders at Steffen Rusitschka's Blog.