How do I ONLY add a box-shadow to the bottom with the following css?


Tags: css,css3

Problem :

I have the following css code:

     box-shadow: 0px 1px 5px #888;
    -moz-box-shadow: 0px 1px 5px #888;
    -webkit-box-shadow: 0px 1px 5px #888;

How do I make it so that only the bottom border shows. I have a blur radius so not sure what to change or add to the above snippet.



Solution :

Decrease the spread distance based on the blur radius (i.e. spread distance needs to compensate for addition of blur). Don't forget to adjust offset as well to compensate for reduction in spread.

box-shadow: 0px 4px 5px -3px #888;

http://jsfiddle.net/p469p/

You also only need box-shadow. Mozilla and Webkit have supported it for a long time.

And for more informations see drop shadow only bottom css3


    CSS Howto..

    “div” into an “a” is wrong. So, how can I do this? (HTML4, CSS2, crossbrowser)

    how to specify a different image in css depending if the user visits on a desktop or a mobile browser

    How to reset CSS3 *-transform: translate(…)?

    how to do drop down list

    How would I go about making my q and a page like this: http://www.text-link-ads.com/r/faq

    How to remove the extra space between two span elements?

    How to disable Javascript/CSS minification in ASP.NET MVC 4 Beta

    CSS/XHTML: Show div after a specific count of table rows

    How do I add multiple linear-gradients to a css background? If

    How to make beatiful select lists?

    how can css reset :hover to default state?

    How to delete css right or bottom on drag

    How to set img tag vertical center : html + css

    How to change the content value of iconmoon font?

    How to let DOM elements stack and overflow horizontally instead of vertically in HTML?

    how to get particular words with dotted lines in HTML and CSS?

    How to position two images in opposite corners of one div

    How do you read !important in CSS?

    How to keep footer at the bottom of the page when resizing on bootstrap

    Jquery - How to set mouseleave event to an after() generating div?

    ASP.net - How to achieve CSS with constant values, arithmetic and string manipulation

    How to ensure dynamic CSS is loaded first before AJAX content?

    How do i automatically resize Fonts and Images (complete Website) on window-resize?

    how to make the parent width equals the width of all element inside it?

    How to give a css code for combined classes in HTML [duplicate]

    CSS how to scale on the bottom instead of the top of an image

    how to hide and show a div that is inside of a form using only javascript and css

    How to change active menu item style in html/css/js/php

    How to figure out what is the right target to put in CSS

    How to position text on image using position as absolute while container width being in percent