Replicating this with CSS? -> Shadow, Roundcorner, Gradient

[renaissanceart]

I want my NavMainWrapper to look exactly like this.

It is possible to replicate this 100% with CSS?







Anti-Aliased Rounded Corners, Drop Shadow and preferably (but not imperative) a Gradient Fill.

All without using ANY images whatsoever ??

any CSS gurus out there got a simple solution? :)

[clydejones]

I want my NavMainWrapper to look exactly like this.

It is possible to replicate this 100% with CSS?







Anti-Aliased Rounded Corners, Drop Shadow and preferably (but not imperative) a Gradient Fill.

All without using ANY images whatsoever ??

any CSS gurus out there got a simple solution? :)

Solution: yes! simple: not really!

You'll have to combine several css methods to accomplish what you want.

Drop Shadow:
Look at this tutorial

Although it uses an image.

The closest you'll get to a drop shadow without an image is to use a border-bottom declaration in your stylesheet.

Rounded Corners:
Look at this tutorial

OR

This one

[Nimbuz]

If it involves 4-5kb of js and css, why not just use a 2-3kb image directly. Images aren't evil. :-)

[CJPinder]

If it involves 4-5kb of js and css, why not just use a 2-3kb image directly. Images aren't evil. :-)

Agreed. A couple of images set as sliding doors would be a lot easier to set up and maintain.

Regards,
Christian.

[renaissanceart]

Agreed. A couple of images set as sliding doors would be a lot easier to set up and maintain.

Regards,
Christian.

Hmm whats this sliding doors method ?

The problem i have is theres a complex textured background image. So the transparency in the shadow is neccessary. I can achieve this by saving the image as a PNG or Gif. But, the next problem i'm faced with is the rounded corners.

Is this what your talking about with the sliding door? So have 3 images. 1 on each end which are rounded. Then a Centre image tiled ?

I know i could do this in tables in a matter of seconds. Not sure about CSS?


Thanks for the help guys, much appreciated!

[clydejones]

Hmm whats this sliding doors method ?

The problem i have is theres a complex textured background image. So the transparency in the shadow is neccessary. I can achieve this by saving the image as a PNG or Gif. But, the next problem i'm faced with is the rounded corners.

Is this what your talking about with the sliding door? So have 3 images. 1 on each end which are rounded. Then a Centre image tiled ?

I know i could do this in tables in a matter of seconds. Not sure about CSS?


Thanks for the help guys, much appreciated!

Check this article on the sliding door method