Discuss: Mountaintop Corners

by Dan Cederholm

51 Good to see I'm not the only one...

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!

posted at 07:29 am on May 7, 2004 by Anthony Williams

52 Good to see I'm not the only one...

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!

posted at 07:29 am on May 7, 2004 by Anthony Williams

53 Fluid widths: Give display: table-cell a try

For fluid widths, try display: table-cell

http://www.stilbuero.de/corners/rounded_corners.html

Happy coding, Klaus

posted at 03:17 am on May 12, 2004 by Klaus

54 using <divs> and transparent gifs

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.

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>[url=”#”]Learn More[/url]</li> <li>[url=”#”]Login Now[/url]</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>[url=”#”]Learn More[/url]</li> <li>[url=”#”]Login Now[/url]</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>

posted at 09:37 pm on May 17, 2004 by Scott Baldwin

55 More than one list item

I noticed one thing this misses. It seems to be dependent on the definiton list only having one term-definition pair.

posted at 02:16 pm on May 18, 2004 by Kim Siever

56 I can use this

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.

posted at 11:56 am on May 25, 2004 by 1beb

57 Alternative corner designs

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.

posted at 11:19 am on June 15, 2004 by David Wallace

58 Very cool!

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…

posted at 09:57 am on June 25, 2004 by Dave

59 Nice Article

Very informative and insightful, just what I was looking for. Thanks.

posted at 01:17 am on July 1, 2004 by Ed Henderson

60 Introducing the RoundedCorner Web Control

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

posted at 05:29 pm on July 28, 2004 by Chris Messina