Re: [css-d] Round Corner Tabs...

[Christian Heilmann]

> I want to create horizontal navigation tabs that have round-corners
> using only CSS.
> Is there a way I can do this with CSS only?
> Yes, I know you can do this with an image, my preference is CSS
> Thanks,

There is nifty corners, but that involves JavaScript and a lot of
extraneous markup:

http://pro.html.it/esempio/nifty/
http://pro.html.it/articoli/id_599/idcat_31/pag_1/pag.html

And lots more on the WIKI:

http://css-discuss.incutio.com/?page=RoundedCorners


--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

RE: [css-d] Round Corner Tabs...

[Tomlins Diane]

Here's one method:

http://pro.html.it/esempio/nifty/ 


Diane R Tomlins

>I want to create horizontal navigation tabs that have round-corners
using only CSS.

>Is there a way I can do this with CSS only?

>Yes, I know you can do this with an image, my preference is CSS

>Thanks,


>Spencer Ivery
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Round Corner Tabs...

[David Dorward]

On 21/10/05, Spencer Ivery <[EMAIL PROTECTED]> wrote:

> I want to create horizontal navigation tabs that have round-corners
> using only CSS.
>
> Is there a way I can do this with CSS only?

Nothing can be done with CSS only, you need at least some
markup to hand it from

CSS 3 drafts include a border-radius property. Some browsers have
experimental implementations of it (such as -moz-border-radius).

--
David Dorward 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Round Corner Tabs...

[John Guchemand]

There is a way to do this, without JavaScript.  If I understood your
question correctly, check out the link below.  

Of course you have to use images, but they are implemented using CSS: 

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

John
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Round Corner Tabs...

[Derek de Jong]

I want to create horizontal navigation tabs that have round-corners
using only CSS.

Is there a way I can do this with CSS only?
   



Nothing can be done with CSS only, you need at least some
markup to hand it from
 

True. The nice thing about Nifty Corners (2) is that the extraneous 
markup is added dynamically via Javascript, so at least the code (for 
what it's worth) stays without the extraneous markup for future 
incarnations. That, and it's much harder to break while editing.


However, it is still possible with CSS + XHTML, and Stu Nicholls has 
done numerous examples. There are also several examples of rounded tabs 
in his "Menus" section.

http://cssplay.co.uk/boxes/curves.html
http://cssplay.co.uk/boxes/krazy.html

Why is Mozilla using a proprietary moz- CSS property? Wouldn't it be 
easier, for them, to just begin supporting CSS3 properties? Is it 
because they don't properly implement the CSS3 border-radius?


Regards,
Derek

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Round Corner Tabs...

[Christian Heilmann]

> >Nothing can be done with CSS only, you need at least some
> >markup to hand it from
> True. The nice thing about Nifty Corners (2) is that the extraneous
> markup is added dynamically via Javascript, so at least the code (for
> what it's worth) stays without the extraneous markup for future
> incarnations. That, and it's much harder to break while editing.

Well, extraneous code is extraneous code, generated or not. The user
agent will have to wade through it.

> However, it is still possible with CSS + XHTML, and Stu Nicholls has
> done numerous examples. There are also several examples of rounded tabs
> in his "Menus" section.
> http://cssplay.co.uk/boxes/curves.html
> http://cssplay.co.uk/boxes/krazy.html

Impressive, but anything is possible when you can control the markup,
the CSS and the behaviour. However, that is a commodity we do not
always have. And it is hard to explain content editors the value of
good semantic markup when we add a lot of useless content and markup
just to achieve a visual effect that could be done with images, too.

> Why is Mozilla using a proprietary moz- CSS property? Wouldn't it be
> easier, for them, to just begin supporting CSS3 properties? Is it
> because they don't properly implement the CSS3 border-radius?

Maybe because the CSS3 specs are not yet finished but are still in
working draft stage and Mozilla want to offer something. At least with
their own stuff for the time being they know the specs, and they name
it explicitly their extension to the standards. Things would be a lot
easier if the MSIE extensions had a ie- label, as new developers
wouldn't think that other browsers support it.


--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Round Corner Tabs...

[Adam Kuehn]

Derek de Jong wrote:

Why is Mozilla using a proprietary moz- CSS property? Wouldn't it be 
easier, for them, to just begin supporting CSS3 properties? Is it 
because they don't properly implement the CSS3 border-radius?


No, it is because the CSS3 spec is still a moving target.  It is not 
correct to implement the property without the prefix while the spec 
is still in development, because if the spec draft changes, the 
browser suddenly is appearing to implement the specified property, 
but would in fact be implementing an outdated version.


On the other hand, it is good to have a vendor implement a 
spec-in-progress to prove that the spec itself is intelligible and 
implementable.  That helps the whole community.  Once the spec 
stabilizes, the vendor can simply remove the prefix.


Mozilla is doing this in exactly the correct way.

--

-Adam Kuehn
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Round Corner Tabs...

[Eric A. Meyer]

At 8:52 AM -0700 10/21/05, Derek de Jong wrote:

Why is Mozilla using a proprietary moz- CSS property? Wouldn't it be 
easier, for them, to just begin supporting CSS3 properties? Is it 
because they don't properly implement the CSS3 border-radius?


   I don't want to delve too deeply into theoretical matters, but the 
answer is that vendor prefixes are the best way to do test 
implementations of properties in Working Drafts.  That way, if the 
behavior changes before the WD goes to full recommendation status, 
it's easy to change along with it and not appear to "break" a 
non-proprietary property.
   This has already happened: 'opacity' changed the values it could 
accept from one WD to another.  Thus, '-moz-opacity' was changed 
along with it.  When 'opacity' becomes part of a full Recommendation, 
then Gecko can have full 'opacity' support right out of the gate. 
Until then, sticking with the vendor-prefixed version keeps authors 
on notice that it's a potentially changeable thing, and prevents any 
"but we have customers!" blockage.

   It's all as agreed by the CSS Working Group, actually.

--
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
  -- Martina Kosloff (http://mako4css.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/