Grow your CSS skills. Land your dream job.

CSS Drop Shadow

  • # December 29, 2011 at 4:10 pm

    I’ve been playing around with the Gantry framework for WordPress and some new CSS tricks.

    I’m trying to apply a drop shadow to the left and right sides of divs. I’ve been looking at an example that I found online but I’m still a little lost. One one specific div I want to also have the drop shadow on the left, right, and bottom side of a div.

    The code that I’m playing around with is:

    .rt-container { box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #888; }
    # December 29, 2011 at 4:29 pm

    http://jsfiddle.net/maddtechwf/g6XKY/

    I have gotten my main item figured out but I’m trying to figure out why there is a blank area between the box-shadow’s on the left and right sides of the divs.

    # December 29, 2011 at 4:46 pm

    Because the divs aren’t connected together. If you want it to be down the side of both of them combined, then you’ll need to wrap them both in another div and put the shadow on the wrapper instead.

    # December 29, 2011 at 4:47 pm

    box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #888;

    the first -7px must be 7px (;

    EDIT:
    you know the values are like this: margin-left, margin-top, blur-factor, border; ?

    # December 29, 2011 at 5:24 pm

    I did not. Thank you very much @31M1K97

    # December 29, 2011 at 5:29 pm

    @TheDoc,
    Looks like I’m going to have to ditch the Gantry framework for this project. The framework doesn’t appear to allow this to be done easily.

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

You must be logged in to reply to this topic.

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