CSS ग्रिड और कस्टम आकार, भाग 2

ठीक है, तो पिछली बार हमने चेक इन किया था, हम CSS ग्रिड का उपयोग कर रहे थे और उन्हें CSS के साथ जोड़ रहे थे clip-path और mask फैंसी आकृतियों के साथ ग्रिड बनाने की तकनीक।

यहां हमने एक साथ बनाए गए शानदार ग्रिडों में से एक है:

दूसरे दौर के लिए तैयार हैं? हम अभी भी CSS ग्रिड के साथ काम कर रहे हैं, clip-path, तथा mask, लेकिन इस लेख के अंत तक, हम ग्रिड पर छवियों को व्यवस्थित करने के विभिन्न तरीकों के साथ समाप्त करेंगे, जिसमें कुछ रेड होवर प्रभाव शामिल हैं जो चित्रों को देखने के लिए एक प्रामाणिक, इंटरैक्टिव अनुभव प्रदान करते हैं।

और क्या? हम का उपयोग कर रहे हैं वही मार्कअप जो हमने पिछली बार इस्तेमाल किया था. यहाँ वह फिर से है:

<div class="gallery">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <!-- as many times as we want -->
</div>

पिछले लेख की तरह, हमें केवल छवियों के साथ एक कंटेनर की आवश्यकता है। और कुछ नहीं!

नेस्टेड छवि ग्रिड

पिछली बार, हमारे ग्रिड, सामान्य छवि ग्रिड थे। साफ-सुथरी आकृतियों के अलावा हमने उनके साथ मुखौटा लगाया, वे सुंदर मानक सममित ग्रिड थे जहां तक ​​​​हमने छवियों को अंदर कैसे रखा।

आइए ग्रिड के केंद्र में एक छवि को नेस्ट करने का प्रयास करें:

हम चार छवियों के लिए 2✕2 ग्रिड सेट करके शुरू करते हैं:

.gallery {
  --s: 200px; /* controls the image size */
  --g: 10px; /* controls the gap between images */

  display: grid;
  gap: var(--g);
  grid-template-columns: repeat(2, auto);
}
.gallery > img {
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
}

अभी कुछ भी जटिल नहीं है। अगला कदम नेस्टेड छवि के लिए जगह बनाने के लिए हमारी छवियों के कोने को काटना है। मेरे पास पहले से ही एक विस्तृत लेख है का उपयोग करके कोनों को कैसे काटें clip-path और mask. आप my . का भी उपयोग कर सकते हैं ऑनलाइन जनरेटर कोनों को मास्क करने के लिए सीएसएस प्राप्त करने के लिए।

यहां हमें जो चाहिए वह है कोनों को बराबर कोण पर काटना है 90deg. हम उसी का उपयोग कर सकते हैं शंकु-ढाल तकनीक उस लेख से ऐसा करने के लिए:

.gallery > img {
   mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) { --_a: 90deg; }
.gallery > img:nth-child(2) { --_a: 180deg; }
.gallery > img:nth-child(3) { --_a: 0deg; }
.gallery > img:nth-child(4) { --_a:-90deg; }

हम उपयोग कर सकते हैं clip-path उसी लेख से कोनों को काटने की विधि, लेकिन ग्रेडिएंट के साथ मास्किंग यहां अधिक उपयुक्त है क्योंकि हमारे पास सभी छवियों के लिए समान कॉन्फ़िगरेशन है - हमें केवल एक रोटेशन की आवश्यकता है (चर के साथ परिभाषित) --_a) प्रभाव प्राप्त करें, इसलिए हम बाहरी किनारों के बजाय अंदर से मास्किंग कर रहे हैं।

अब हम नेस्टेड छवि को नकाबपोश स्थान के अंदर रख सकते हैं। सबसे पहले, आइए सुनिश्चित करें कि हमारे पास HTML में पाँचवाँ छवि तत्व है:

<div class="gallery">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
</div>

हम इसे वहां रखने के लिए अच्छे राजभाषा 'निरपेक्ष स्थिति पर भरोसा करने जा रहे हैं:

.gallery > img:nth-child(5) {
  position: absolute;
  inset: calc(50% - .5*var(--s));
  clip-path: inset(calc(var(--g) / 4));
}

RSI inset संपत्ति हमें एक घोषणा का उपयोग करके छवि को केंद्र में रखने की अनुमति देती है। हम छवि के आकार को जानते हैं (चर के साथ परिभाषित --s), और हम जानते हैं कि कंटेनर का आकार 100% के बराबर है। हम कुछ गणित करते हैं, और प्रत्येक किनारे से दूरी बराबर होनी चाहिए (100% - var(--s))/2.

आप सोच रहे होंगे कि हम इसका उपयोग क्यों कर रहे हैं clip-path यहाँ बिल्कुल। हम इसका उपयोग नेस्टेड छवि के साथ एक सुसंगत अंतर रखने के लिए कर रहे हैं। यदि हम इसे हटा दें, तो आप देखेंगे कि हमारे पास सभी छवियों के बीच समान अंतर नहीं है। इस तरह, हम पाँचवीं छवि से उसके चारों ओर उचित रिक्ति प्राप्त करने के लिए थोड़ा सा काट रहे हैं।

पूरा कोड फिर से:

.gallery {
  --s: 200px; /* controls the image size */
  --g: 10px;  /* controls the gap between images */
  
  display: grid;
  gap: var(--g);
  grid-template-columns: repeat(2, auto);
  position: relative;
}

.gallery > img {
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}

.gallery > img:nth-child(1) {--_a: 90deg}
.gallery > img:nth-child(2) {--_a:180deg}
.gallery > img:nth-child(3) {--_a:  0deg}
.gallery > img:nth-child(4) {--_a:-90deg}
.gallery > img:nth-child(5) {
  position: absolute;
  inset: calc(50% - .5*var(--s));
  clip-path: inset(calc(var(--g) / 4));
}

अब, आप में से कई लोग यह भी सोच रहे होंगे: जब हम अंतिम छवि को शीर्ष पर रख सकते हैं और उसमें एक सीमा जोड़ सकते हैं तो सभी जटिल चीजें क्यों हैं? वह नेस्टेड छवि के नीचे की छवियों को बिना मास्क के छिपा देगा, है ना?

यह सच है, और हम निम्नलिखित प्राप्त करेंगे:

नहीं maskमें clip-path. हां, कोड को समझना आसान है, लेकिन इसमें एक छोटी सी खामी है: भ्रम को परिपूर्ण बनाने के लिए सीमा का रंग मुख्य पृष्ठभूमि के समान होना चाहिए। पृष्ठभूमि से स्वतंत्र वास्तविक पारदर्शिता के बदले कोड को और अधिक जटिल बनाने के लिए यह छोटी सी कमी मेरे लिए पर्याप्त है। मैं यह नहीं कह रहा हूं कि सीमा का रुख खराब है या गलत। मैं ज्यादातर मामलों में इसकी अनुशंसा करता हूं जहां पृष्ठभूमि ज्ञात है। लेकिन हम यहां नई चीजों का पता लगाने और सबसे महत्वपूर्ण घटकों का निर्माण करने के लिए हैं जो उनके पर्यावरण पर निर्भर नहीं हैं।

आइए इस बार एक और आकार आज़माएं:

इस बार, हमने नेस्टेड छवि को एक वर्ग के बजाय एक वृत्त बना दिया। यह एक आसान काम है border-radius लेकिन हमें a . का उपयोग करने की आवश्यकता है गोलाकार कट-आउट अन्य छवियों के लिए। हालांकि, इस बार हम एक पर भरोसा करेंगे radial-gradient() ए के बजाए conic-gradient() उस अच्छे गोल लुक को पाने के लिए।

.gallery > img {
  mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2), #000 calc(51% + var(--g)/2));
}
.gallery > img:nth-child(1) { --_a: calc(100% + var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(2) { --_a: calc(0%   - var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(3) { --_a: calc(100% + var(--g)/2) calc(0%   - var(--g)/2); }
.gallery > img:nth-child(4) { --_a: calc(0%   - var(--g)/2) calc(0%   - var(--g)/2); }

सभी छवियां पिछले उदाहरण के समान कॉन्फ़िगरेशन का उपयोग करती हैं, लेकिन हम हर बार केंद्र बिंदु को अपडेट करते हैं।

उपरोक्त आंकड़ा प्रत्येक सर्कल के केंद्र बिंदु को दिखाता है। फिर भी, वास्तविक कोड में, आप देखेंगे कि मैं यह सुनिश्चित करने के लिए अंतराल के लिए भी लेखांकन कर रहा हूं कि सभी बिंदु एक ही स्थिति (ग्रिड के केंद्र) पर हैं, यदि हम उन्हें जोड़ते हैं तो एक निरंतर सर्कल प्राप्त होता है।

अब जब हमारे पास हमारा लेआउट है तो चलो होवर प्रभाव के बारे में बात करते हैं। यदि आपने ध्यान नहीं दिया, तो एक शांत होवर प्रभाव नेस्टेड छवि के आकार को बढ़ाता है और बाकी सब कुछ उसी के अनुसार समायोजित करता है। आकार बढ़ाना एक अपेक्षाकृत आसान काम है, लेकिन ग्रेडिएंट को अपडेट करना अधिक जटिल है, क्योंकि डिफ़ॉल्ट रूप से, ग्रेडिएंट को एनिमेटेड नहीं किया जा सकता है। इसे दूर करने के लिए, मैं a . का उपयोग करूंगा font-size रेडियल ग्रेडिएंट को चेतन करने में सक्षम होने के लिए हैक करें।

यदि आप ग्रेडिएंट के कोड की जाँच करते हैं, तो आप देख सकते हैं कि मैं जोड़ रहा हूँ 1em:

mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));

यह ज्ञात है कि em इकाइयाँ मूल तत्व के सापेक्ष हैं font-size, इसलिए बदल रहा है font-size का .gallery गणना को भी बदल देगा em मूल्य - यह वह तरकीब है जिसका हम उपयोग कर रहे हैं। हम एनिमेट कर रहे हैं font-size के मान से 0 दिए गए मान पर और, परिणामस्वरूप, ढाल एनिमेटेड है, नेस्टेड छवि के आकार के बाद कट-आउट भाग को बड़ा कर रहा है जो बड़ा हो रहा है।

यहां वह कोड है जो होवर प्रभाव में शामिल भागों को हाइलाइट करता है:

.gallery {
  --s: 200px; /* controls the image size */
  --g: 10px; /* controls the gaps between images */

  font-size: 0; /* initially we have 1em = 0 */
  transition: .5s;
}
/* we increase the cut-out by 1em */
.gallery > img {
  mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));
}
/* we increase the size by 2em */
.gallery > img:nth-child(5) {
  width: calc(var(--s) + 2em);
}
/* on hover 1em = S/5 */
.gallery:hover {
  font-size: calc(var(--s) / 5);
}

RSI font-size चाल मददगार है अगर हम ग्रेडिएंट या अन्य गुणों को चेतन करना चाहते हैं जो एनिमेटेड नहीं हो सकते। @property के साथ परिभाषित कस्टम गुण ऐसी समस्या को हल कर सकते हैं, लेकिन इसके लिए समर्थन लेखन के समय अभी भी कमी है।

मैंने खोजा font-size ट्रिक से @ सेलेनिट2 हल करने की कोशिश करते समय ट्विटर पर एक चुनौती.

एक और आकार? चलिए चलते हैं!

इस बार हमने नेस्टेड छवि को एक समचतुर्भुज के आकार में क्लिप किया। हम यहां कैसे पहुंचे, यह जानने के लिए मैं आपको एक अभ्यास के रूप में कोड को विच्छेदित करने देता हूं। आप देखेंगे कि संरचना हमारे उदाहरणों की तरह ही है। केवल अंतर यह है कि हम आकृति बनाने के लिए ग्रेडिएंट का उपयोग कैसे कर रहे हैं। खोदो और सीखो!

परिपत्र छवि ग्रिड

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

ग्रिड की HTML और CSS संरचना पहले से कोई नई बात नहीं है, तो चलिए उस हिस्से को छोड़ देते हैं और इसके बजाय गोलाकार आकार और होवर प्रभाव पर ध्यान केंद्रित करते हैं जो हम चाहते हैं।

हम उपयोग करने जा रहे हैं clip-path और उसका circle() कार्य करने के लिए - आपने अनुमान लगाया! - छवियों में से एक सर्कल काट लें।

यह आंकड़ा दर्शाता है clip-path पहली छवि के लिए उपयोग किया जाता है। बाईं ओर छवि की प्रारंभिक स्थिति दिखाती है, जबकि दाईं ओर मँडराती हुई स्थिति दिखाती है। आप उपयोग कर सकते हैं यह ऑनलाइन उपकरण खेलने और कल्पना करने के लिए clip-path मूल्यों.

अन्य छवियों के लिए, हम सर्कल के केंद्र को अपडेट कर सकते हैं (70% 70%) निम्नलिखित कोड प्राप्त करने के लिए:

.gallery > img:hover {
  --_c: 50%; /* same as "50% at 50% 50%" */
}
.gallery > img:nth-child(1) {
  clip-path: circle(var(--_c, 55% at 70% 70%));
}
.gallery > img:nth-child(2) {
  clip-path: circle(var(--_c, 55% at 30% 70%));
}
.gallery > img:nth-child(3) {
  clip-path: circle(var(--_c, 55% at 70% 30%));
}
.gallery > img:nth-child(4) {
  clip-path: circle(var(--_c, 55% at 30% 30%));
}

ध्यान दें कि हम कैसे परिभाषित कर रहे हैं clip-path अंदर एक फॉलबैक के रूप में मूल्य var(). इस तरह से हम का मान सेट करके होवर पर मूल्य को अधिक आसानी से अपडेट कर सकते हैं --_c चर। उपयोग करते समय circle(), केंद्र बिंदु की डिफ़ॉल्ट स्थिति है 50% 50%, इसलिए हम इसे अधिक संक्षिप्त कोड के लिए छोड़ देते हैं। इसलिए आप देखते हैं कि हम केवल सेटिंग कर रहे हैं 50% के बजाय 50% at 50% 50%.

फिर हम होवर पर अपनी छवि का आकार ग्रिड के समग्र आकार तक बढ़ाते हैं ताकि हम अन्य छवियों को कवर कर सकें। हम यह भी सुनिश्चित करते हैं z-index होवर की गई छवि पर एक उच्च मूल्य है, इसलिए यह हमारे में सबसे ऊपर है स्टैकिंग संदर्भ.

.gallery {
  --s: 200px; /* controls the image size */
  --g: 8px;   /* controls the gap between images */

  display: grid;
  grid: auto-flow var(--s) / repeat(2, var(--s));
  gap: var(--g);
}

.gallery > img {
  width: 100%; 
  aspect-ratio: 1;
  cursor: pointer;
  z-index: 0;
  transition: .25s, z-index 0s .25s;
}
.gallery > img:hover {
  --_c: 50%; /* change the center point on hover */
  width: calc(200% + var(--g));
  z-index: 1;
  transition: .4s, z-index 0s;
}

.gallery > img:nth-child(1){
  clip-path: circle(var(--_c, 55% at 70% 70%));
  place-self: start;
}
.gallery > img:nth-child(2){
  clip-path: circle(var(--_c, 55% at 30% 70%));
  place-self: start end;
}
.gallery > img:nth-child(3){
  clip-path: circle(var(--_c, 55% at 70% 30%));
  place-self: end start;
}
.gallery > img:nth-child(4){
  clip-path: circle(var(--_c, 55% at 30% 30%));
  place-self: end;
}

के साथ क्या हो रहा है place-self संपत्ति? हमें इसकी आवश्यकता क्यों है और प्रत्येक छवि का एक विशिष्ट मूल्य क्यों है?

क्या आपको वह मुद्दा याद है जो हमने पिछले लेख में किया था जब पहेली के टुकड़ों का ग्रिड बनाना? हमने अतिप्रवाह बनाने के लिए छवियों का आकार बढ़ा दिया, लेकिन कुछ छवियों का अतिप्रवाह गलत था। हमने उन्हें का उपयोग करके ठीक किया place-self संपत्ति।

यहाँ वही मुद्दा। हम छवियों का आकार बढ़ा रहे हैं ताकि हर एक अपनी ग्रिड कोशिकाओं को ओवरफ्लो कर सके। लेकिन अगर हम कुछ नहीं करते हैं, तो वे सभी ग्रिड के दाहिने और निचले हिस्से में ओवरफ्लो हो जाएंगे। हमें क्या चाहिए:

1. नीचे-दाएं किनारे को ओवरफ्लो करने वाली पहली छवि (डिफ़ॉल्ट व्यवहार),
2. दूसरी छवि नीचे-बाएं किनारे को ओवरफ्लो करने के लिए,
3. तीसरी छवि ऊपरी-दाएँ किनारे को ओवरफ़्लो करने के लिए, और
4. चौथी छवि ऊपरी-बाएँ किनारे को ओवरफ़्लो करने के लिए।

इसे प्राप्त करने के लिए, हमें प्रत्येक छवि को सही ढंग से उपयोग करने की आवश्यकता है place-self संपत्ति।

मामले में आप परिचित नहीं हैं place-self, यह इसके लिए आशुलिपि है justify-self और align-self तत्व को क्षैतिज और लंबवत रूप से रखने के लिए। जब यह एक मान लेता है, तो दोनों संरेखण समान मान का उपयोग करते हैं।

छवि पैनलों का विस्तार

पिछले लेख में, मैंने एक अच्छा ज़ूम प्रभाव बनाया जो छवियों के एक ग्रिड पर लागू होता है जहाँ हम सब कुछ नियंत्रित कर सकते हैं: पंक्तियों की संख्या, स्तंभों की संख्या, आकार, स्केल फ़ैक्टर, आदि।

एक विशेष मामला क्लासिक विस्तार करने वाले पैनल थे, जहां हमारे पास केवल एक पंक्ति और एक पूर्ण-चौड़ाई वाला कंटेनर होता है।

हम इस उदाहरण को लेंगे और इसे आकृतियों के साथ जोड़ेंगे!

इससे पहले कि हम जारी रखें, मैं अत्यधिक अनुशंसा करता हूं कि my अन्य लेख यह समझने के लिए कि हम जिन तरकीबों को कवर करने जा रहे हैं, वे कैसे काम करती हैं। इसे देखें, और हम यहां पैनल आकार बनाने पर ध्यान केंद्रित करना जारी रखेंगे।

सबसे पहले, कोड को सरल बनाकर और कुछ चरों को हटाकर शुरू करते हैं

हमें केवल एक पंक्ति की आवश्यकता है और स्तंभों की संख्या छवियों की संख्या के आधार पर समायोजित होनी चाहिए। इसका मतलब है कि अब हमें पंक्तियों की संख्या के लिए चर की आवश्यकता नहीं है (--n) और कॉलम (--m ) लेकिन हमें उपयोग करने की आवश्यकता है grid-auto-flow: column, जैसे ही हम नई छवियां जोड़ते हैं, ग्रिड कॉलम को स्वतः उत्पन्न करने की अनुमति देता है। हम अपने कंटेनर के लिए एक निश्चित ऊंचाई पर विचार करेंगे; डिफ़ॉल्ट रूप से, यह पूर्ण-चौड़ाई वाला होगा।

आइए छवियों को तिरछी आकृति में क्लिप करें:

एक बार फिर, प्रत्येक छवि अपने ग्रिड सेल में समाहित है, इसलिए छवियों के बीच हमारी अपेक्षा से अधिक स्थान है:

ओवरलैप बनाने के लिए हमें छवियों की चौड़ाई बढ़ाने की आवश्यकता है। हम प्रतिस्थापित करते हैं min-width: 100% साथ में min-width: calc(100% + var(--s)), जहां --s एक नया चर है जो आकार को नियंत्रित करता है।

अब हमें पहली और आखिरी छवियों को ठीक करने की आवश्यकता है, ताकि वे बिना अंतराल के पृष्ठ से ब्लीड हो जाएं। दूसरे शब्दों में, हम पहली छवि के बाईं ओर से तिरछा और अंतिम छवि के दाईं ओर से तिरछा हटा सकते हैं। हमें एक नया चाहिए clip-path विशेष रूप से उन दो छवियों के लिए।

हमें ओवरफ्लो को भी ठीक करने की जरूरत है। डिफ़ॉल्ट रूप से, सभी छवियां दोनों तरफ ओवरफ़्लो होंगी, लेकिन पहले के लिए, हमें दाईं ओर एक ओवरफ़्लो की आवश्यकता होती है, जबकि हमें अंतिम छवि के लिए बाएं ओवरफ़्लो की आवश्यकता होती है।

.gallery > img:first-child {
  min-width: calc(100% + var(--s)/2);
  place-self: start;
  clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}
.gallery > img:last-child {
  min-width: calc(100% + var(--s)/2);
  place-self: end;
  clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}

अंतिम परिणाम तिरछी छवियों का एक अच्छा विस्तार करने वाला पैनल है!

हम जितनी चाहें उतनी छवियां जोड़ सकते हैं, और ग्रिड स्वचालित रूप से समायोजित हो जाएगा। साथ ही, हमें आकार को नियंत्रित करने के लिए केवल एक मान को नियंत्रित करने की आवश्यकता है!

हम फ्लेक्सबॉक्स के साथ यही लेआउट बना सकते थे क्योंकि हम तत्वों की एक पंक्ति के साथ काम कर रहे हैं। यहाँ है मेरा कार्यान्वयन.

ज़रूर, झुकी हुई छवियां शांत हैं, लेकिन ज़िग-ज़ैग पैटर्न के बारे में क्या? मैंने इसे पहले ही छेड़ा है पिछले लेख का अंत.

मैं यहाँ जो कुछ कर रहा हूँ वह सब बदल रहा है clip-path साथ में mask… और क्या? मेरे पास पहले से ही एक विस्तृत लेख है उस ज़िग-ज़ैग आकार को बनाना — एक ऑनलाइन उल्लेख नहीं करने के लिए कोड प्राप्त करने के लिए जनरेटर. देखें कि सब कुछ एक साथ कैसे आता है?

यहां सबसे मुश्किल हिस्सा यह सुनिश्चित करना है कि ज़िग-ज़ैग पूरी तरह से संरेखित हैं, और इसके लिए, हमें प्रत्येक के लिए ऑफ़सेट जोड़ने की आवश्यकता है :nth-child(odd) छवि तत्व।

.gallery > img {
  mask: 
    conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) 
      100% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y,
    conic-gradient(from   45deg at left,  #0000, #000 1deg 89deg, #0000 90deg) 
      0%   calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y;
}
/* we add an offset to the odd elements */
.gallery > img:nth-child(odd) {
  --_p: var(--s);
}
.gallery > img:first-child {
  mask: 
    conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) 
      0 calc(50% + var(--_p, 0%))/100% calc(2*var(--s));
}
.gallery > img:last-child {
  mask: 
    conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) 
      0 calc(50% + var(--_p, 0%)) /100% calc(2*var(--s));
}

के उपयोग पर ध्यान दें --_p चर, जो वापस गिर जाएगा 0% लेकिन के बराबर होगा --_s अजीब छवियों के लिए।

यहां एक डेमो है जो इस मुद्दे को दिखाता है। यह देखने के लिए होवर करें कि ऑफ़सेट — द्वारा परिभाषित कैसे किया जाता है --_p - संरेखण ठीक कर रहा है।

साथ ही, ध्यान दें कि हम पहली और आखिरी छवि के लिए एक अलग मुखौटा का उपयोग कैसे करते हैं जैसा कि हमने पिछले उदाहरण में किया था। हमें केवल पहली छवि के दाईं ओर और अंतिम छवि के बाईं ओर एक ज़िग-ज़ैग की आवश्यकता है।

और गोल पक्ष क्यों नहीं? हो जाए!

मुझे पता है कि कोड डरावना और समझने में कठिन लग सकता है, लेकिन जो कुछ भी हो रहा है वह विभिन्न ट्रिक्स का एक संयोजन है जिसे हमने इसमें शामिल किया है और अन्य लेख जो मैंने पहले ही साझा किए हैं। इस मामले में, मैं ज़िग-ज़ैग और तिरछी आकृतियों के समान कोड संरचना का उपयोग करता हूं। इसकी तुलना उन उदाहरणों से करें, और आपको कोई अंतर नहीं मिलेगा! ये वही तरकीबें हैं ज़ूम प्रभाव के बारे में मेरा पिछला लेख. फिर, मैं my . का उपयोग कर रहा हूँ अन्य लेखन और मेरा ऑनलाइन जनरेटर उन गोल आकृतियों को बनाने वाले मास्क के लिए कोड प्राप्त करने के लिए।

यदि आपको याद है कि हमने ज़िग-ज़ैग के लिए क्या किया था, तो हमने सभी छवियों के लिए एक ही मास्क का उपयोग किया था, लेकिन फिर एक पूर्ण ओवरलैप बनाने के लिए विषम छवियों में एक ऑफसेट जोड़ना पड़ा। इस मामले में, हमें विषम संख्या वाली छवियों के लिए एक अलग मुखौटा चाहिए।

पहला मुखौटा:

mask: 
  linear-gradient(-90deg,#0000 calc(2*var(--s)),#000 0) var(--s),
  radial-gradient(var(--s),#000 98%,#0000) 50% / calc(2*var(--s)) calc(1.8*var(--s)) space repeat;

दूसरा एक:

mask:
  radial-gradient(calc(var(--s) + var(--g)) at calc(var(--s) + var(--g)) 50%,#0000 98% ,#000) 
  calc(50% - var(--s) - var(--g)) / 100% calc(1.8*var(--s))

मैंने यहां केवल एक ही प्रयास किया है कि गैप वैरिएबल को शामिल करने के लिए दूसरे मास्क को अपडेट करें (--g) छवियों के बीच उस स्थान को बनाने के लिए।

अंतिम स्पर्श पहली और आखिरी छवि को ठीक करना है। पिछले सभी उदाहरणों की तरह, पहली छवि को सीधे बाएं किनारे की आवश्यकता होती है जबकि अंतिम छवि को सीधे दाएं किनारे की आवश्यकता होती है।

पहली छवि के लिए, हम हमेशा उस मुखौटा को जानते हैं जिसकी उसे आवश्यकता होती है, जो निम्न है:

.gallery > img:first-child {
  mask: 
    radial-gradient(calc(var(--s) + var(--g)) at right, #0000 98%, #000) 50% / 100% calc(1.8 * var(--s));
}

अंतिम छवि के लिए, यह तत्वों की संख्या पर निर्भर करता है, इसलिए यह मायने रखता है कि क्या वह तत्व है :nth-child(odd) or :nth-child(even).

.gallery > img:last-child:nth-child(even) {
  mask: 
    linear-gradient(to right,#0000 var(--s),#000 0),
    radial-gradient(var(--s),#000 98%,#0000) left / calc(2*var(--s)) calc(1.8*var(--s)) repeat-y
}

.gallery > img:last-child:nth-child(odd) {
  mask: 
    radial-gradient(calc(var(--s) + var(--g)) at left,#0000 98%,#000) 50% / 100% calc(1.8*var(--s))
}

बस इतना ही! तीन अलग-अलग लेआउट लेकिन हर बार एक ही सीएसएस ट्रिक्स:

• ज़ूम प्रभाव बनाने के लिए कोड संरचना
• आकृतियाँ बनाने के लिए एक मुखौटा या क्लिप-पथ
• कुछ मामलों में विषम तत्वों के लिए एक अलग कॉन्फ़िगरेशन यह सुनिश्चित करने के लिए कि हमारे पास एक पूर्ण ओवरलैप है
• आकृति को केवल एक तरफ रखने के लिए पहली और आखिरी छवि के लिए एक विशिष्ट कॉन्फ़िगरेशन।

और यहाँ उन सभी के साथ एक बड़ा डेमो है। जिस लेआउट को आप देखना चाहते हैं, उसे सक्रिय करने के लिए आपको केवल एक वर्ग जोड़ने की आवश्यकता है।

और यहां फ्लेक्सबॉक्स कार्यान्वयन वाला एक है

ऊपर लपेटकर

उफ़, हम कर चुके हैं! मुझे पता है कि इस लेख और पिछले एक के बीच कई सीएसएस तरकीबें और उदाहरण हैं, उन सभी अन्य तरकीबों का उल्लेख नहीं करने के लिए जिन्हें मैंने यहां मेरे द्वारा लिखे गए अन्य लेखों से संदर्भित किया है। मुझे सब कुछ एक साथ रखने में समय लगा, और आपको एक ही बार में सब कुछ समझने की ज़रूरत नहीं है। एक रीडिंग आपको सभी लेआउट का एक अच्छा अवलोकन देगी, लेकिन आपको लेख को एक से अधिक बार पढ़ना पड़ सकता है और सभी ट्रिक्स को समझने के लिए प्रत्येक उदाहरण पर ध्यान केंद्रित करना पड़ सकता है।

क्या आपने ध्यान दिया कि मार्कअप में छवियों की संख्या के अलावा हमने HTML को बिल्कुल भी नहीं छुआ है? हमारे द्वारा बनाए गए सभी लेआउट एक ही HTML कोड साझा करते हैं, जो छवियों की एक सूची के अलावा और कुछ नहीं है।

समाप्त करने से पहले, मैं आपको एक अंतिम उदाहरण के साथ छोड़ दूँगा। यह एक शांत होवर प्रभाव के साथ दो एनीमे पात्रों के बीच एक "बनाम" है।

आप क्या कहते हैं? क्या आपने जो सीखा है उसके आधार पर आप कुछ बना सकते हैं? इसे जटिल होने की आवश्यकता नहीं है - कुछ अच्छा या मज़ेदार कल्पना करें जैसे मैंने उस एनीमे मैचअप के साथ किया था। यह आपके लिए एक अच्छा अभ्यास हो सकता है, और हम टिप्पणी अनुभाग में एक उत्कृष्ट संग्रह के साथ समाप्त कर सकते हैं।