clever, i’ve always tried to do it the other way round, with the transparent pixels on the outside of the shape. However, your exmaples don’t allow for a background that may change colour/pattern if the user scrolls the page? they would just get ugly corners. But its still a good technique for use with solid backgrounds
Copy & paste the code below to embed this comment.
Pete Stuart
This works great with definition lists, unordered lists with anchors in them, or anything else with more than one element. But, how can we maintain the semantic markup and round all 4 corners of a <div> box? I run into this problem often with containing boxes. Anyone?
This technique bascially requires minimum of two block elements to position the top and bottom background images. So, this technique must have specific width (in pixels) apllied.
Pete: you can either use Javascript, or you can wait for CSS 3. With Javascript you can build a script that finds divs with a certain class and dynamically add three more nested divs around that div using the DOM – these can then be used to apply background images to each corner in turn. This isn’t ideal, but it’s not really a huge upset if people without Javascript enabled browser don’t get to see a decorative part of your design and at least it keeps your underlying markup clean.
CSS3 introduces the ::outside pseudo-element, which lets you apply as many background images(and other effects) to a single div as you like: http://blog.tom.me.uk/2003/07/14/looking_ahead_to_css3_part_1_the_outside_pseudoelement.php
If you use PNGs, this technique has the potential for greatness in visual effects. No offense to Mr. Cederholm, but the lack of anti-aliasing in the images was extremely noticiable, especially in the last Everest background image. This has nothing to do with his image-manipulating capibilites, but with the GIF format’s 1-bit transparency problem. If you used PNGs, the mountain would have looked stunning.
Of course, thanks to one major browser make (no names, of course), we can’t use transparent PNGs without some hackery. Yet. Michael Lovitt’s article anyone? These two techniques together would be great.
Copy & paste the code below to embed this comment.
Sage
Simon, could you (pretty please) make such a Javascript to achieve the effect that you described? I’ve also been struggling with giving content boxes four rounded corners, and if you could make that script, it’d make my life so much better. I’m sure it’d be a huge hit with hundreds of other CSS geeks too. :-)
Copy & paste the code below to embed this comment.
Chris
Pete, I’ve run into the situation you describe. I think of the problem in terms of requiring a div to have 2 or more background images applied to it (and in your case 4). So essentially, I’ve used one div for each background element. And nested them. For the visual folks like me it looks something like this:
<div class=“TopLeftCorner”>
<div class=“TopRightCorner”>
<div class=“BottomLeftCorner”>
<div class=“BottomRightCorner”>
Your content goes here.
</div>
</div>
</div>
</div>
You position the background element of each corner to it’s respective corner of it’s div.
It’s a big mess but it get’s the job done. Simon is describing a simlar solution above but using an automated process (javascipt) to generate all this code—if I understood it right.
Thanks to A List Apart for an interesting article.
Corners and shapes is always interesting stuff.
No need to limit it to images though.
Recreating what looks like mos-corners can be done by adding divs on top and bottom of text-areas, giving them borders and adjusted margins and background, and trimming everything in place.
Some of what this article shows might also be recreated without images.
You can get CSS-controlled rounded corners and other shapes in a flexible design by using borders only, but the markup is ugly.
Some javascript that could do the job would be much appreciated…
Andrew had said (http://www.alistapart.com/discuss/mountaintop/#c7949): “I think your final example image has the transparency inverted. The Mountain should be transparent, and the sky should be solid.”
No, actually that is the I had intended it—with the mountain (and corners) sharing the same color as the page’s background. As if the mountain was growing into the box… or something.
Very interesting, but how about those people surfing with slow connections & no graphics? I’ve taken an example and looked at it through Opera with no graphics, looks not like it should. Anyway, for future websites maybe connection speed is not as important as at present, what do you mean? CYa!
Sure would be nice if we could have n number of background images….each with their own positioning…
Anyway, enough daydreaming….
This article seems a bit of a rehash of other techniques out there…Still doesn’t seem to be a clear, simple/elegant way of doing rounded corners in a cross browser implementation.
I’ve been playing around with Dean Edward’s IE7 and it’s so very close, only thing is no matter what the fix, IE will not load a transparent image AND respect background. Obviously, Microsoft has no intention of supporting pngs, so tricks like the one described in this article will be necessary. I still have to wonder, what is Microsoft’s motivation to ignore the w3c? Oh right, world domination. Silly me.
When creating images that rely on the background-color – always (as in “everytime”) remember to specify a color for the background too… even if it’s white. :-)
Copy & paste the code below to embed this comment.
ecd
The obvious answer is that they did, in CSS-2: border-radius. A better answer is that “round” is not a valid border style, such as solid, dotted, or dashed. What’s the 3px in your example for? The width of the border or the radius of the curve? Therein lies the problem.
I like this article and its target effect; the only problem lies with patterned backgrounds, as quoted before. Combination of this technique with use of background-position:fixed (and appropriate hackery for IE) could result in a solution to that issue.
Copy & paste the code below to embed this comment.
Brad Bice
I admire your willingness to put another controversial technique for CSS rounded corners out there. I knew this ALA audience would jump all over it in one form or another.
Fact of the matter is, it’s just another technique for adding rounded corners. And it’s a good one at that. It’s simple and innovative, and cuts down on image sizes. Thanks for writing and sharing it.
I have seen the “rounder corner” effect done this way, and the way a few people have suggest (4 divs) before. This one was new to me:
– http://creatimation.net/extra/mtil.htm
Instead of using gif’s, it’s justing div’s with border left/rights to create the effect. This method scales better though since it isn’t locked into a pixel aspect.
Copy & paste the code below to embed this comment.
Hilliard Davis II
I’m new to CSS (i know “stone the newbie”… how, stupid, to attack new comers.) when people give alternative examples, a submission of the difference in code would be very appreciated – instructive as well.
I’ve used this before – its a pretty good technique, but it doesn’t really work with much bigger corners because they would need an images with translucent pixels, which require a matte iirc. But that just means you’d probably want different images for vastly different colors, unless you were fine with the pixelated look.
This is probably the best technique I’ve seen for rounded corners so far. The only problems I see are the fixed width and the fact that you can’t get fancy with the corner (no bevels or anything).
I have done some rounded boxes by using techniques I have found here and there, the markup is perhaps not as semantic as the one in this example and since I wanted bevels I had to settle for a non-generic solution ie I had to make new images for each background color, it works in most browsers though and the markup is not all that “dirty”.
The example can be seen live at http://douglaz.com
Here are two scripts, which allow for the display of transparent fore/background PNG images in IE 5.5+:
http://homepage.mac.com/igstudio/design/css-js-dropshadow/sleights.js
Refer to the evil empire website for the details on using “sizingMethod” attribute (scale, image, crop).
You can also compact the two scripts together, since the detection method for “itsAllGood” variable is identical (I thought I did that, but apparently, I didn’t upload that file)
this is better than any nestled div method hands down, because the markup is clean. To get around fixed width problems, etc, I use every element I can. (ie, what about those <dd>‘s ?) or a menu <ul> with <li>s & <a>s, add a couple class or id specifiers and you have enough elements to work with if your clever and you carefully position and browser test. so, good article, i am sure it will spawn many a experiment.
Copy & paste the code below to embed this comment.
Bob
…but why wouldn’t this work with gradient backgrounds? If the outside edges (creating the rounded look) are transparent, why wouldn’t the gradient background of the page show through? Am I missing something incredibly obvious?
I think this is a great method to achieving the rounded corners effect. In the past I have just used different colored images for my corners, but as you can guess this gets pretty labor intensive when you want to change things up. Thanks for this CSS tip, it is going to make my life so much easier!!!!!
Dave: As Drew McLellan states on his website, Youngpup’s Sleight javascript code “only deals with inline images, not background images,” which is what we need in this case.
Use this one instead: BGSleight – http://www.allinthehead.com/retro/69
Hmm, we do something similar on our site (the homepage), but couldn’t get some of the elements to line up very well together cross browser. As a result we’ve used an extra image where we maybe didn’t have to…
Reading this makes me want to go back and try again…
Copy & paste the code below to embed this comment.
Shakey
“Am I missing something incredibly obvious?”
Yes you are. The corners of the image used are NOT transparent. They are the same colour as the page background. It’s the bits BETWEEN the corners that are transparent to let the underlying background colour show through.
This is why this technique is restricted to single colour background designs.
Actually, if you use quite some more you can skip the background images altogether, as long as you don’t mind not being able to put text in the top and bottom divs that define the roundness.
Example using inline styles and ids just for reading convenience:
The container div only serves as a limiter, you can use whatever you want, the box will of course adapt to whatever width the parent container has.
You can in fact use 3 colors:
– the margin of course uses whatever color or background lies “underneath it”.
– You use the border color to define an outline(like I did) or even a faux 3d button look
– And of course the background-color of the middle div itself.
Copy & paste the code below to embed this comment.
Peter Edwards
I’ve used the code at:
http://www.redmelon.net/tstme/4corners/
to produce rounded corners on divs. I liked this technique because of its simplicity and because it would not interfere with other markup in the page. I tried rolling my own first, but incompatibilities with IE5/Mac frustrated my efforts.
I used this technique a while back (almost 2 years ago now) on the UCE Business School website. Back then it was developed quite nicely, I thought, with ASP generated CSS files, and flash to make titles.
Now, I’m in the middle of talks to get them to let me re-build the whole of the public-facing site in standards based markup.
I used this technique a while back (almost 2 years ago now) on the UCE Business School (http://www.tbs.uce.ac.uk) website. Back then it was developed quite nicely, I thought, with ASP generated CSS files, and flash to make titles.
Now, I’m in the middle of talks to get them to let me re-build the whole of the public-facing site in standards based markup.
I’ve been playing with your mountaintop corners tutorial (fantastic BTW). I wanted to integrate your ideas from the tutorial into a site I’m working on but wanted to use <divs> rather than lists for the markup. With a bit of mucking around I came up with a modification. It’s just a single <span> for the bottom rounded box and it uses the ideas you had for the Fast Company icons (see http://www.simplebits.com/archives/2003/07/24/magic_icons_for_lazy_people_like_me.html) —creating a transparent box and then letting the CSS color fill the background, while the corners are white like the background of the page (or whatever your background color is—that way you can re-use code and only need one set of images.
<style type=“text/css” media=“screen”>
body {
font-family: verdana, helvetica, arial, sans-serif;
font-size: 0.9em;
}
/* Red Box
————————————————————————————————-*/
div#boxRed {
width: 200px; /*width of the box and top image*/
padding: 0;
margin: 0;
background-image: url(top.gif); /*image for the top of the box*/
background-color: #FF0033;
background-repeat: no-repeat;
}
div#boxRed span {
width: 200px; /*width of the box and top image*/
height: 6px;
background-image: url(bottom.gif); /*image for the bottom of the box*/
background-color: #FF0033;
background-repeat: no-repeat;
background-position: bottom left;
display: block;
/*line-height: 6px;*/
}
/* Gray Box
————————————————————————————————-*/
div#boxGray {
width: 200px; /*width of the box and top image*/
padding: 0;
margin: 0;
background-image: url(top.gif); /*image for the top of the box*/
background-color: #CCCCCC;
background-repeat: no-repeat;
}
div#boxGray span {
width: 200px; /*width of the box and top image*/
height: 6px;
background-image: url(bottom.gif); /*image for the bottom of the box*/
background-color: #CCCCCC;
background-repeat: no-repeat;
background-position: bottom left;
display: block;
}
2.a 3-column meta section with the NW, NE corner images at the edges and a potential secondary sidebar in the middle,
3.another 3-column section with a navbar on one side, a logo on the other side, and the main content in the middle,
4.another meta section with SW, SE images at the margins and some text in the middle, and
5.a split footer with contact information in each pane.
I want to move from tables (one for each body section and one for the navbar) to divs and CSS. I’ve seen many ideas for blank exterior div tricks, but what if you want your header/footer, navbar, and logo outside the main client area?
BTW, I raytrace all of my web graphics with this free tool:
http://www.povray.org
It does require some math and practice, but even wacky web button styles can be built.
This is a neat technique. I’m still pretty new with CSS, but no so with transparent rounded images. This could come in handy often, I like how the background images work in CSS…off to play now…
This certainly is not a beautiful implementation of the same idea, but I thought this audience might find it amusing what Windows/ASP.NET folks do when they want to create Rounded Corners… using… of course, non-semantic tables.
http://aspnet.4guysfromrolla.com/articles/072804-1.aspx
60 Reader Comments
Back to the ArticleVladamir
clever, i’ve always tried to do it the other way round, with the transparent pixels on the outside of the shape. However, your exmaples don’t allow for a background that may change colour/pattern if the user scrolls the page? they would just get ugly corners. But its still a good technique for use with solid backgrounds
Andrew
I think your final example image has the transparency inverted. The Mountain should be transparent, and the sky should be solid.
Pete Stuart
This works great with definition lists, unordered lists with anchors in them, or anything else with more than one element. But, how can we maintain the semantic markup and round all 4 corners of a <div> box? I run into this problem often with containing boxes. Anyone?
Lim Chee Aun
This technique bascially requires minimum of two block elements to position the top and bottom background images. So, this technique must have specific width (in pixels) apllied.
Simon Willison
Pete: you can either use Javascript, or you can wait for CSS 3. With Javascript you can build a script that finds divs with a certain class and dynamically add three more nested divs around that div using the DOM – these can then be used to apply background images to each corner in turn. This isn’t ideal, but it’s not really a huge upset if people without Javascript enabled browser don’t get to see a decorative part of your design and at least it keeps your underlying markup clean.
CSS3 introduces the ::outside pseudo-element, which lets you apply as many background images(and other effects) to a single div as you like: http://blog.tom.me.uk/2003/07/14/looking_ahead_to_css3_part_1_the_outside_pseudoelement.php
Rajeev
If you use PNGs, this technique has the potential for greatness in visual effects. No offense to Mr. Cederholm, but the lack of anti-aliasing in the images was extremely noticiable, especially in the last Everest background image. This has nothing to do with his image-manipulating capibilites, but with the GIF format’s 1-bit transparency problem. If you used PNGs, the mountain would have looked stunning.
Of course, thanks to one major browser make (no names, of course), we can’t use transparent PNGs without some hackery. Yet. Michael Lovitt’s article anyone? These two techniques together would be great.
Sage
Simon, could you (pretty please) make such a Javascript to achieve the effect that you described? I’ve also been struggling with giving content boxes four rounded corners, and if you could make that script, it’d make my life so much better. I’m sure it’d be a huge hit with hundreds of other CSS geeks too. :-)
Harry
A very cool alternative to to Ryan Thrash’s ThrashBox. It definitely has a place being used. Thanks
Chris
Pete, I’ve run into the situation you describe. I think of the problem in terms of requiring a div to have 2 or more background images applied to it (and in your case 4). So essentially, I’ve used one div for each background element. And nested them. For the visual folks like me it looks something like this:
<div class=“TopLeftCorner”>
<div class=“TopRightCorner”>
<div class=“BottomLeftCorner”>
<div class=“BottomRightCorner”>
Your content goes here.
</div>
</div>
</div>
</div>
You position the background element of each corner to it’s respective corner of it’s div.
It’s a big mess but it get’s the job done. Simon is describing a simlar solution above but using an automated process (javascipt) to generate all this code—if I understood it right.
Thanks to A List Apart for an interesting article.
Abhi Malani
A little offtopic question here,
Is there something as semi-transparent images. I’ve seen them being used as backgrounds on Divs so as to get a translucent (partially visible)?
Abhi Malani
look. I’ve heard of pngs giving levels of transparency but those guys were using gif images.
(posted before completing)
Georg
Corners and shapes is always interesting stuff.
No need to limit it to images though.
Recreating what looks like mos-corners can be done by adding divs on top and bottom of text-areas, giving them borders and adjusted margins and background, and trimming everything in place.
Some of what this article shows might also be recreated without images.
You can get CSS-controlled rounded corners and other shapes in a flexible design by using borders only, but the markup is ugly.
Some javascript that could do the job would be much appreciated…
Dan Cederholm
Andrew had said (http://www.alistapart.com/discuss/mountaintop/#c7949): “I think your final example image has the transparency inverted. The Mountain should be transparent, and the sky should be solid.”
No, actually that is the I had intended it—with the mountain (and corners) sharing the same color as the page’s background. As if the mountain was growing into the box… or something.
Mikey
Very interesting, but how about those people surfing with slow connections & no graphics? I’ve taken an example and looked at it through Opera with no graphics, looks not like it should. Anyway, for future websites maybe connection speed is not as important as at present, what do you mean? CYa!
Anne
Actually, it perfectly degrades when graphics are off.
Simon
Sure would be nice if we could have n number of background images….each with their own positioning…
Anyway, enough daydreaming….
This article seems a bit of a rehash of other techniques out there…Still doesn’t seem to be a clear, simple/elegant way of doing rounded corners in a cross browser implementation.
Maybe boxes are better after all…
Benjie
I came up with some buttons that work and look great in just about everything but IE.
http://www.westafer.com/b/scubaTests/buttonTest3.html
I’ve been playing around with Dean Edward’s IE7 and it’s so very close, only thing is no matter what the fix, IE will not load a transparent image AND respect background. Obviously, Microsoft has no intention of supporting pngs, so tricks like the one described in this article will be necessary. I still have to wonder, what is Microsoft’s motivation to ignore the w3c? Oh right, world domination. Silly me.
Chriztian Steinmeier
When creating images that rely on the background-color – always (as in “everytime”) remember to specify a color for the background too… even if it’s white. :-)
-
…
Anne
http://annevankesteren.nl/test/javascript/corners.htm
Phill Kenoyer
Why oh why oh didn’t W3 do rounded borders for CSS? IE:
border: round 3px;
They covered just about everything else, why not do rounded?
ecd
The obvious answer is that they did, in CSS-2: border-radius. A better answer is that “round” is not a valid border style, such as solid, dotted, or dashed. What’s the 3px in your example for? The width of the border or the radius of the curve? Therein lies the problem.
I like this article and its target effect; the only problem lies with patterned backgrounds, as quoted before. Combination of this technique with use of background-position:fixed (and appropriate hackery for IE) could result in a solution to that issue.
Brad Bice
I admire your willingness to put another controversial technique for CSS rounded corners out there. I knew this ALA audience would jump all over it in one form or another.
Fact of the matter is, it’s just another technique for adding rounded corners. And it’s a good one at that. It’s simple and innovative, and cuts down on image sizes. Thanks for writing and sharing it.
jason
Thanks Brad (above).
After reading through 2 whole whiny pages of posts, its good to see someone appreciate the CSS demonstrated here by Dan.
If most of you wanna bitch about articles like this one, then it is highly suggested that you actually write one yourself for submission.
Tom
Here’s another interesting technique for creating rounded boxes: http://mrclay.org/web_design/rounded/
Jeff Minard
I have seen the “rounder corner” effect done this way, and the way a few people have suggest (4 divs) before. This one was new to me:
– http://creatimation.net/extra/mtil.htmInstead of using gif’s, it’s justing div’s with border left/rights to create the effect. This method scales better though since it isn’t locked into a pixel aspect.
Hilliard Davis II
I’m new to CSS (i know “stone the newbie”… how, stupid, to attack new comers.) when people give alternative examples, a submission of the difference in code would be very appreciated – instructive as well.
my two cents.
Thomas
I’ve used this before – its a pretty good technique, but it doesn’t really work with much bigger corners because they would need an images with translucent pixels, which require a matte iirc. But that just means you’d probably want different images for vastly different colors, unless you were fine with the pixelated look.
Nice article, though. :D
Liam
Very informative article, I’ve been struggiling with diffrent methods for rounded corners etc for some ‘smooth’ navigation,
It’s exaclty what was needed,
Yet another ‘hack’ to add too the arsenal
Benjamin
I have been using this method for months, didnt realise it wasnt documented
its an awesome technique.
Ryan
This is probably the best technique I’ve seen for rounded corners so far. The only problems I see are the fixed width and the fact that you can’t get fancy with the corner (no bevels or anything).
Sorvoja
I would have to try this out.
manuel bieh
nice idea, but unfortunately it only works with one color background and does not support gradient backgrounds as it is used here.. :(
Fredrik Bjarman
Hi! Nice article and a good technique, thanks!
I have done some rounded boxes by using techniques I have found here and there, the markup is perhaps not as semantic as the one in this example and since I wanted bevels I had to settle for a non-generic solution ie I had to make new images for each background color, it works in most browsers though and the markup is not all that “dirty”.
The example can be seen live at http://douglaz.com
Thanks again for good articles!
iG.STUDiO
Here are two scripts, which allow for the display of transparent fore/background PNG images in IE 5.5+:
http://homepage.mac.com/igstudio/design/css-js-dropshadow/sleights.js
Refer to the evil empire website for the details on using “sizingMethod” attribute (scale, image, crop).
You can also compact the two scripts together, since the detection method for “itsAllGood” variable is identical (I thought I did that, but apparently, I didn’t upload that file)
Kim Siever
This is an awesome article. Thanks for the great tip. I will definitely be using this.
zack
this is better than any nestled div method hands down, because the markup is clean. To get around fixed width problems, etc, I use every element I can. (ie, what about those <dd>‘s ?) or a menu <ul> with <li>s & <a>s, add a couple class or id specifiers and you have enough elements to work with if your clever and you carefully position and browser test. so, good article, i am sure it will spawn many a experiment.
zack
please mentally replace all <‘s with < and >‘s with > in the last post.
PNDesign
hmm… :-)
Bob
…but why wouldn’t this work with gradient backgrounds? If the outside edges (creating the rounded look) are transparent, why wouldn’t the gradient background of the page show through? Am I missing something incredibly obvious?
Dave Cunningham
I can’t believe there are still people complaining about PNGs and IE.
There are a few different ways to get IE to recognize the alpha channel. Here’s one:
http://youngpup.net/2003/sleightupdate
Adam
I think this is a great method to achieving the rounded corners effect. In the past I have just used different colored images for my corners, but as you can guess this gets pretty labor intensive when you want to change things up. Thanks for this CSS tip, it is going to make my life so much easier!!!!!
starvingartist
Dave: As Drew McLellan states on his website, Youngpup’s Sleight javascript code “only deals with inline images, not background images,” which is what we need in this case.
Use this one instead:
BGSleight – http://www.allinthehead.com/retro/69
Luis
Hmm, we do something similar on our site (the homepage), but couldn’t get some of the elements to line up very well together cross browser. As a result we’ve used an extra image where we maybe didn’t have to…
Reading this makes me want to go back and try again…
Shakey
“Am I missing something incredibly obvious?”
Yes you are. The corners of the image used are NOT transparent. They are the same colour as the page background. It’s the bits BETWEEN the corners that are transparent to let the underlying background colour show through.
This is why this technique is restricted to single colour background designs.
Millano
Maybe i did something wrong but i can’t see the background and either the image in IE6. In Opera the images duplicated.
Thanks
Tanny O'Haley
Sorry for the off topic anwer but here is what I use to create 90% opacity.
http://www.alistapart.com/discuss/mountaintop/1/#c7959
/* IE opacity */
filter: progid:DXImageTransform.Microsoft.alpha(opacity=90,style=0);
/* Mozilla */
-moz-opacity: .9;
/* Safari 1.1 */
-khtml-opacity: .9;
/* Safari 1.2 */
opacity: .9;
walter
Dan,
I liked your article but not being a web designer I made a pig’s ear of your beatiful CSS when redesigning my own website.
http://www.xanadb.com
yeah – go ahead and laugh.
NunoF
Actually, if you use quite some more you can skip the background images altogether, as long as you don’t mind not being able to put text in the top and bottom divs that define the roundness.
Example using inline styles and ids just for reading convenience:
<div id=“container” >
<div id=“top_2” solid black; border-right:1px solid black;background-color:black;”><!——></div>
<div id=“top_1” solid black; border-right:1px solid black;background-color:silver;”><!——></div>
<div id=“middle” solid black; border-right:1px solid black; background-color:silver;”> A Simple Box </div>
<div id=“bot_1” solid black; border-right:1px solid black;background-color:silver;”><!——></div>
<div id=“bot_2” solid black; border-right:1px solid black;background-color:black;”><!——></div>
</div>
The container div only serves as a limiter, you can use whatever you want, the box will of course adapt to whatever width the parent container has.
You can in fact use 3 colors:
– the margin of course uses whatever color or background lies “underneath it”.
– You use the border color to define an outline(like I did) or even a faux 3d button look
– And of course the background-color of the middle div itself.
Peter Edwards
I’ve used the code at:
http://www.redmelon.net/tstme/4corners/
to produce rounded corners on divs. I liked this technique because of its simplicity and because it would not interfere with other markup in the page. I tried rolling my own first, but incompatibilities with IE5/Mac frustrated my efforts.
There is also a well-documented example at:
http://www.albin.net/CSS/roundedCorners/
If you want something a bit more fancy, try:
http://www.vertexwerks.com/tests/sidebox/
which is based on an excellent article here:
http://alistapart.com/articles/slidingdoors/
Anthony Williams
I used this technique a while back (almost 2 years ago now) on the UCE Business School website. Back then it was developed quite nicely, I thought, with ASP generated CSS files, and flash to make titles.
Now, I’m in the middle of talks to get them to let me re-build the whole of the public-facing site in standards based markup.
I’ll let you know how it goes!
Anthony Williams
I used this technique a while back (almost 2 years ago now) on the UCE Business School (http://www.tbs.uce.ac.uk) website. Back then it was developed quite nicely, I thought, with ASP generated CSS files, and flash to make titles.
Now, I’m in the middle of talks to get them to let me re-build the whole of the public-facing site in standards based markup.
I’ll let you know how it goes!
Klaus
For fluid widths, try display: table-cell
http://www.stilbuero.de/corners/rounded_corners.html
Happy coding, Klaus
Scott Baldwin
Hi Dan,
I’ve been playing with your mountaintop corners tutorial (fantastic BTW). I wanted to integrate your ideas from the tutorial into a site I’m working on but wanted to use <divs> rather than lists for the markup. With a bit of mucking around I came up with a modification. It’s just a single <span> for the bottom rounded box and it uses the ideas you had for the Fast Company icons (see http://www.simplebits.com/archives/2003/07/24/magic_icons_for_lazy_people_like_me.html) —creating a transparent box and then letting the CSS color fill the background, while the corners are white like the background of the page (or whatever your background color is—that way you can re-use code and only need one set of images.
<style type=“text/css” media=“screen”>
body {
font-family: verdana, helvetica, arial, sans-serif;
font-size: 0.9em;
}
/* Red Box
————————————————————————————————-*/
div#boxRed {
width: 200px; /*width of the box and top image*/
padding: 0;
margin: 0;
background-image: url(top.gif); /*image for the top of the box*/
background-color: #FF0033;
background-repeat: no-repeat;
}
div#boxRed span {
width: 200px; /*width of the box and top image*/
height: 6px;
background-image: url(bottom.gif); /*image for the bottom of the box*/
background-color: #FF0033;
background-repeat: no-repeat;
background-position: bottom left;
display: block;
/*line-height: 6px;*/
}
/* Gray Box
————————————————————————————————-*/
div#boxGray {
width: 200px; /*width of the box and top image*/
padding: 0;
margin: 0;
background-image: url(top.gif); /*image for the top of the box*/
background-color: #CCCCCC;
background-repeat: no-repeat;
}
div#boxGray span {
width: 200px; /*width of the box and top image*/
height: 6px;
background-image: url(bottom.gif); /*image for the bottom of the box*/
background-color: #CCCCCC;
background-repeat: no-repeat;
background-position: bottom left;
display: block;
}
div#boxRed h2, div#boxGray h2 {
font-size: 1.2em;
padding: 3px 6px 0 6px;
}
div#boxRed p, div#boxGray p {
padding: 0 6px 0 6px;
}
</style>
<body>
<div id=“boxRed”>
<h2>Why Bank Online with North Shore Credit Union?</h2>
Easy. It’s safe, secure and easy-to-use.
<ul>
<li>Learn More</li>
<li>Login Now</li>
</ul>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede nunc, ullamcorper pharetra, tristique in, volutpat nec, massa. Sed aliquam.
<!—THIS SPAN IS USED TO CREATE THE BOTTOM OF THE BOX—>
<span> </span>
</div>
<div id=“boxGray”>
<h2>Why Bank Online with North Shore Credit Union?</h2>
Easy. It’s safe, secure and easy-to-use.
<ul>
<li>Learn More</li>
<li>Login Now</li>
</ul>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede nunc, ullamcorper pharetra, tristique in, volutpat nec, massa. Sed aliquam.
<!—THIS SPAN IS USED TO CREATE THE BOTTOM OF THE BOX—>
<span> </span>
</div>
</body>
</html>
Kim Siever
I noticed one thing this misses. It seems to be dependent on the definiton list only having one term-definition pair.
1beb
Yet another wicked article. I just found this site. I swear I haven’t found one thing that hasn’t been insightful as of yet.
David Wallace
I want to use a more divided layout:
1.a split header with W-E title images,
2.a 3-column meta section with the NW, NE corner images at the edges and a potential secondary sidebar in the middle,
3.another 3-column section with a navbar on one side, a logo on the other side, and the main content in the middle,
4.another meta section with SW, SE images at the margins and some text in the middle, and
5.a split footer with contact information in each pane.
I want to move from tables (one for each body section and one for the navbar) to divs and CSS. I’ve seen many ideas for blank exterior div tricks, but what if you want your header/footer, navbar, and logo outside the main client area?
BTW, I raytrace all of my web graphics with this free tool:
http://www.povray.org
It does require some math and practice, but even wacky web button styles can be built.
Dave
This is a neat technique. I’m still pretty new with CSS, but no so with transparent rounded images. This could come in handy often, I like how the background images work in CSS…off to play now…
Ed Henderson
Very informative and insightful, just what I was looking for. Thanks.
Chris Messina
This certainly is not a beautiful implementation of the same idea, but I thought this audience might find it amusing what Windows/ASP.NET folks do when they want to create Rounded Corners… using… of course, non-semantic tables.
http://aspnet.4guysfromrolla.com/articles/072804-1.aspx