Rounded corners and dropshadows in CSS

Hi all,

Hopefully I am not repeating a similar question. I am trying to redesign my site (with not much luck) in CSS. I want some text/navigation boxes that have rounded corners and drop shadows.?Using CSS do I still need to create the images in an image editor, slice the images and place the appropriate sections of the image in divs to get this effect (much like using tables)?

Thanks in advance

Chris

Rounded corners and dropshadows in CSS

You can use ones like these with pre made images. You just enter the code

Rounded corners and dropshadows in CSS

Thanks...I will probably just use one of these.

Here are some?CSS3 design tricks you can use.?But not all browsers fully support CSS3 yet and some older browsers never will.

http://www.sitepen.com/blog/2008/12/08/taking-a-look-at-css3/

Nancy O.
Alt-Web Design %26amp; Publishing
Web | Graphics | Print | Media?Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

afr43 wrote:

Using CSS do I still need to create the images in an image editor, slice the images and place the appropriate sections of the image in divs to get this effect (much like using tables)?

Thanks in advance

Chris

Thanks for everyones responses.?I am new enough to CSS that I may as well do it correctly the first time (or at least try anyway).

Thanks

Chris

Hi

You could use javascript for the rounded corner effect, (works in IE all versions from IE6 onwards).

See - http://www.methvin.com/jquery/jq-corner-demo.html

There is also a javascript method for creating drop shadows, but in my experience they do not 'work' good enough for production use.

As for css3 , if the property is not supported by a browser it is simply ignored, this means you can safely use css3 in your design if you wish, just remember to put the default border style before the css3 rounded corner style, (no version if IE supports css3), and check that the design 'works' for you with the normal css styles in IE. It is also worth remembering that if you use css3 (browser proprietary styles), your css will not validate.

For more info on css3, see - http://www.css3.info/.

PZ

Fireworks has a great trim canvass command for saving these kinds of graphics neatly; then you could save as jpeg with the same background color and use as div background without worrying about which browser supports what....