|
Simple Rounded Corner CSS
Boxes |
| |
In November 2003, I invented
an
interesting CSS technique for semantic,
rounded corner boxes using CSS. What that translates into
non-geek-speak is that you get pretty boxes with no extra bulky
XHTML markup. David Shea liked it and blogged it. Jeffrey Zeldman
refused to publish an article because I had asked for some feedback
from the folks on the CSS-Discuss list (from whence Dave got the
blog reference) ... he considered it "already published". This was
just as they were working on their earliest rounded corner box
articles and before they were published. As I recall, even Eric
Meyers commented on CSS-D that he liked it and might even use the
technique ... the highest praise possible from an aspiring
CSSer! |
| |
There were challenges though, as
became quickly evident from the (even to this day) weekly inquiries
from around the planet |
| |
- It
requires two images to come up with the appearance of one ... not
instantly intuititive. Why not one for each corner, for
example?
- It
used some pretty tricky CSS chock full of padding, negative margins
and IE hacks-a-plenty. Even I have a tough time following and have
to futz to get right when I deviate from the "recipe" ... probably
not what you should call a "good sign".
- My
original demo images were only really meant for no more than a few
hundred pixels wide. So I got lots of questions about huge gaps in
the boxes when used full screen on an 2484x1652 resolution page (or
maybe it was just 1024x768...).
- Worse, I hadn't done much Photoshop teaching since doing the
technical edit for Random House on The
Official Guide for Adobe Photoshop 2.5
and visiting Kai Krause at the HSC offices in
Santa Monica. Yes, version 2.5 ... and yes the guy of KPT
filter fame.
- Did I mention a lot of folks asked me how to make
images?
|
| |
But I digress ... I devised the
hypothesis that if I could do it with only one really big sample
image and a max of five CSS rules for the basic structure, then I
would be able to stop sending folks email along the lines of, "I'd
really like to help out but I don't really do Photoshop tutorials
and Google can probably help you figure it out... and yes I'm aware
there's a massive gap on your monitor that's large enough to show
two HD-res movies side-by-side". |
| |
Then I promptly did the one-image
version of it (in early 2004, mind you), never finished documenting
it, continued to get emails from folks asking when, and eventually
started working on a little CMS project that's kept me pretty busy
since then. This morning, I finally managed to get down to my
five-rule goal! (Actually, I made the part up about the five-rule goal ... but
it's pretty cool that much got cut out nonetheless! Jason Fried is
right: sometime "less is more".) |
| |
Notwithstanding the meandering
trivia above, today I finally present the long-promised update to
the original "ThrashBox" technique, with a more semantic name:
Simple Rounded Corner CSS Boxes. Give "credit" (ahem) to
"Big John"
Gallant for the original name, as he
insisted it be "ThrashBox". Since he is
the man when it comes to figuring out sticky CSS situations, and
helped work around some tricky IE shenanigans in the
original, I reluctanly acquiesced. I promise to be stronger
next time! :p |
| |
For those of you that haven't seen
it, you can make boxes that look like the following (or
better/worse) with this technique. The neat thing is that they
expand and shrink automatically to fit your content and the XHTML
markup is really light:
 |
| |
So let's just start right in...
Imagine, if you will, the following
markup: |
| |
|
This is a header This is for your
content.
|
| |
Now, for the CSS ... much more
svelt and the bare minimum of hacks in hopes it pleases the
anathema that is the future IE7: |
| |
|
/* set the image
to use and establish the lower-right position */ .cssbox,
.cssbox_body, .cssbox_head, .cssbox_head h2 { background:
transparent url(http://www.modxcms.com/YourImageHere.png) no-repeat
bottom right; } .cssbox { width: 335px !important; /* intended
total box width - padding-right(next) */ width: 320px; /* IE Win =
width - padding */ padding-right: 15px; /* the gap on the right
edge of the image (not content padding) */ margin: 20px auto; /*
use to position the box */ } /* set the top-right image */
.cssbox_head { background-position: top right; margin-right: -15px;
/* pull the right image over on top of border */ padding-right:
40px; /* right-image-gap + right-inside padding */ } /* set the
top-left image */ .cssbox_head h2 { background-position: top left;
margin: 0; /* reset main site styles*/ border: 0; /* ditto */
padding: 25px 0 15px 40px; /* padding-left = image gap + interior
padding ... no padding-right */ height: auto !important; height:
1%; /* IE Holly Hack */ } /* set the lower-left corner image */
.cssbox_body { background-position: bottom left; margin-right:
25px; /* interior-padding right */ padding: 15px 0 15px 40px; /*
mirror .cssbox_head right/left */ }
|
| |
Now, for a live example, using the
relevant CSS above. |
| |
- You have a large box with a drop shadow you
want to use as your maximum sized box (800px by 800px @ a
whopping 5Kb for a 24-bit .png). Make sure this image is taller and wider
than the largest box you anticipate you'll
need.
- The side margin is 15px on the outside of the file up to the
"real" box edge (not including the drop shadow).
- You want 25px of interior padding on the box.
- You want the edge-to-edge box dimensions (omiting the outside
padding) to be 320px.
|
| |
These three critical measurements
are indicated by the blue (max image), red (box) and green (inside
content live area) bars below above the actual
box: |
| |
|
|
| |
"real"
box dimension (320px) |
| |
interior
"live area" (270px) |
| |
Simple CSS Rounded Corners Rock
This is a short sample paragraph.
And
another one, only it's not as short, as you can see. We'll see how
much you really like this when it's all said and done.
And if you're reading this
far, don't you think you have much better things to do than reading
inane commentary? Like feeding your pet Beta. Speaking of Betas, I
had one once and failed to come home when pulling an all-nighter at
the office. Arriving home to discover a dried, purple fish, no
longer flopping on the floor. True
story... |
| |
|
|
| |
So there you have it! Part 2 will
cover the math behind the madness, come with a fancy 3D-box model
type Illustration made popular by über-designer
Mr. Jon
Hicks himself, and might even offer a
few other examples. Part 3 will attempt a fluid-version of the
box, with an even bigger
image! And Part 4 will sum it all
up, with bonus material of a discussion of some cool things that
MODx lets you do with CSS like making dynamic CSS and
registering CSS to the head of a page (used on this demo itself
in fact). Somewhere along the line, I'll include sample .PSD
files to get you started making box images. And based on
historical precedent, you can expect the series to be complete
no later than mid-2008. |