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


Tags: css,user-interface,frontend

Problem :

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.



Solution :

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?


    CSS Howto..

    Am centering content vertically using css, how to remove empty space?

    How can I base one CSS setting on another?

    JqueryUi Autocomplete shown in wrong place when using input field in div with position:fixed

    How do I create tabs in vertical alignment?

    How to do letter spacing every two letters with CSS only?

    How can I get as much of the text into a DIV row as possible?

    How to Set the Left and Top CSS Positioning of a DIV Element Dynamically Using JavaScript

    CSS - how to display submenu options horizontally while maintaining spacing of horizontal main menu options

    How to get CSS background images to show up in HTML files opened by Word?

    jquery carousel how to have a gradient on start and ending slides

    Why IE10 shows something totally different

    How to give the padding for option with css only

    How to center a div being focused? [vertically]

    Show a gif image over a section to take up the space

    jQuery glowing animations : how to improve?

    How to arrange the elements of a semicircle in css/html/js

    How do I make a header above my navigation bar?

    How can I apply a css rule to all descendants of an elements

    Box-shadow is overlapping other elements, how can I fix it?

    How to create a layout with 2 menu bars in css?

    How classes work in a CSS file? [closed]

    How to customize style of numeric “li” in css [closed]

    How to freeze frame with css

    How to set a div within text?

    How to apply a CSS transition only to the transform property

    Links fade in when hovered - how to get them to stay opaque when their target is visible?

    How to code a drop down menu in css?

    How do I organise divs that are nested inside each other?

    How to apply CSS directives to h3 element?

    How do I put an image on top of an image without using absolute positioning?