[jQuery] Rounded and beveled corners

[jQuery] Rounded and beveled corners


> Can either of you kindly explain what the code does?
All the corner-adorner scripts that I studied work similarly. They create
the illusion of a rounded (or other effect) corner by overlaying parts of
the adorned div with a color that is the same as the parent's background
color. (BTW, that means that all of them look really bad when contained by
an element that uses a background image.) The approach I chose, also used by
Nifty, is to overlay the element with "strips" that use the parent color at
their left and right borders. The gpc() function retrieves the parent's
color, or moves up the document tree until it finds an element with a
non-inherit non-transparent color.
> 1. what does the "var opts" stuff do ?
The opts "parses" the input argument using regular expressions to see which
corners you want to process. You can specify any of top, bottom, tl, tr, bl,
or br; if it doesn't find any of those it assumes you want to process all
four corners.
> 2. What does all the Math stuff do?
Round corners involve trig functions. Each corner is a quadrant of a circle,
with the the radius of the circle being the width you specified (or the
default 10px). Each strip's border width depends on the x component (cosine)
of the angle. To figure out the angle, I determine the y height of the
current strip and get the arcsine of that. That's what this expression does:
> Math.round(width*(1-Math.cos(Math.asin(i/width))))
The border width we need is the part *outside* the circle, that's why the
calculation is width-width*cosine(angle) or simplified,
width*(1-cosine(angle)). It's hard to explain in words, but it is pretty
clear if you draw a picture of the upper left quadrant of a circle and see
how the x and y relate.
> 3. How are beveled corners generated?
The bevel case is easy. Let's say you specify a 5px width for the top
corners. That will require 5 strips. The topmost strip will have a 5px
border on the left and right side. The next strips will have 4, 3, 2, and
1px borders--that is, they get wider. The resulting effect is a 45 degree
bevel. It works the same for the bottom, only in reverse.
By the way, this is the best example of nice corner effects I have seen:
http://www.cssplay.co.uk/boxes/krazy.html
Some of those box effects are difficult to duplicate in a general way
though. He's doing it through extra markup and lots of CSS. I would really
want .corner() to figure out the border colors and widths automatically
rather than making the user specify it somehow.
-----Original Message-----
From: discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] On
Behalf Of jquery@vikas.mailshell.com
Sent: Monday, April 03, 2006 7:00 PM
To: discuss@jquery.com
Subject: Re: [jQuery] Rounded and beveled corners
-- John Resig <jeresig.at.gmail.com@jquery.at.vikas.mailshell.com>