CSS : How can I add shadow to a label or box

Question

I have an button just as have Ask Question on SO and here is the CSS for it:

.rfs .grey_btn{
   float: right;
   margin: 15px 5px;
}

Now I have to add border shadow to it and I have tried border-radius and box-shadow but it does not give me proper result.

Also other question is that I have a label or box say and now I want to increase size of that box so that I have move the text inside that box to right, currently if I move it to right than it reaches the end limit of box and so I want to increase the size of box so that I can push text more towards right.

Hope I have made my question clear. Any guidance would be highly appreciated.

Thanks.

Answer 1

Box-Shadows only work in some modern browsers as they are CSS3 properties. How to use them correctly, you can see here: http://www.css3.info/preview/box-shadow/

You could use a background image for the shadow effect or you could use a second tag (like a span) with a border, but that's a very uggly solution.

For you label question: have you tried to add a "pagging-left" which will move your text to the right side and increases the width of the label?

EDIT: As CSS3 is not final, every browser has his own pseudo-css3-property. Adding a shadow and extra width and space to the SO button you might use these CSS properties in modern browsers:

.nav a {
    -khtml-box-shadow: 10px 10px 5px #888888;
    -webkit-box-shadow: 10px 10px 5px #888888;
    -moz-box-shadow: 10px 10px 5px #888888;
    box-shadow: 10px 10px 5px #888888;
    padding-left: 35px;
}

EDIT: Added the CSS for Safari and KHTML browsers. That would result in something like this:

Answer 2

I reference Stu when I want to do some CSS stuff like this, just enter Shadow on the search and see what he has done: www.cssplay.co.uk

Answer 3

The box-shadow property is not yet widely supported, but can be implemented like:

img {
    -webkit-box-shadow: 5px 5px 10px #666;
    -moz-box-shadow: 5px 5px 10px #666;
    box-shadow: 5px 5px 10px #666;
}

Not sure what you're asking about the label/box?