WordPress.org

Ready to get started?Download WordPress

Forums

How to shadow a whole div (3 posts)

  1. bobcatou
    Member
    Posted 2 years ago #

    I have a background picture that I like very much. One of the divs over it has text and all I want is the text over the background. The background does bleed some of the text out so what I would like to do is darken shadow the entire div but so you can still see the background underneath. Just like a box shadow. I tried messing with the box shadow variables but haven't been able to get it to work. Am I missing some CSS attribute that I can do this with?

    Thanks
    Bryan

  2. Rupam Guha
    Member
    Posted 2 years ago #

    The standards way

    .shadow {
    box-shadow: 3px 3px 4px #000;
    }

    For Internet Explorer

    .shadow {
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
    }

    So combined styles

    .shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
    }

    [signature moderated]

  3. bobcatou
    Member
    Posted 2 years ago #

    http://www.listentothewind.com/temp/example.jpg
    That gives the box shadow but I want to give the whole div widget area a shadow.

    My test site http://www.listentothewind.com/lttw_test

    I want to do this from under the quote to above the footer.

    I want to be able to see the background underneath with the items on top. Now the background is washing out the text. I thought a shadow might fix that. Not an additional background on top. I might have to resort to Photoshop.

    Thanks for the help

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags