So erstellen Sie Beruf Box Schatteneffekt in div mit css

Question

Ich erstelle eine Anwendung, wo ich divs verwenden, um Informationen anzuzeigen und und einige jQuery verwenden, um sie zu manipulieren.In meiner Anwendung möchte ich Box Schatten zu meinem div und versuchen, ein professionelles Aussehen zu machen.Ich habe Box Schatten zu meinem div erstellt, aber es sieht nicht so professionell.Ich verwende diesen Link, um meine Anwendung vorzubereiten. Refence UI

Jetzt möchte ich meine persönlichen Informationen Div genau wie die Zusammenfassung div in dieser Anwendung erstellen. Ich veröffentliche auch meinen Code, was ich bisher in einer Geige getan haben

#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

Nun jemand kann mir helfen, meine div gleiche wie die Anwendung genau zu machen ?? oder wenn nicht möglich, dann, wie man den Kastenschatten nur unten bildet ?? Jemand bitte helfen.

Answer 1

ich erstellt habe genau die gleiche Box mit Hintergrund wie diese Applikation auf. Hoffe es kann dir helfen.

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

Ich habe hier ein Beispiel mit HAML und SCSS bereitgestellt. Bitte klicken Sie auf die kompilierte Schaltfläche, um den gerenderten Inhalt abzurufen. Es ist eine sehr einfache Illusion. Der Hintergrundschatten ist eine weiche schwarze Farbe. Lassen Sie mich wissen, wenn Sie weitere Fragen

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

Und die Änderungen angewendet auf Ihre JSFiddle