सीएसएस का उपयोग कर

Question

मैं एक आवेदन जहां मैं divs उपयोग कर रहा हूँ जानकारी दिखाने के लिए और बनाने रहा हूँ और them.In अपने आवेदन में हेरफेर करने के मैं अपने div बॉक्स छाया देना चाहता हूँ कुछ jQuery का उपयोग कर div में पेशे बॉक्स छाया प्रभाव बनाने के लिए कैसे और एक पेशेवर रूप बनाने की कोशिश कर रहा है। मैंने अपने div पर बॉक्स छाया बनाई है लेकिन यह पेशेवर नहीं दिखता है। मैं अपने आवेदन को तैयार करने के लिए इस लिंक का उपयोग कर रहा हूं। Refence UI

अब मैं अपनी व्यक्तिगत जानकारी div को उस एप्लिकेशन में सारांश div के समान ही बनाना चाहता हूं। मैं अपने कोड पोस्टिंग कर रहा हूँ क्या मैं एक बेला में अब तक क्या किया है

#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

अब किसी को भी मदद कर सकते हैं मुझे मेरे div वास्तव में है कि आवेदन के रूप में ही बनाने के लिए ?? या यदि संभव नहीं है तो बॉक्स में छाया को केवल नीचे कैसे बनाया जाए ?? कृपया कोई मदद करें।

Answer 1

के लिए आवेदन किया मेरे द्वारा बनाए गए उस आवेदती की पृष्ठभूमि के साथ बिल्कुल वही बॉक्स पर। उम्मीद है कि यह आपकी मदद कर सकता है।

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

मैंने एचएएमएल और एससीएसएस का उपयोग करके यहां एक उदाहरण दिया है। प्रस्तुत सामग्री को पुनर्प्राप्त करने के लिए कृपया संकलित बटन दबाएं। यह एक बहुत ही सरल भ्रम है। पृष्ठभूमि छाया एक मुलायम काला रंग है। मुझे पता है अगर आप किसी भी अधिक प्रश्न

Haml:

#my-box Hello World! 

एससीएसएस:

$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

और संपादन आपके JSFiddle