How to create a div shadows like Apple.com?

Question

I have two questions about creating shadows like www.apple.com/ipodshuffle...

1. On the website, you'll see the main section with a white background - it contains all the information about the iPod Shuffle. The right, left and bottom of this main section have a shadow, but the top does not. How do I code this?

2. Just above the 2nd image of the iPod Shuffles (where they're all stacked on top of each other, and the text reads "Design. As beautiful as it is wearable.") there is a shadow border that looks like it's popping out of the page, and then fading back into the page. How do I code this?

Answer 1

Here's the code you're searching for :

.box{
  padding: 20px;
  border-radius: 5px;
  
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
}

<div class="box">
  Lorem ipsum
</div>

More informations about box-shadow here : http://www.css3.info/preview/box-shadow/

For the central shadow, they just used an image.