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 contain text box in parent div

    How prevent inheriting “position: relative” CSS

    Need the background to change when the mouse goes over the selected tab. How?

    How do I properly use display:block on this menu?

    How to layout a form with 1 input field + submit button so that
    and
    backgrounds do not shine through?

    CSS how to change page content depending on page size (zoom) in responsive design

    How to change pseudo class property?

    How do I align an absolute position child element in the center of its parent div [duplicate]

    how to create an external javascript and an external css file for date picker and how to use it in eclipse

    How to make textfield stick to its label in extjs?

    How to add animated gif to an image sprite?

    how to change triangle to up arrow using pure css

    How to align floated elements to the bottom of their container

    How to make hidden div slide down without affecting other elements in same row

    HTML CSS - How to put button at the center of my page

    CSS How to keep page centered, but still put stuff where I want

    How is better to do with CSS sprites [closed]

    How to place Facebook send dialog box above other content?

    How can I use CSS `resize` to resize an element to a height/width less than initial height/width on Chrome?

    How to force IE to place two div boxes next to each other in it's browser window?

    express: how to send html together with css using sendFile?

    how to style this via css in Bootstrap

    How i put css on message of Hibernate validator anotation message of spring project

    How do I have fieldset::before rule account for the legend?

    HTML/CSS How to make a menu closed and then use class=“active”

    How to make pure css floating tooltips (absolutely positioned span) dynamically resize to accommodate text

    How to simplify CSS code

    How do I prevent text from flowing onto different sections of a page?

    why is the space (shown in image) is added below when using vertical-align? How to fix it?

    Angularjs how to add/remove dynamically input form with ng-Repeat on Google Maps?