View Full Version : Most efficient way to design half a rounded box with speed in mind?

08-02-2007, 07:06 PM
Hey everyone,

After some recent happenings it turns out I have to design the front end/visual aspects for a project my team just finished. I haven't touched CSS for about a year as I have been doing things on the backend, not even touching a bit of css in tandem with xhtml.

I have read up, refreshed my mind a bit, but there is one thing I am still a little bit confused about. I have two boxes <div> boxes that are for voting. I tried to find an example for you guys to show you what I want. Right here, on jyte.com those voting buttons are almost exactly what I need.

I searched google and was flooded with a thousand different ways to create rounded boxes. And most of them don't really apply, at least not any of the pre-fab boxes because I only need two corners.

What I was thinking I should so is create my box normally with whatever color I want as a simple square, and then create the right/left side of the box with the two rounded corners as a .gif/.png and just place them aside the box via some <div> positioning?

Or should I create a top left/right bottom left/right .gif/.png instead and load them into the image via CSS positioning.

I looked at the source over at jyte and it looks like they are just setting one background-image via CSS and loading that whole image into the <div> When I did that with my file, I got a file that was 60KB! Way too big!

It really doesn't matter if the solution is css based or javascript. I would like the fasted loading time, and would PREFER to do this with images somehow (I don't like the idea of all that complicated markup when using only css, like roundedboxes.com or whatever that site is).

So thank you for looking and I hope someone can provide some insight.



08-02-2007, 08:24 PM
I looked at the images they used, and each one is about 3k. So the whole button with all the states in it is 12k. A far cry from what you got. Can you optimize your images more by chance. The yway they are doing it ( as it seems to fit your needs as well) seems a pretty easy and not a whole lot of coding way to do it.

also, check out this:


should be easy enough to make work for your needs and only yakes 1 image this time around.