PDA

View Full Version : Rounded Text box with Shadow


Wintermn
11-09-2009, 08:11 PM
Hi all,

My aim is to have a textbox that not only has rounded corners but also has a shadow so it is pronounced. Any idea how to do this? I'm pretty new to this but willing to learn. I've found a few CSS tutes on the net but none have worked so far, although I'm not sure if thats because I already have a background image and I didn't add the Z-index thingy...because I didn't know how though, lol.
This is what I would like it to look like:

http://www.test.tsmdrives.co.uk/images/Testy2-1.png
However this is only done in PS and so this doesn't help bots or such, Plus it should look neater.

I aim to do about 10 of these so I assume CSS is involved as well as a few images? How close am I?

Many thanks for all your help in advance.

domedia
11-09-2009, 08:27 PM
You can do this with CSS3, which has limited support, but people with (very) modern browsers like FF, Opera, Safari etc will see it. It will then degrade gracefully so people without support for these CSS properties are going to see a regular white box.

Rounded corders with border-radius:
http://www.css3.info/preview/rounded-border/

Shadow with border-shadow:
http://www.css3.info/preview/box-shadow/

If that does not meet your requirements you can can use JavaScript. I found this link on some info on how to do it with jQuery:
http://www.bioneural.net/2008/02/13/corners-gradients-and-shadows-with-jquery/

Oh, and forgot to say, none of these solutions require any images 8)