Transparent Curved Borders 1

[leonnk]

I am trying to create curved borders using 8 divs (t, b, l, r, tl, br, bl, tr).

However, my problem is that the background of my page is a gradient, so I am having to use curved edges that are transparent. However, this means that the borders from my t, b, l and r divs are showing (which are created using a 1 px image).

Thanks

 

[southbeach]

Well, if you have a "transparent" image, one could expect that whatever is behind the image will show

Do you have a link? Perhaps, you might want to give your layer a faded (opacity to less than 100%) background color and match your corner images to that color.

By using the opacity settings you will retain background color while distinctively showing layered content.

What do you think?

--
SouthBeach

http://www.fpgroups.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[Vragabond]

Are you sure you can't use any of these, tried and true, techniques?

http://www.smileycat.com/miaow/archives/000044.php

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

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ChrisHunt]

Take a look at this one too:

http://www.alistapart.com/articles/customcorners2/

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[leonnk]

Thanks for all the help.

I've looked through the tutorials, and for ones relating to my problem they seem to suggest using full images for either the entire box or for two parts of a row. Unfortunately, my box needs to be resizable, so I can't use images that have set widths or height.

I haven't got a link, but here's an image of what it will look like:

http://img218.imageshack.us/img218/521/curvedv.jpg

So really as it's a filled box, I only need 4 images with a background colour.

southbeach: Not quite sure what you mean, make the background of the curved border have less opacity? Won't it still show what's behind it show through?

Anywho, I have decided that as my gradient is very gradual I'm going to go ahead and use solid colours as it is barely noticeable. Although I would like to discover a solution for future reference.

 

[BillyRayPreachersSon]

Take a look at the Code Couch site in my signature.

I have fully resizable boxes with curved corners and alpha transparency working even in IE6. Both the width and heights are resizable (try clicking the blue arrow in the top-right of the side bar, or resizing the text to see what I mean).

It may not be the best code in the world, but I'm happy that it works cross-browser.

I guess what I'm saying is that it's definitely possible to achieve... unless, of course, I've mis-understood your requirements.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

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

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

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[ChrisHunt]

I've looked through the tutorials, and for ones relating to my problem they seem to suggest using full images for either the entire box or for two parts of a row. Unfortunately, my box needs to be resizable, so I can't use images that have set widths or height.

You need to look more closely.

Any of the dozens of techniques listed in Vrag's smileycat link labelled "liquid" will work in variable sizes (that's a really useful link, btw, have a * for sharing it).

The one I linked to works variably too - see the demo at

http://www.alistapart.com/d/customcorners2/step2.3.html

. It uses the "sliding doors" technique to overlap images giving a variable result.

Using 8 divs to acheive this result is just table-based layout in disguise. There are better ways of doing it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd