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..

    How to rotate text and position it properly? (CSS, HTML)

    How to bottom center a span inside a list item

    How to select, focused textarea?

    How to move object into the screen from outside via jQuery transition

    Flexbox: how to get divs to fill up 100% of the container width without wrapping?

    How to code CSS for all browsers in jQuery.css() method?

    How to include .otf in css?

    CSS / Jquery How to auto-size containers and images

    How to override GWT obfuscated style for DataGrid header

    How to change text (not font size) according to screen size in CSS?

    How to align 'n' divs horizontally WITH margin/padding?

    How to remove/add jQueryUI CSS theme from specific element?

    Disappearing div using JQuery - how do I stop it from reloading next time a page is opened

    CSS Styles How to make this table not fill the entire page width?

    IE8 only shows css content after event fired

    How does one reduce the height of fontawesome text?

    How to line up items of varied length in a resizable space in CSS?

    How to grab the element with certain CSS property value inline

    How can I remove the border around all the cells in a table?

    How to transform:scale the top and bottom part of a div using CSS

    how to make sure that that grid layout row adjusts the height automatically as per content

    How to position div so that it renders outside container

    jQuery dialog: how to control the button-pane height

    Nested CSS: How to get to the child?

    How to make contents vertical align inside div

    How to refer to children elements in CSS

    How do I design a css gradient to look like the attached Facebook Login screen

    How to hide elements with css using checkboxes: different outputs according to element id or class?

    CSS - how to put a opacity border to an input?

    Only Lower Half Of The Border Is Shown