Jak utworzyć efekt cienia box zawodu w div przy użyciu css

Question

Tworzę aplikację, w której używam div, aby wyświetlić informacje i za pomocą jQuery do manipulowania nimi.W mojej aplikacji chcę nadać polu cień do mojego div i staram się wyglądać profesjonalnie. Stworzyłem cienie do mojego diva, ale nie wygląda to tak profesjonalnie. Używam tego linku do przygotowania aplikacji. Refence UI

Teraz chcę utworzyć moje dane osobowe div dokładnie takie same, jak div Podsumowanie w tej aplikacji. Ja również delegowania mój kod, co zrobiłem do tej pory w ryba

#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

Teraz ktoś może mi pomóc, aby mój div dokładnie taka sama jak tej aplikacji ?? lub jeśli nie jest to możliwe, to jak ustawić cień okna tylko na dole? Ktoś proszę o pomoc.

Answer 1

Utworzyłem dokładnie to samo pudełko z takim tłem jak ta aplikacja na. Mam nadzieję, że to może ci pomóc.

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

Podałem tutaj przykład przy użyciu HAML i SCSS. Kliknij przycisk kompilacji, aby pobrać renderowaną zawartość. To bardzo proste złudzenie. Cień tła to miękki czarny kolor. Daj mi znać, jeśli jakieś pytania

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

I edycje stosowane do JSFiddle