Adding Drop Shadow Effect To Pages

Community Forums Forums Design Tips and Tricks Adding Drop Shadow Effect To Pages

This topic is: resolved

This topic contains 2 replies, has 2 voices, and was last updated by  suspectsteve 2 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #13190


    I’ve been racking my brain all day trying to create a drop shadow using CSS3 code over my wordpress pages. I’ve seen responses for text and images posted here, but nothing for the page as a whole. The idea is to create¬†separation¬†between the background image and the main page. Where I add this code? (I’m a noob, so be gentle)

    -moz-box-shadow: 0 1px 2px #666;
    -webkit-box-shadow: 0 1px 2px #666;
    box-shadow: 0 1px 1px #666;

    website: (Imagine a drop shadow over the main page so it stands out from the green background.)

    Thank you!



    Hey suspectsteve,

    I took a look at your site, in Firefox, and the drop-shadow is there (#inner .wrap), just faint, so you may need to darken your gray to achieve the effect your after. I changed the color to black (#000), and increased the sizes, and it started showing more prominent. But from what I see, your syntax is correct, however, you may want to change your “box-shadow” line to match your sizes of your other vendor prefixed lines, for consistency.

    Hope that helps.



    Now I regret not posting this sooner! You were absolutely right. Thanks for the help.



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

The topic ‘Adding Drop Shadow Effect To Pages’ is closed to new replies.