How to shadow a whole div

  • 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

Viewing 2 replies - 1 through 2 (of 2 total)

  • 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]

    Thread Starter Bryan Cady

    (@bobcatou)

    https://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 https://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

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to shadow a whole div’ is closed to new replies.

Tags