Hi, the name's Steffen and I'm writing about the Web, programming
and all those things coming to my mind. Enjoy your stay.A Tutorial for rounded corners with drop shadows
There are many ways to do rounded corners on web pages. This tutorial describes a solution based on RUZEE.Borders. It shows how the web page has to be structured and how to add a drop shadow to an HTML element - everything without using any pre-rendered images.
Step 1 - HTML/CSS basics
We’ll start with a simple HTML page. The body of the page is pretty simple:
<div class="bordered"> <p>This is the paragraph</p> <p>This is another paragraph</p> </div>
The DIV, which has the class “bordered”, is used to define the width and the style - in our example for drawing a border around. There are two paragraphs in this inner DIV, basically to add some text so we’ve got something to read ;-).
The definition of the class, i.e. the definition of the style of the HTML elements on the page, takes place in an internal Cascading Style Sheet (CSS):
.bordered {
width:200px;
border:3px red solid;
padding:30px;
}
The DIV will get the width of 200 pixels by the class definition “.bordered” (which is a CSS selector). It will also get a solid red border with a width of 3 pixels and a padding of 30 pixels which lets the text inside have some spacing to the red border. This padding will be important later on, when we round the border. Ah, right - of course up to now, the border is not rounded and there’s no shadow. We’ve just used basic HTML/CSS methods to get our result.
See how the whole page looks like here (and view the source code, of course ;-)).
Step 2 - Let the script round it
To round the border, RUZEE.Borders and its dependencies have to be included. This is done with the following lines in the header of the HTML document:
<script type="text/javascript" src="cssquery2-p.js"></script> <script type="text/javascript" src="ruzeeborders.js"></script>
The first line includes cssQuery, a library by Dean Edwards that makes CSS selectors usable via JavaScript. The second line includes RUZEE.Borders.
Once the scripts have been included, they can be used via “self-made” JavaScript code. So, let’s round the border from “Step 1″ now:
RUZEE.Borders.add({
".bordered" : {
borderType:"shadow",
cornerRadius:15,
shadowWidth:10
}
});
As you can see, this looks similar to the CSS definition. We see the CSS selector “.bordered” again and the meaning is just the same as within CSS: all properties afterwards will be applied to the HTML elements matching the criteria. In our example, this is the one DIV in our page.
It will get a shadowed border (borderType:"shadow") with a corner radius of 15 pixels and a shadow width of 10 pixels.
The image on the right explains these terms. The corner radius is the number of pixels from the center of the corner to its border (inclusive): “c” in the image.
The shadow width is the number of pixels from the border (exclusive) till the shadow is completely faded out: “s” in the image.
The previous code snippet however doesn’t do the actual rendering of the round borders. It just defines how to do that. The rendering is done via RUZEE.Borders.render(), but before rendering can start, the web page has to be loaded completely.
JavaScript has an event for this: window.onload. Inside this event you can add your code. You have to do the following:
window.onload=function(){
RUZEE.Borders.render();
};
That’s it! You’ll now see a nice round border with a drop shadow on your site. Try it (and again have a look at the source code)!
As has been mentioned in “Step 1″, it is very important that you add some padding to the elements you want to round. This is because RUZEE.Borders draw themselves “into” the padding area and hence use some of the padding. As a rule of thumb the padding should be at least “corner radius + shadow width” pixels. But add some more pixels so the text will still have some spacing to the border, even when rounded.
July 31st, 2006 at 20:55
IE has a horizonal gap. How do I eliminate this?
August 3rd, 2006 at 21:15
Do you have a screenshot for this? Its an unknown problem to me…
August 9th, 2006 at 19:19
Hi,
I’ve got a problem with the heigth parameter is there any way to use % instead of pix, my table/cell is first loaded at a certain size (the content of this table is small), then the user in a left menu select something to update the content of this table/cell, this content is longer than the previous one, but it doesn’t change the size of my table/cell it just add a scroll bar ?
Thanks
David
August 9th, 2006 at 20:57
@David: Percentage heights are not possible. RUZEE.Borders have to add/subtract some pixels from the height you specify and adding/subtracting pixels from percentages is … well .. kind of hard
If you need “fluid, identical heights”, check out my posting on that issue.
August 21st, 2006 at 3:37
Great script. I applied it to a web site I maintain and did also notice a horizontal gap in IE as mentioned in the first post. See the box in the middle of the page of http://www.ledomedesprit.com/. The gap is just below the top corners of the box.
August 21st, 2006 at 4:03
PS, here’s a screen shot for the gap issue, using your own demo page. I’m on IE 6.0, windows XP SP2.
August 21st, 2006 at 18:27
Your screenshot looks extremely strange. It seems that your IE scales the pixels. It’s not just the gaps that worry me, it’s the whole rendering of the border. Do you have something like a “magnifying glass” IE extension installed? I know that Opera can do this, but my tests with Opera were ok…
August 21st, 2006 at 22:59
My IE install is just the out-of-the-box one; no extensions of any kind. I don’t normally use IE, but use FireFox and Opera in stead. There’s something strange in general with images on any webpage in IE on that particular notebook (Dell Inspiron): they look very pixelated. So I suspect it’s not something specific in your script. Anyway, your borders look great on every other browser/PC I tried.
December 11th, 2006 at 21:03
confused about step 2.
Where should add those codes?
thanks,
Kevin
December 28th, 2006 at 1:12
Looks great; THANKS!!
I have a few suggestions/complaints/requests (feel free to ignore, but …):
1. I need some docs! For example, can I round borders on only the top (or bottom)
of an element?
2. I’d rather see only a single global name; for the most part, you do this (RUZEE);
but there are a few stray functions (rzCC, rzGetStyle, etc.); couldn’t these be
properties of the RUZEE object?
3. Adding a method to a native object (Math.sqr) feels unfair. It’s just as well to
define the sqr method as a property of the RUZEE object, and then there’s no
pollution of anybody else’s namespace.
January 1st, 2007 at 15:07
Hello This won’t work with me can somebody help me with what i’m doing wrong?
see code below
Untitled Document
0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i
content_right
content
January 2nd, 2007 at 12:47
This is so cool! I got it to work in no time. Thanks for sharing this!
January 12th, 2007 at 20:20
This is great! Are there any answers to compatibility issues in ie 5 for mac? The shadows don’t show up correctly. It looks great though….
January 17th, 2007 at 18:04
It works fine now, it didn’t work with bodyOnLoad.
Very nice
thanks
February 7th, 2007 at 17:32
This’s variant don’t work with images on background? Why?
February 18th, 2007 at 5:04
[...] RUZEE.Borders (here) [...]
February 23rd, 2007 at 19:30
Hi Steffen,
This is really great and simple to understand. I have been trying to shadow the borders of our site, but could’nt do it. Now after reading this article I feel I can do it now. I will give it a try as shown in the article.
Regards,
3DCADResources.com
March 11th, 2007 at 13:41
WOW! This is lovely!
These are BY FAR, the nicest rounded corners I have seen yet.
Thank you for your work on this, Steffen.
It’s just too bad the viewer can see the corners for half a second before they are redrawn
That’s the same problem with nifty cubes as well.
September 3rd, 2007 at 8:12
Nice effect - is there something that prevents elements inside the shadow box being clicked
? I’m trying to apply these styles to a little popup div that has a tiny close button on top right, and the close doesn’t work. (the close button is really an image with an ‘onclick’ method)
if the close button is in the middle of the box, it works, so i’m guessing it is the positioning of the close box at the top right that causes the issue, but i can’t quite figure it out…
February 26th, 2008 at 0:42
That is aweseome. I stumbled upon this recently and got it to work in no time what so ever. this is something that would be a huge benefit to the drupal community.. put together a module. If not let some one else do it.
Leave a Reply