Gradients and round corners

[Kerberos]

I haven't found in my CSS book how to create a gradient to fill a division
tag, and to create a border with round corners.
Is it possible using either CSS or JavaScript?
I'd like to create a menu bar with a gradient in the background, and I
want the top corners to be a little round with a 5px radius.
Thanks,

--

Kerberos.

http://www.opera.com
http://www.freebsd.org
http://www.osresources.com
http://exodus.jabberstudio.org

[Mark Tranchant]

Kerberos wrote:

I haven't found in my CSS book how to create a gradient to fill a
division tag, and to create a border with round corners.
Is it possible using either CSS or JavaScript?
I'd like to create a menu bar with a gradient in the background, and I
Create a gradient image as large as you want, and set the background
colour to match the bottom colour of the gradient so that it still looks
good on scaling.
want the top corners to be a little round with a 5px radius.

See A List Apart for various round corner solutions. Alternatively, use
the CSS3 border-radius property in combination with -moz-border-radius
so that you get the effect in recent Gecko browsers and mythical future
CSS3-supporting browsers.

Both the gradient and the round corners can be seen on my site, although
you'll need to use one of the above browsers.

--
Mark.
http://tranchant.plus.com/

[Kerberos]

Em Thu, 02 Dec 2004 16:08:33 +0000, Mark Tranchant
<ma**@tranchant.plus.com> escreveu:

Kerberos wrote:

I haven't found in my CSS book how to create a gradient to fill a
division tag, and to create a border with round corners.
Is it possible using either CSS or JavaScript?
I'd like to create a menu bar with a gradient in the background, and I

Create a gradient image as large as you want, and set the background
colour to match the bottom colour of the gradient so that it still looks
good on scaling.

This is what I've done so far, with a 1px-wide gradient image, but that
would have been nice to find out a "hidden" CSS feature such as:

#navbar {
background-gradient: linear 90;
background-gradient-colors: #4900A4;
background-gradient-end: #3200A4;
}

:)

want the top corners to be a little round with a 5px radius.

See A List Apart for various round corner solutions. Alternatively, use
the CSS3 border-radius property in combination with -moz-border-radius
so that you get the effect in recent Gecko browsers and mythical future
CSS3-supporting browsers.

Both the gradient and the round corners can be seen on my site, although
you'll need to use one of the above browsers.

Indeed, it looks nice on Gecko browsers. I use Opera... I'll have to wait.

--

Kerberos.

http://www.opera.com
http://www.freebsd.org
http://www.osresources.com
http://exodus.jabberstudio.org

[Mark Tranchant]

Kerberos wrote:

Em Thu, 02 Dec 2004 16:08:33 +0000, Mark Tranchant
<ma**@tranchant.plus.com> escreveu:

Create a gradient image as large as you want, and set the background
colour to match the bottom colour of the gradient so that it still
looks good on scaling.

This is what I've done so far, with a 1px-wide gradient image, but that

You might want to use a wider image, especially if your gradient will be
used on Netscape 4 which is notoriously slow at tiling background
images. Decent file formats (e.g. PNG) won't take much (any?) more space
for an 8px wide image than a 1px wide image, if each pixel row is a
solid colour.

--
Mark.
http://tranchant.plus.com/