সিএসএস জেড-ইনডেক্স প্যারাডক্স ফুল

Question 1

আমি z-index সিএসএস সম্পত্তির মাধ্যমে একটি প্যারাডক্সিকাল প্রভাব তৈরি করতে চাই ।

আমার কোডে আমার পাঁচটি চেনাশোনা রয়েছে, যেমন নীচের চিত্রটিতে রয়েছে এবং সেগুলি পুরোপুরি কোনও সংজ্ঞায়িত অবস্থায় রয়েছে z-index। সুতরাং, ডিফল্টরূপে, প্রতিটি বৃত্ত পূর্ববর্তীটিকে ওভারল্যাপ করে।

এখনই, 5 টি ওভারল্যাপ সার্কেল 1 (বাম চিত্র) চাপুন। আমি যে প্যারাডক্সটি অর্জন করতে চাই তা একই সাথে, বৃত্ত 2 এর অধীনে 1 এবং বৃত্ত 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/ এও উপলব্ধ ।

স্ট্যাকিং অর্ডার, স্ট্যাকিং প্রসঙ্গ এবং আরও অনেকগুলি কৌশল নিয়ে চেষ্টা করেছি। আমি এই কৌশলগুলি সম্পর্কে কিছু নিবন্ধ পড়ি, কিন্তু কোনও সাফল্য পাই নি। আমি কীভাবে এটি সমাধান করতে পারি?

Question 2

এখানে আমার প্রয়াস আছে: 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)।

CSS এর বৈশিষ্ট্য আমি এখানে ব্যবহার করেছি, এই উদাহরণ IE8 এমনকি কাজ হওয়া উচিত ( box-sizing, clip(), inherit, এবং pseudoelements সেখানে সাপোর্ট করে)

ফলাফল প্রভাবের স্ক্রিনশট

এখানে চিত্র বর্ণনা লিখুন

Question 3

আমার চেষ্টাও ব্যবহার করছে 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>

স্নিপেট প্রসারিত করুন

এখানে ডেমো

দ্রষ্টব্য: আইই 10+, এফএফ 26 +, ক্রোম 33+ এবং সাফারি 5.1.7+ এ পরীক্ষিত।

Question 4

এখানে আমার যেতে।

আমি প্রথম বৃত্তের শীর্ষে অবস্থিত একটি সিউডো উপাদানও ব্যবহার করি, তবে ক্লিপটি ব্যবহার না করে, আমি এর পটভূমিটি স্বচ্ছ রাখি এবং কেবল এটিকে একটি ইনসেট বক্স-ছায়া দিই যা বৃত্তের পটভূমির (রূপালী) রঙের সাথে একটি লাল রঙের সাথে মেলে বৃত্তের সীমানার নীচে ডান দিকগুলি কভার করতে সীমানা।

ডেমো

সিএসএস (এটি সূচনা পয়েন্ট থেকে পৃথক)

.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;
  }
}

চূড়ান্ত পণ্য এখানে চিত্র বর্ণনা লিখুন

Question 5

দুঃখজনকভাবে নিম্নলিখিতটি কেবল একটি তাত্ত্বিক উত্তর, কারণ কোনও কারণে আমি কাজ করতে পারি না -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)
}

এবং আপনি এখানে পুরো কোড খুঁজে পেতে পারেন ।

Question 6

জেএস ফিডল

এইচটিএমএল

<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;
}

Question 7

জেএস ফিডল লাইভ ডেমো

আইই 8 তেও কাজ করে।

এইচটিএমএল

<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; }