के रूप में मैं इस रचनात्मक करने के लिए प्राप्त कर सकते हैं पास के रूप में, एक विषम div

Question

मैं एक विषम div पर एक आंशिक छाया बनाने के लिए कोशिश कर रहा हूँ पर एक आंशिक बॉक्स छाया बना रहा है।

अभी मैं छद्म तत्वों के साथ यह करने के लिए कोशिश कर रहा है (इससे पहले कि विशेष रूप से), लेकिन मैंने पाया कि उन तत्वों अजीब तरीके से व्यवहार जब भी मैं तत्व वे पर लागू होते हैं तिरछा। छद्म तत्व मेरे div के शीर्ष पर दिखाई देता है, भले ही जेड-इंडेक्स -1 पर सेट हो। कोई फर्क नहीं पड़ता कि मैं जेड-इंडेक्स के साथ क्या करता हूं, यह इसके शीर्ष पर रहेगा। मैं चाहता हूं कि यह उस div के पीछे हो जो इसे लागू किया गया हो, और नीचे दिए गए div के सामने, रचनात्मक में।

यहाँ कोड से पहले अपने :: और

/*! Shadows */ 
#test-title { 
    position: relative; 
} 

#test-title:before { 
    z-index: -1; 
    position: absolute; 
    content: ""; 
    bottom: 15px; 
    left: 10px; 
    width: 50%; 
    top: 80%; 
    max-width:300px; 
    box-shadow: 0 15px 10px #777; 
    -webkit-transform: rotate(-3deg); 
    -moz-transform: rotate(-3deg); 
    -o-transform: rotate(-3deg); 
    -ms-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
} 

http://codepen.io/kathryncrawford/pen/WwWEma

Answer 1

Skew माता-पिता तो unskew एक ही डिग्री पर बच्चे।

* { 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    padding: 40px 0 
 
} 
 
section { 
 
    width: 60vw; 
 
    clear: both; 
 
    overflow: hidden; 
 
    min-height: 100px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    background: #035076 
 
} 
 
section article { 
 
    width: 60%; 
 
    padding: 20px; 
 
    color: white; 
 
    margin: 0 auto 
 
} 
 
section:nth-child(even) { 
 
    transform: skew(-45deg) translate(5vw); 
 
    box-shadow: inset 0 0 2px 0 black; 
 
} 
 
section:nth-child(odd) { 
 
    transform: skew(45deg); 
 
} 
 
section:nth-child(even) article { 
 
    transform: skew(45deg) translate(5vw); 
 
} 
 
section:nth-child(odd) article { 
 
    transform: skew(-45deg); 
 
} 
 
section:before, 
 
section:after { 
 
    content: ''; 
 
    position: absolute; 
 
} 
 
section:nth-child(even):before { 
 
    width: 100%; 
 
    height: 0; 
 
    bottom: 100%; 
 
    left: 0; 
 
    z-index: 6; 
 
    opacity: 1; 
 
    transform: rotate(-10deg) translateY(-30px); 
 
    box-shadow: 0px 0px 64px 30px rgba(0, 0, 0, 0.8); 
 
} 
 

 
section:nth-child(odd):not(:first-child):before { 
 
    width: 100%; 
 
    height: 0; 
 
    bottom: 100%; 
 
    right: 0; 
 
    z-index: 6; 
 
    opacity: 1; 
 
    transform: rotate(10deg) translateY(-30px); 
 
    box-shadow: 0px 0px 64px 30px rgba(0, 0, 0, 0.8); 
 
}

<section> 
 
    <article>What our clients say About Us</article> 
 
</section> 
 
<section> 
 
    <article>Read More!</article> 
 
</section> 
 
<section> 
 
    <article>Read More!</article> 
 
</section> 
 
<section> 
 
    <article>Read More!</article> 
 
</section>

Answer 2

मैं कोशिश की है codepen

सीएसएस के लिए एक लिंक है, यह सही नहीं है, लेकिन, यह है वांछित देखो के करीब, imho:

<div id="test-title"> 
      <h3>What our clients say about us</h3> 
     </div> 
     <div id="shadow1"></div> 

तो, मैंने छद्म तत्वों का उपयोग करने के बजाय नया HTML तत्व (छाया) जोड़ा है ... अब, मैंने पहले div के पीछे घुमावदार छाया div को छिपाने के लिए, जेड-इंडेक्स और पदों को ठीक से सेट किया है, और जोड़ा इस सीएसएस:

#shadow1 { 
    position:absolute; 
    width:50%; 
    height:150px; 
    background:black; 
    top:50px; 
    left:11%; 
    z-index:6; 
    opacity:1; 
transform: rotate(-5deg); 
box-shadow: 15px 56px 50px -12px rgba(0,0,0,0.80); 

} 

डेमो: एक अच्छी शुरुआत http://codepen.io/anon/pen/vGwNqY

आप रोटेशन, बॉक्स-छाया, स्थिति, ऊंचाई के साथ खेल सकते हैं ... लेकिन, इस हो सकता है (हो सकता है)। अनुलेख इसी तरह के तर्क दूसरे div पर लागू किया जा सकता है।

Answer 3

आसान दृष्टिकोण प्रत्येक बॉक्स के शीर्ष पर ड्रॉप छाया को पहले के बाद रखना होगा। यह जेड-इंडेक्स मुद्दों के सभी प्रकारों को हल करेगा, क्योंकि प्रत्येक बॉक्स इसके ऊपर के बॉक्स से 1 स्तर अधिक है .. और यह छाया को इसके बाहर के बजाय कंटेनर के अंदर बैठने की अनुमति देता है।

मैंने बॉक्स छाया के बजाए रेडियल ग्रेडियेंट * का उपयोग करने के लिए अपनी छाया स्टाइल भी बदल दी है, क्योंकि यह इस स्थिति में नियंत्रण करना थोड़ा आसान है, और यह आपके डिजाइन के करीब भी है। मैं भी स्थिति का एक सा यह थोड़ा बेहतर भी लग रही है, और के लिए अलग पक्षों पाने के लिए skew1 और skew2

मैं यह करने के लिए अपने अंतिम नियम-सेट बदल दिया है क्या किया:

.test-info:before { 
    position: absolute; 
    content: ""; 
    width: 100%; 
    left: 0; 
    top: 0; 
    height: 30px; 
} 

.test-info.skew1:before { 
    background: radial-gradient(ellipse farthest-side at 30% top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); 
} 
.test-info.skew2:before { 
    background: radial-gradient(ellipse farthest-side at 70% top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); 
} 

See Demo

* नोट: आप उस ढाल पर अतिरिक्त ब्राउज़र समर्थन को देखना/जोड़ना चाहते हैं जिसे मैंने इसे उपयोग करने से पहले रखा था।

Answer 4

:before छद्म का उपयोग कर दूसरा तत्व के लिए बॉक्स छाया बनाने की कोशिश https://jsfiddle.net/0andpzsp/

.cont { 
 
    width: 1000px; 
 
    height: 500px; 
 
} 
 

 
div[class^="d"] { 
 
    width: 70%; 
 
    height: 50%; 
 
    position: relative; 
 
    margin-left: 40px; 
 
    margin-top: 50px; 
 
} 
 

 
.d0 { 
 
    background: linear-gradient(to right, #005f8a 0%,#00486c 50%,#003a59 100%);; 
 
    transform: skew(20deg) 
 
} 
 

 
.d1 { 
 
    background: linear-gradient(to right, #005f8a 0%,#00486c 50%,#003a59 100%);; 
 
    overflow: hidden; 
 
    top: -50px; 
 
    left: 20%; 
 
    transform: skewX(-20deg); 
 
    z-index: -1 
 
} 
 

 
.d1:before { 
 
    content: ''; 
 
    border-radius: 30%; 
 
    position: absolute; 
 
    display: block; 
 
    width: 600px; 
 
    height: 70px; 
 
    z-index: 9999; 
 
    top: -100px; 
 
    left: -70px; 
 
    box-shadow: -50px 60px 90px 0px #000; 
 
    transform: rotate(-5deg) 
 
}

<div class="cont"> 
 
    <div class="d0"></div> 
 
    <div class="d1"> 
 
    </div> 
 
</div>