Làm thế nào để tạo hiệu ứng đổ bóng hộp chuyên nghiệp trong div bằng cách sử dụng css

Question

Tôi đang tạo một ứng dụng mà tôi đang sử dụng div để hiển thị thông tin và và sử dụng một số jQuery để thao tác chúng.Trong ứng dụng của tôi, tôi muốn cung cấp hộp bóng cho div của tôi và cố gắng để tạo ra một cái nhìn chuyên nghiệp. Tôi đã tạo ra bóng hộp để div của tôi nhưng nó không nhìn mà chuyên nghiệp.Tôi đang sử dụng liên kết này để chuẩn bị ứng dụng của tôi. Refence UI

Bây giờ tôi muốn tạo div thông tin cá nhân của mình chính xác giống như div tóm tắt trong ứng dụng đó. Tôi cũng đăng mã của tôi những gì tôi đã làm cho đến nay trong một 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

Bây giờ bất cứ ai có thể giúp tôi làm div của tôi chính xác tương tự như ứng dụng điều đó không ?? hoặc nếu không thể thì làm thế nào để làm cho bóng hộp chỉ ở dưới đáy? Ai đó hãy giúp.

Answer 1

Tôi đã tạo chính xác cùng một hộp với nền như ứng dụng đó trên. Hy vọng nó có thể giúp bạn.

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>

Answer 2

Tôi đã cung cấp ví dụ ở đây bằng cách sử dụng HAML và SCSS. Vui lòng nhấn nút đã biên dịch để truy xuất nội dung được hiển thị. Đó là một ảo giác rất đơn giản. Bóng nền là một màu đen mềm mại. Hãy cho tôi biết nếu bạn thắc mắc gì hơn

HAML:

#my-box Hello World! 

SCSS:

$background: #3D6CAD; 
$soft-black-shadow: rgba(0,0,0,0.29); 

html, body { width: 100%; height: 100%; background: $background; } 

#my-box { 
    float: none; 
    height: 50px; 
    width: 300px; 
    margin: 0 auto; 
    margin-top: 50px; 
    padding-top: 20px; 
    text-align: center; 
    background: white; 
    box-shadow: 0 2px 3px 1px $soft-black-shadow; 
} 

http://codepen.io/Stephn_R/pen/pJwdzB

Và các chỉnh sửa áp dụng cho bạn JSFiddle