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 ArticleAnthony 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