How to Add Drop Shadows to Middle Column of Page?

4 replies
  • WEB DESIGN
  • |
Might someone be able to help me figure out how to add drop shadows to the middle column of this site so that it looks similar to this?

I was looking at a few plugins (the website is Wordpress) that make drop shadows, but they seemed to be more for creating boxes with drop shadows, rather that being able to add shadows to existing objects.

Thanks for your help.
#add #column #drop #middle #page #shadows
  • Profile picture of the author Michael71
    CSS3: box-shadow
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8167494].message }}
  • Profile picture of the author dassad
    This should work for your site:

    Open your theme's stye.css and on the really end of that file add these lines:

    PHP Code:
    .art-sheet {
    -
    webkit-box-shadow0px 0px 4px 0px #333333;
    box-shadow0px 0px 4px 0px #333333;

    This should work but make a backup before the changes.
    {{ DiscussionBoard.errors[8168395].message }}
    • Profile picture of the author mrniceguy123
      Originally Posted by dassad View Post

      This should work for your site:

      Open your theme's stye.css and on the really end of that file add these lines:

      PHP Code:
      .art-sheet {
      -
      webkit-box-shadow0px 0px 4px 0px #333333;
      box-shadow0px 0px 4px 0px #333333;

      This should work but make a backup before the changes.
      Awesome! Now just so I can play around with it to try different looks, how would I go about increasing or decreasing the size of the shadow? I tried increasing the pixel numbers for the 4 in the code above, but that doesn't seem to do the trick...
      {{ DiscussionBoard.errors[8170557].message }}
  • Profile picture of the author Michael71
    Code:
    .art-sheet { 
    -webkit-box-shadow: 0 0 4px #333; 
    -moz-box-shadow: 0 0 4px #333;
    box-shadow: 0 0 4px #333; 
    }
    Use this

    You can play with this tool to learn how to use box-shadow

    http://www.css3-generator.de/box-shadow.html
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8170649].message }}

Trending Topics