How to create profession box shadow effect in div using css

Question

I am creating an application where i am using divs to show information and and using some jQuery to manipulate them.In my application i want to give box shadow to my div and trying to make a professional look.I have created box shadow to my div but it does not look that professional.I am using this link to prepare my application. Refence UI

Now i want to create my personal information div exactly same as the Summary div in that application. I am also posting my code what i have done so far in a fiddle

#personalInformation{
    font-size: 1em;
    border-bottom: 3px solid #98AFC7;
    border-top: 3px solid #98AFC7;
    border-left: 3px solid #98AFC7;
    border-right: 3px solid #98AFC7;    
    box-shadow: 10px 10px 5px;
    line-height: 0; 
    width: 45%;
}

My sample code

Now can anyone help me to make my div exactly same as that application ?? or if not possible then how to make the box shadow in bottom only?? Somebody please help .

Answer 1

I've created exactly same box with background like that application. Hope it may help you.

html {
      font-size: 10px;
    }

    body {
      font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size: 100%;
      font-weight: 400;
      line-height: 1.42857143;
      background-color: #f4f4f4;
      color: #404040;
    }

    .content {
      float: left;
      width: 870px;
    }
      .content::after {
        content: "";
        clear: both;
        display: table;
      }

    .box {
      padding: 5px 15px;
      background: #fff;
      box-shadow: 0 1px 2px #c9c9c9;
      -moz-box-shadow: 0 1px 2px #c9c9c9;
      -webkit-box-shadow: 0 1px 2px #c9c9c9;
      border-radius: 2px;
      margin-bottom: 15px;
    }
    .box:hover {
      box-shadow: 0 2px 2px #bababa;
      -moz-box-shadow: 0 2px 2px #bababa;
      -webkit-box-shadow: 0 2px 2px #bababa;
    }
      .box h5 {
        font-size: 1.4rem;
        margin-top: 10px;
        margin-bottom: 10px;
        line-height: 1.1;
      }
      .box p {
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 1.5;
        margin: 0 0 10px;
      }

<div class="content">

  <div id="your-id" class="box">
    <div class="box-content">
      <h5>Caption</h5>
      <p id="your-id">Not Mentioned</p>
      <h5>Skills/Competencies</h5>
      <p id="your-id">Layout  ,CSS  ,JavaScript  ,jQuery  ,HTML5  ,WordPress  ,Web Design  ,Web Development  ,HTML  ,PHP  ,AJAX  ,Cross-browser Compatibility  ,CSS3  ,UI/UX  ,Expert Frontend Developer  ,Responsive Web Design  ,Website Development  ,Web 2.0  ,Dreamweaver  ,Web Applications  ,Image Manipulation  ,Drupal  ,MySQL  ,Web Application Design  ,Web Interface Design  ,SVG  ,Front-end Development            </p>
      <h5>Resumes</h5>
      <p id="your-id">not mentioned</p>
    </div>
  </div><!-- .box -->
  
</div>