Previous Message
Next Message

Rounded corners and Transparent GIFs

Sent by tedd on 23 March 2006 19:07


>For my next trick, I'll need a div with rounded corners on top of a
>textured background.  Any volunteers from the audience?
>
>My launch pad was this ALA article:
>http://www.alistapart.com/articles/customcorners/
>
>I was skeptical about this being possible at all, but here is my
>stubborn progress: http://www.twilighted.com/tx/giftest.html
>
>The div must be elastic horizontally and vertically.  The problem is
>that the when the corner images overlap, the transparent corners are
>blocked out, leaving a rectangular corner.  Try shrinking the text and
>watching what happens to the bottom left corner.
>
>Here is a shortcut to the ALA article's explanation of how the images
>are sliced: http://www.alistapart.com/d/customcorners/step1.1.html
>
>This would be very easy to arrange with tables, but that would be
>embarassing.  I've been trying to place one horizontal and one
>veritcal box with white backgrounds behind the main div, but have been
>so far unsuccessful.  Here's a quick mockup:
>http://www.twilighted.com/tx/theory_example.jpg
>
>I just want a nice clean box with rounded, transparent corners.  All
>that I have found so far has been pain!
>
>--
>Michael Clayton

Michael:

Transparent corners are fine, but it's the background that's the problem.

I know you'll say "Hey it's transparent!", but I'm talking about the 
pixels that are the closest to the transparency, which to do it 
right, should be anti-aliased to *some* background.

If you want simple rounded corners, try this:

http://www.sperling.com/examples/box/

tedd

-- 
--------------------------------------------------------------------------------
http://sperling.com/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: