CSS Rounded Corners: 1 image

[bam720]

I found an interesting article on digg about using rollovers in CSS w/o javascript. (http://www.creativepro.com/story/howto/25816.html) I've been thinking about Rounded corners using only 1 image for a while now. Here's my solution:

CSS

.box_text{text-align:center; width:200px; height:150px; background-color:cyan; color:white; clear:both;}

.ul{background-image: url('corner.gif'); background-repeat: no-repeat; height: 25px; width: 25px; float:left;}

.ur{background-image: url('corner.gif'); background-repeat: no-repeat; height: 25px; width: 25px; float:left; background-position:-25 0;}

.up{height:25px; width:150px;  background-color:cyan; float:left;}

.bl{background-image: url('corner.gif'); background-repeat: no-repeat; height: 25px; width: 25px; float:left; background-position:0 -25}

.br{background-image: url('corner.gif'); background-repeat: no-repeat; height: 25px; width: 25px; float:left; background-position: -25;}

.bt{height:25px; width:150px;  background-color:cyan; float:left;}

HTML

<div class="box">
<div class="ul"></div>
<div class="up"></div>
<div class="ur"></div>
<div class="box_text">
Test
</div>
<div class="bl"></div>
<div class="bt"></div>
<div class="br"></div>
</div class="box">

I just grabbed a circle image off of google images (this one: http://www.mcs.surrey.ac.uk/Personal/R.Knott/Fibonacci/circleCofG1.gif)

*NB my calculations are based on a 50x50px circle adjust appropriately.
*NB2 Turn the white part transparent for greater flexibility

I wanted to use 1 image because it saves on user download (1 image vs 5). I appreciate any/all feedback (pos/neg) I know the HTML looks a little "ugly" would greatly appreciate if anyone has an idea to combine the three top and bottom divs

If you want to make a tab design, just include the top (or bottom) divs

See it in action:

http://www.brombomb.com/test

 

[Vragabond]

It's been done before. Look at the original on this page

http://www.456bereastreet.com/archive/200406/flexible_box_with_custom_corners_and_borders/

and make sure you click the two new "models" as well in the list of links on the bottom. It uses 2 images because it needs one for the other borders, but the technique for using just the corners is the same. In his later attempts he uses JS to create appropriate html for the custom box.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[BillyRayPreachersSon]

The trick would be to make the boxes scale correctly. At present, if you increase the text size, the boxes do not scale, and the text goes outside of them (at least in Firefox).

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[bam720]

Simple fix of using height auto. I'll work on a fix for width. I'd assume width auto in a few (3 places) would fix it. Though I don't know if dynamic width is as important

 

[ca8msm]

There's loads of different example of how you could do rounded borders. Personally, I use this one but all of the methods involve extra markup, images or javascript. There's a fairly complete list of different methods here if you wanted to see other solutions.


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.

 

[kaht]

I wanted to use 1 image because it saves on user download (1 image vs 5)

Does it really save on the user's download if they have to download one image that is 5 times bigger than the 5 individual images? I know that each file will have it's own overhead which will cause extra size in the files, but surely we're only talking milliseconds worth of a difference....

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

 

[bam720]

Though we are talking only fractions of seconds (depending on image sizes), I think it saves on server processing. Rather than having client ask for /server send 5 image requests only one is made. This won't make much of a difference on a small site like mine, but on larger sites (with many returning users) server load is of large concern.

 

[kaht]

but on larger sites (with many returning users)

At which point they would grab cached versions of the image instead of pulling them fresh. Personally, I think any lack of extra processing you'd gain from 1 image would be completely negligible. But, that's just my opinion.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson