Jump to content

Rounded corners?


unplugged_web
 Share

Recommended Posts

I wouldn't say it's all that hard, unless you go towards those otherwise involved methods which use purely CSS (no images), but I commonly solve this problem as follows. I make a transparent GIF (because IE doesn't support transparent PNGs yet) and eliminate the edges by making them transparent, usually with a photo editting program like The GIMP. Then create a div the same size as the image I want, and then just set the background as that image. The only problem with this is loading time, especially if you've got lots of material. If you're daring enough, and the whole page needs to have rounded corners, you could just make the entire page one gaint div, albeit broken into smaller divs, and set the background of it as one large image. That's the simplest method I know of, but it just requires some intution, not so much as surpassing its difficulty.

Link to comment
Share on other sites

I wouldn't say it's all that hard, unless you go towards those otherwise involved methods which use purely CSS (no images), but I commonly solve this problem as follows. I make a transparent GIF (because IE doesn't support transparent PNGs yet) and eliminate the edges by making them transparent, usually with a photo editting program like The GIMP. Then create a div the same size as the image I want, and then just set the background as that image. The only problem with this is loading time, especially if you've got lots of material. If you're daring enough, and the whole page needs to have rounded corners, you could just make the entire page one gaint div, albeit broken into smaller divs, and set the background of it as one large image. That's the simplest method I know of, but it just requires some intution, not so much as surpassing its difficulty.
Thanks for that I did originally use an image, but want to keep the load time down as much as poss.
Link to comment
Share on other sites

Well for my rounded corners I used four images, floated to the top-left, top-right, bottom-left, and bottom-right. Each image is only 116 bytes (8 x 8), so sizes are still small.

Link to comment
Share on other sites

Everything's a hassle if you only want to do it once. The best approach to rounded corners, drop shadows, things like that is to make a system you can use over again no matter what the size is.My approach is to create a master image like the one I imagine my pseudo-dialogs would look like. Then grab a 10x10px or 20x20px image for each corner. Then a 1x10 or 1x20 image for each side. The 1x images become repeatable background images to fill in sides of any length. As with Synook's plan, all these images are small enough that they download almost instantly.Make the set-up function general enough that you can pass it a single div reference and the sides and corners take care of themselves. The real hassle is the trial and error with the offset math. But once it's in your set-up function, you never have to look at it again. As much as possible, write reusable code. (Most of you know this, but for those who haven't thought about it . . . )

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...