सीएसएस जेड-इंडेक्स विरोधाभास फूल

Question

मैं z-index सीएसएस संपत्ति के माध्यम से एक विरोधाभासी प्रभाव पैदा करना चाहूंगा ।

मेरे कोड में मेरे पास पांच मंडलियां हैं, जैसे नीचे दी गई छवि में, और वे सभी बिल्कुल परिभाषित नहीं के साथ तैनात हैं z-index। इसलिए, डिफ़ॉल्ट रूप से, प्रत्येक सर्कल पिछले एक को ओवरलैप करता है।

अभी, सर्कल 5 ओवरलैप सर्कल 1 (बाईं छवि)। मैं जिस विरोधाभास को प्राप्त करना चाहूंगा, उसी समय, सर्कल 1 को सर्कल 2 के नीचे और सर्कल 5 के ऊपर (सही छवि में)।

_{(स्रोत: schramek.cz )}

यहाँ मेरा कोड है

मार्कअप:

<div class="item i1">1</div>
<div class="item i2">2</div>
<div class="item i3">3</div>
<div class="item i4">4</div> 
<div class="item i5">5</div>

सीएसएस

.item {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    background: silver;
    border-radius: 50%;
    text-align: center;
}

.i1 { position: absolute; top: 30px; left: 0px; }
.i2 { position: absolute; top: 0px; left: 35px; }
.i3 { position: absolute; top: 30px; left: 65px; }
.i4 { position: absolute; top: 70px; left: 50px; }
.i5 { position: absolute; top: 70px; left: 15px; }

एक जीवंत उदाहरण http://jsfiddle.net/Kx2k5/ पर भी उपलब्ध है ।

मैंने स्टैकिंग ऑर्डर, स्टैकिंग संदर्भ और इसी तरह की तकनीकों की बहुत कोशिश की। मैंने इन तकनीकों के बारे में कुछ लेख पढ़े, लेकिन कोई सफलता नहीं मिली। इसे कैसे हल किया जा सकता है?

Comments

अगर यह सिर्फ एक कोडिंग चुनौती है, तो शायद यह कोडगोल्फ पर आधारित है?

— टाइलर

मुझे लगता है कि ओपी मदद की तलाश में है। वह इसे हल करने के लिए उसके लिए एक चुनौती होने का मतलब है। मुझे लगता है कि यह कुछ ऐसा है जो एक बार किए जाने से बहुत कुछ सीखेगा। मैं एक के लिए इस तकनीक को उपयोगी पा सकता हूं।

— लॉट्स

@ 1ubos। जोक / जेएस नहीं है? यह मुझे लगता है कि इसे IndexOf के कुछ तार्किक उपयोग की आवश्यकता होगी

— LOTUSMS

z- इंडेक्स का उपयोग करके यह संभव नहीं है। z-index परतों को परिभाषित कर रहा है, इसके पूर्णांक संख्याओं का एक क्रम: -x, 0, x जो आपके पास नहीं है: X1 <x2 <X1

— gondo

कृपया एक नकली कोड ब्लॉक के साथ गुणवत्ता फ़िल्टर को दरकिनार न करें। या तो प्रश्न में कोड को शामिल करें, या यदि आवश्यक नहीं है तो फिडल लिंक को हटा दें। इसके अलावा, मैं आपको सलाह दूंगा कि यदि आप चाहते हैं कि आपके प्रश्न को गंभीरता से लिया जाए, तो आप इसे चुनौती के बजाय शोध के साथ एक वास्तविक समस्या में बदल सकते हैं।

— BoltClock

Answer 1

यहाँ मेरी प्रयास है: http://jsfiddle.net/Kx2k5/1/
(सफलतापूर्वक पर परीक्षण किया Fx27, Ch33, IE9, Sf5.1.10और Op19)

---

सीएसएस

.item {
   /* include borders on width and height */  
   -webkit-box-sizing : border-box;
   -moz-box-sizing    : border-box;
   box-sizing         : border-box;
   ...
}

.i1:after {
   content: "";

   /* overlap a circle over circle #1 */
   position : absolute;
   z-index  : 1;
   top      : 0;
   left     : 0;
   height   : 100%;
   width    : 100%;

   /* inherit border, background and border-radius */
   background    : inherit;
   border-bottom : inherit;
   border-radius : inherit;

   /* only show the bottom area of the pseudoelement */
   clip          : rect(35px 50px 50px 0);
}

मूल रूप से मैंने :afterपहले वृत्त (कुछ गुणों के साथ विरासत में मिला) पर छद्म अधिप्राप्ति को ओवरलैप किया है , फिर मैंने इसे clip()संपत्ति के साथ जोड़ दिया है , इसलिए मैं केवल इसका निचला भाग दृश्यमान बनाता हूं (जहां वृत्त वृत्त को #1ओवरलैप करता है #5)।

सीएसएस गुण मैं यहाँ का उपयोग किया है के लिए, इस उदाहरण IE8 पर भी काम कर रहा होना चाहिए ( box-sizing, clip(), inherit, और pseudoelements वहाँ समर्थित हैं)

---

परिणामी प्रभाव का स्क्रीनशॉट

Comments

लगता है कि मैं पार्टी में देर से पहुंचा! बहुत बढ़िया! : पी

— रूडी

न केवल मैंने आज कुछ सीएसएस सीखा है, बल्कि मेरे इतालवी को थोड़ा सा भी ब्रश किया है: डी धन्यवाद

— नेटन स्ट्रेपल

Answer 2

मेरी कोशिश भी इस्तेमाल कर रही है clip। आधा और आधा के लिए विचार था div। इस तरह सेटिंग z-indexकाम करेगी।

तो आप ऊपर के हिस्से को z-index: -1और नीचे के हिस्से को सेट कर सकते हैं z-index: 1।

परिणाम:

.item {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 1px solid red;
  background: silver;
  border-radius: 50%;
  text-align: center;
}
.under {
  z-index: -1;
}
.above {
  z-index: 1;
  overflow: hidden;
  clip: rect(30px 50px 60px 0);
}
.i1 {
  position: absolute;
  top: 30px;
  left: 0px;
}
.i2 {
  position: absolute;
  top: 0px;
  left: 35px;
}
.i3 {
  position: absolute;
  top: 30px;
  left: 65px;
}
.i4 {
  position: absolute;
  top: 70px;
  left: 50px;
}
.i5 {
  position: absolute;
  top: 70px;
  left: 15px;
}

<div class="item i1 under">1</div>
<div class="item i1 above">1</div>
<div class="item i2">2</div>
<div class="item i3">3</div>
<div class="item i4">4</div>
<div class="item i5">5</div>

यहाँ डेमो

नोट: IE 10+, FF 26 +, Chrome 33+ और Safari 5.1.7+ पर परीक्षण किया गया।

Comments

इस प्रश्न के साथ कोई विचार: stackoverflow.com/questions/22377416/how-to-warp-image#22377416

— NoobEditor

Answer 3

यहाँ मेरा उस पर जाना है।

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

डेमो

CSS (जो प्रारंभिक बिंदु से अलग है)

.i1 { 
  position: absolute; top: 30px; left: 0px;
  &:before {
    content: '';
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius:  50%;
    box-shadow: inset 5px -5px 0 6px silver;
    border-bottom: solid 1px red;
  }
}

अंतिम उत्पाद

Comments

अच्छा उत्तर! केवल एक ही मुद्दा मुझे लगता है कि बॉक्स-छाया आईई 8 और नीचे द्वारा समर्थित नहीं है। छद्म-तत्व IE 7 और वैसे भी नीचे से समर्थित नहीं हैं :)

— द प्रैग्मेटिक

Answer 4

अफसोस की बात है कि निम्नलिखित केवल एक सैद्धांतिक जवाब है, क्योंकि किसी कारण से मुझे -webkit-transform-style: preserve-3d;काम नहीं मिल सकता है (कुछ स्पष्ट गलती करना है, लेकिन यह पता नहीं लग सकता है)। किसी भी तरह से, आपके प्रश्न को पढ़ने के बाद मैं - जैसा कि हर विरोधाभास के साथ था - सोचता था कि यह केवल एक वास्तविक कारण के बजाय एक स्पष्ट असंभवता क्यों है। एक और कुछ सेकंड मुझे पता चलता है कि वास्तविक जीवन में पत्तियों को थोड़ा घुमाया जाता है, इस प्रकार ऐसी चीज को अस्तित्व में रखने की अनुमति मिलती है। इसलिए तब मैं तकनीक का एक सरल प्रदर्शन करना चाहता था, लेकिन पिछली संपत्ति के बिना यह असंभव है (यह फ्लैट माता-पिता के लिए तैयार हो जाता है)। किसी भी तरह से, यहाँ आधार कोड कम नहीं है

<div class="container">
    <div>
        <div class="i1 leaf">
            <div class="item">1</div>
        </div>
        <div class="i2 leaf">
            <div class="item">2</div>
        </div>
        <div class="i3 leaf">
            <div class="item">3</div>
        </div>
        <div class="i4 leaf">
            <div class="item">4</div>
        </div>
        <div class="i5 leaf">
            <div class="item">5</div>
        </div>
    </div>
</div>

और सीएसएस:

.i1 {
    -webkit-transform:rotateZ(288deg)
}
.i2 {
    -webkit-transform:rotateZ(0deg)
}
.i3 {
    -webkit-transform:rotateZ(72deg)
}
.i4 {
    -webkit-transform:rotateZ(144deg)
}
.i5 {
    -webkit-transform:rotateZ(216deg)
}
.leaf { 
    position:absolute;
    left:35px;
    top:35px;
}
.leaf > .item {
    -webkit-transform:rotateY(30deg) translateY(35px)
}

और आप यहाँ पूरा कोड पा सकते हैं ।

Comments

सफारी में मेरे लिए काम करता है 7.0.2; शायद यह आपका ब्राउज़र है? - संपादित करें - Mehehe, संरक्षण-3 डी वास्तव में काम नहीं कर रहा। उचित 3D वैसे भी, :)

— tomsmeding

Answer 5

जेएस फिडल

एचटीएमएल

<div class="item i1">1</div>
<div class="item i2">2</div>
<div class="item i3">3</div>
<div class="item i4">4</div>
<div id="five">5</div>
<div class="item2 i5"></div>
<div class="item3 i6"></div>

सीएसएस

.item {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    background: silver;
    border-radius: 50%;
    text-align: center;
}
.item2 {
      width: 25px;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    border-right: none;
    border-radius: 50px 0 0 50px;
    background: silver 50%;
    background-size: 25px;
    text-align: center;   
        z-index: -3;
}
.item3 {
    width: 25px;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    border-left: none;
    border-radius: 0 50px 50px 0;
    background: silver 50%;
    background-size: 25px;
    text-align: center;    
}
.i1 {
    position: absolute;
    top: 30px;
    left: 0px;
}
.i2 {
    position: absolute;
    top: 0px;
    left: 35px;
}
.i3 {
    position: absolute;
    top: 30px;
    left: 65px;
}
.i4 {
    position: absolute;
    top: 70px;
    left: 55px;
}
.i5 {
    position: absolute;
    top: 70px;
    left: 15px;
}
.i5 {
    position: absolute;
    top: 72px;
    left:19px;

}
.i6 {
    position: absolute;
    top: 72px;
    left: 44px;
}
#five {
     position: absolute;
    top: 88px;
    left: 40px;
    z-index: 100;
}

Comments

आप अनावश्यक चीजों को हटाकर item2और अपने कोड को थोड़ा छोटा कर सकते थे item3। और यह भी ले जाया गया position: absoluteमें .ixऔर #fiveमें item, item2औरitem3

— webprogrammer

Answer 6

जेएस फिडल लाइव DEMO

IE8 पर भी काम करता है।

एचटीएमएल

<div class="half under"><div class="item i1">1</div></div>
<div class="half above"><div class="item i1">1</div></div>
<div class="item i2">2</div>
<div class="item i3">3</div>
<div class="item i4">4</div> 
<div class="item i5">5</div>

सीएसएस

.item {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    background: silver;
    border-radius: 50%;
    text-align: center;
}
.half {
    position: absolute;
    overflow: hidden;
    width: 52px;
    height: 26px;
    line-height: 52px;
    text-align: center;
}
.half.under {
    top: 30px; 
    left: 0px;
    z-index: -1;
    border-radius: 90px 90px 0 0;
}
.half.above {
    top: 55px;
    left: 0px;
    z-index: 1;
    border-radius: 0 0 90px 90px;
}
.half.above .i1 { margin-top:-50%; }
.i2 { position: absolute; top: 0px; left: 35px;}
.i3 { position: absolute; top: 30px; left: 65px;}
.i4 { position: absolute; top: 70px; left: 50px; }
.i5 { position: absolute; top: 70px; left: 15px; }