All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

CSS Drop Shadow

  • TWG
    # 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; }
    TWG
    # December 29, 2011 at 4:29 pm

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    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; ?

    TWG
    # December 29, 2011 at 5:24 pm

    This reply has been reported for inappropriate content.

    I did not. Thank you very much @31M1K97

    TWG
    # December 29, 2011 at 5:29 pm

    This reply has been reported for inappropriate content.

    @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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed