Grow your CSS skills. Land your dream job.

css box shadow not working

  • # May 9, 2011 at 1:52 pm

    I’m trying to add a css drop shadow to the header, but I’m not getting any change in the appearance.

    html:

        




    css:

    div.shadow {
    -moz-box-shadow: 5px 15px 5px 0px #000;
    -webkit-box-shadow: 5px 15px 5px 0px #000;
    box-shadow: 5px 15px 5px 0px #000;
    }

    div#header {
    background-color: #5c5d60;
    position: absolute;
    margin-bottom: 10px;
    top: 0px;
    left: 0px;
    width: 960px;
    height: 83px;
    }

    I appreciate your help!

    # May 9, 2011 at 2:14 pm

    And i already changed

    to

    # May 9, 2011 at 2:39 pm

    you have too many numbers in the value of your box-shadow property.
    Also your navigation is in a paragraph tag…

    # May 9, 2011 at 2:54 pm

    Where does

    go in relation to

    ?

    # May 9, 2011 at 6:18 pm

    I believe the shadow didn’t work because you did not have a set width on the shadow div. You are using extra markup than needed so I condensed and applied the code below for you.

    HTML




    CSS


    #header {
    background-color: #5c5d60;
    width: 960px;
    height: 83px;
    -moz-box-shadow: 5px 15px 5px 0px #000;
    -webkit-box-shadow: 5px 15px 5px 0px #000;
    box-shadow: 5px 15px 5px 0px #000;
    margin-bottom: 10px;
    }

    @Dogsghost, this person does not have too many “numbers” inside the shadow.

    box-shadow is applied like this:

    horizontal shadow
    vertical shadow
    blur
    spread
    color
    inset

    # November 13, 2012 at 6:17 am

    Adding a width will not fix the issue @ChristopherBurton

    # November 13, 2012 at 6:34 am

    @ChristopherBurton Has it right: http://codepen.io/anon/pen/jeycp

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".