Round corners using custom images

views:

answers:

+1 Q:

Round corners using custom images

you can try from any one of these::

http://www.devwebpro.com/25-rounded-corners-techniques-with-css/

Vaibhav Gupta 2010-08-30 07:15:19

Thanks but I can't use anyone of these as I need the images of the rounded corners to be transparent because they need to fit on a background that is not a solid color. I tried severals (for example http://www.vertexwerks.com/tests/sidebox/) but they are using a white background on the images. If you know can you please show me a link where this is done?

Martin 2010-08-30 08:12:12

You haven't really read the article have you. Because if you have, you would realise that the second technique has a demo page where the background image is not only transparent but also a gradient. See my answer.

slebetman 2010-08-30 08:51:28

I've been wrestling with rounded corners in this way today. I'm using GIF's which have the corners in the colour of the background. Because these are GIF's the corners could be transparent, but I'd rather not worry about what's 'behind'. But in your situation a GIF would be better than a JPG(is this what you are doing?), as transparency is supported, or a PNG if you don't need to support old browsers. Then you can put the background colour in the style for the DIV is you want too.

HTH

MikeAinOz 2010-08-30 07:29:35

I'm using png to do this. And the problem is that I need the background of the images I use to be transparent not a solid color like in the examples I've seen. Do you know how to do this?

Martin 2010-08-30 08:15:41

It depends what program you are using to edit the image.Gimp is easy for transparency just select the areas with the wand and hit delete. What are you using to create the image? What image editors do you have available?

MikeAinOz 2010-08-30 21:01:48

Here is a page that references PNG and DIV's for opacity/transparency:http://virtuelvis.com/gallery/opacity/opacitydemo.htmlThis may be more like what you are after

MikeAinOz 2010-08-30 21:10:16

My personal favorite technique is this one: even more rounded corners. Look at the demo page: http://www.schillmania.com/projects/dialog2/. It does exactly what you want.

Plus, unlike other techniques, you don't have to cut up your background image.

slebetman 2010-08-30 08:52:50

Here is the good example to create rounded corners with custom images

http://www.templatespoint.com/blog/2010/10/expandable-rounded-corner-box/

Eswar 2010-10-07 11:45:24

ansaurus

tags:

views:

answers:

Round corners using custom images

related questions