Grow your CSS skills. Land your dream job.

Drop Shadowing Correctly

  • # December 11, 2012 at 9:24 am

    Hello,

    My current drop shadow is looking like this:
    [http://www.becomealivinggod.com/catalog/newindex3b.html](http://www.becomealivinggod.com/catalog/newindex3b.html “http://www.becomealivinggod.com/catalog/newindex3b.html”)

    I want it to look like this:
    [http://www.apple.com/mac/](http://www.apple.com/mac/ “http://www.apple.com/mac/”)

    My current CSS code is this:
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:7px 3px 10px -7px #888, -7px -3px 10px -7px #888;
    -webkit-box-shadow:7px 3px 10px -7px #888, -7px -3px 10px -7px #888;
    box-shadow:7px 3px 10px -7px #888, -7px -3px 10px -7px #888;

    And I can’t figure out how to make them match.

    Please help! Thank you.
    Timothy

    # December 11, 2012 at 9:36 am

    Hows this?

    http://codepen.io/Watson90/full/CGDKb

    # December 11, 2012 at 9:47 am

    Inspect Element in Chrome shows

    box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;

    http://codepen.io/joe/pen/uiqhD

    # December 11, 2012 at 11:11 am

    Add this to your bodyBox class;

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

    # December 11, 2012 at 11:15 am

    @Watson90

    You mean:

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

    Always gotta put the unprefixed last. :)

    …and does #888 = rgba(0, 0, 0, 0.3) ?

    # December 11, 2012 at 11:16 am

    Dammit! I always get confused about that. Must remember: **Unprefixed last** **Unprefixed last** **Unprefixed last**

    # December 11, 2012 at 11:19 am

    Take a Demerit and sit in the corner!

    ;)

    # December 11, 2012 at 1:24 pm

    OMG works like a charm. Looks outstanding. Thank you!

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

You must be logged in to reply to this topic.

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