Shadow for content area

• 

  realagenda · Member · Jul 30, 2011 at 12:22 am

  • Copy link
  • Add topic to favorites

  How could I add a shadow to my content area or .post?

  Would it be the same for the right bar?

  Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  timethief · Member · Jul 30, 2011 at 12:29 am

  • Copy link

  Is this a CSS editing question?

• 

  realagenda · Member · Jul 30, 2011 at 12:38 am

  • Copy link

  yes

• 

  thesacredpath · Member · Jul 30, 2011 at 2:16 am

  • Copy link

  Did you want to do the overall post area (.entry) or the individual posts? Same on sidebar, whole sidebar or individual widgets?

• 

  realagenda · Member · Jul 30, 2011 at 11:27 am

  • Copy link

  I would like to do the .post area, and since there is no space between the post area and the bar, I believe, I would like to do it to the bar so it all looks like a “raised” block off the background. Does it make sense?

  Thanks!

• 

  thesacredpath · Member · Jul 30, 2011 at 12:46 pm

  • Copy link

  The following will cover most modern browsers, but like with everything else, some versions of IE don’t understand (8, 7 and earlier). I had to do a little tweaking to the padding and sidebar width. As you will notice, the shadow on the sidebar ends at the bottom of the last widget. To get that to continue down to the bottom of the site, you have to put the shadow on #content rather than #sidebar and then you will also have to tweak some margins and padding so that they come out the same on the bottom.

  .post {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
  }
  
  #sidebar {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
  padding-right: 10px;
  width: 290px;
  }

• 

  thesacredpath · Member · Jul 30, 2011 at 12:48 pm

  • Copy link

  Here are a couple good box shadow references.

  http://css-tricks.com/snippets/css/css-box-shadow/
  http://dev.opera.com/articles/view/cross-browser-box-shadows/

• 

  realagenda · Member · Jul 30, 2011 at 3:25 pm

  • Copy link

  Thanks for the help and the tips!

• 

  thesacredpath · Member · Jul 30, 2011 at 5:21 pm

  • Copy link

  You are welcome.

• 

  realagenda · Member · Jul 30, 2011 at 9:00 pm

  • Copy link

  I tried the two pieces of code you provided me and they did affect the .post and the #sidebar well to create the shadow, however, the #sidebar or its content moved down to the bottom of the site.

  Do I need to adjust any values?

• 

  realagenda · Member · Jul 30, 2011 at 9:03 pm

  • Copy link

  Also, since there is no space between the .post and the sidebar, how could I make it so the shadow that belongs to the .post appears on the left side instead of the right?

• 

  thesacredpath · Member · Jul 31, 2011 at 12:23 am

  • Copy link

  Well, Firebug sort of failed me as the sidebar did not move down when I entered the cold before. It did however when I reentered the code this time. I had to make a number of changes and fixed a few other things that adding the box shadows revealed. I also did the sidebar without having to narrow it and took the space needed out of #main instead. Taking that space though did not affect the width of the post area, just made it narrower and took out some of the left and right padding. See what you think with this.

  #header {
  height: 140px;
  }
  
  #header-image {
  position: relative;
  z-index: -1000;
  }
  
  #main {
  width: 595px;
  }
  
  .post {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
  padding-left: 30px;
  padding-right: 20px;
  }
  
  #sidebar {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
  margin-right: 7px;
  padding-left: 10px;
  padding-right: 15px;
  }

• 

  realagenda · Member · Jul 31, 2011 at 1:12 am

  • Copy link

  I am sorry to be a pain, but the sidebar still moves down. I tried adjusting the padding for both the sidebar and the .post but nothing changed.

• 

  thesacredpath · Member · Jul 31, 2011 at 1:37 am

  • Copy link

  I’m not sure what is going on. This works just fine for me and the sidebar stays right where it should be. I even copied out all of your CSS and put it into my test blog so that I would be working directly. It shows fine in Firefox, Safari and Opera on my Mac.

  What browser are you using?

  Give this a try. We’ll take the sidebar out of the equation and add the box shadow to #content instead.

  `#header {
  height: 140px;
  }

  #header-image {
  position: relative;
  z-index: -1000;
  }

  #content {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
  }

  #main {
  width: 595px;
  }

  .post {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
  margin-bottom: 0;
  padding-left: 30px;
  padding-right: 20px;
  }

  #sidebar {
  padding-right: 15px;
  }’

• 

  thesacredpath · Member · Jul 31, 2011 at 1:42 am

  • Copy link

  If the above works, add this to #content as well and see what you think. It sort of helps to make the entire content area appear as if it is floating above the background.

  border-left: 1px solid #EEEEEE;

• 

  realagenda · Member · Jul 31, 2011 at 1:51 am

  • Copy link

  The last code created the shadow effect on the content are and the bar area, but the information contained in the bar went down again. I did not copy the quote symbols at the beginning and end of the code ‘{ }’.

• 

  realagenda · Member · Jul 31, 2011 at 1:52 am

  • Copy link

  I am using Firefox and Explorer

• 

  thesacredpath · Member · Jul 31, 2011 at 1:58 am

  • Copy link

  I messed up on my backticks when I posted the code. I’m just not seeing the sidebar go to the bottom in Firefox. Let’s try this. I’ve narrowed #main a little more.

  #header {
  height: 140px;
  }
  
  #header-image {
  position: relative;
  z-index: -1000;
  }
  
  #content {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
  }
  
  #main {
  width: 585px;
  }
  
  .post {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
  margin-bottom: 0;
  padding-left: 30px;
  padding-right: 20px;
  }
  
  #sidebar {
  padding-right: 15px;
  }

• 

  thesacredpath · Member · Jul 31, 2011 at 2:02 am

  • Copy link

  If it goes to the bottom this time, leave it up and do a save stylesheet so that I can take a look directly on your site.

• 

  realagenda · Member · Jul 31, 2011 at 2:13 am

  • Copy link

  It did go down again. I am saving it for a few minutes so you can take a look.

  Thanks!