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. আপনি আমার ব্যবহার করতে পারেন অনলাইন জেনারেটর মাস্কিং কর্নারের জন্য CSS পেতে।

আমাদের এখানে যা দরকার তা হল সমান কোণে কোণগুলি কাটা 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) প্রভাব পান, তাই আমরা বাইরের প্রান্তের পরিবর্তে ভিতর থেকে মাস্কিং করছি।

এখন আমরা নেস্টেড ইমেজটি মাস্কড স্পেসের ভিতরে রাখতে পারি। প্রথমে, আসুন নিশ্চিত করি যে আমাদের এইচটিএমএলে একটি পঞ্চম চিত্র উপাদান রয়েছে:

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

আমরা সেখানে এটি স্থাপন করার জন্য ভাল ol' পরম অবস্থানের উপর নির্ভর করতে যাচ্ছি:

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

সার্জারির 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 কিন্তু আমরা একটি ব্যবহার করতে হবে বৃত্তাকার কাট-আউট অন্যান্য ছবির জন্য। এই সময়, যদিও, আমরা একটি উপর নির্ভর করব 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); }

সমস্ত চিত্র আগের উদাহরণের মতো একই কনফিগারেশন ব্যবহার করে, কিন্তু আমরা প্রতিবার কেন্দ্র বিন্দু আপডেট করি।

উপরের চিত্রটি প্রতিটি বৃত্তের কেন্দ্রবিন্দুকে চিত্রিত করে। তারপরও, প্রকৃত কোডে, আপনি লক্ষ্য করবেন যে সমস্ত পয়েন্ট একই অবস্থানে (গ্রিডের কেন্দ্রে) আছে তা নিশ্চিত করার জন্য আমি ফাঁকের জন্যও হিসাব করছি যদি আমরা তাদের একত্রিত করি তাহলে একটি অবিচ্ছিন্ন বৃত্ত পেতে।

এখন যেহেতু আমাদের লেআউট আছে আসুন হোভার ইফেক্ট সম্পর্কে কথা বলি। আপনি খেয়াল না করলে, একটি কুল হোভার ইফেক্ট নেস্টেড ইমেজের আকার বাড়ায় এবং সেই অনুযায়ী অন্য সব কিছু সামঞ্জস্য করে। আকার বাড়ানো একটি অপেক্ষাকৃত সহজ কাজ, কিন্তু গ্রেডিয়েন্ট আপডেট করা আরও জটিল কারণ ডিফল্টরূপে, গ্রেডিয়েন্ট অ্যানিমেটেড করা যায় না। এটি কাটিয়ে উঠতে, আমি একটি ব্যবহার করব 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);
}

সার্জারির font-size কৌশলটি সহায়ক যদি আমরা গ্রেডিয়েন্ট বা অন্যান্য বৈশিষ্ট্যগুলিকে অ্যানিমেট করতে চাই যা অ্যানিমেটেড করা যায় না। @property দিয়ে সংজ্ঞায়িত কাস্টম বৈশিষ্ট্য এই ধরনের একটি সমস্যা সমাধান করতে পারে, কিন্তু এর জন্য সমর্থন লেখার সময় এখনও অভাব রয়েছে।

আমি আবিষ্কার font-size থেকে কৌশল @সেলেনআইটি২ সমাধান করার চেষ্টা করার সময় টুইটারে একটি চ্যালেঞ্জ.

অন্য আকৃতি? চলো যাই!

এইবার আমরা নেস্টেড ইমেজটিকে রম্বসের আকারে ক্লিপ করেছি। আমরা এখানে কীভাবে এসেছি তা বের করার জন্য আমি আপনাকে একটি অনুশীলন হিসাবে কোডটি বিচ্ছিন্ন করতে দেব। আপনি লক্ষ্য করবেন যে কাঠামোটি আমাদের উদাহরণগুলির মতোই। শুধুমাত্র পার্থক্য হল কিভাবে আমরা আকৃতি তৈরি করতে গ্রেডিয়েন্ট ব্যবহার করছি। খনন করুন এবং শিখুন!

সার্কুলার ইমেজ গ্রিড

আমরা এখানে এবং পূর্ববর্তী নিবন্ধগুলিতে যা শিখেছি তা একত্রিত করে আরও উত্তেজনাপূর্ণ ইমেজ গ্রিড তৈরি করতে পারি। এইবার, আসুন আমাদের গ্রিডের সমস্ত ছবিকে সার্কুলার করি এবং হোভারে, বাকি ফটোগুলিকে কভার করার জন্য সম্পূর্ণ জিনিসটি প্রকাশ করার জন্য একটি চিত্রকে প্রসারিত করি।

গ্রিডের এইচটিএমএল এবং সিএসএস গঠন আগের থেকে নতুন কিছু নয়, তাই আসুন সেই অংশটি এড়িয়ে যাই এবং এর পরিবর্তে আমরা যে বৃত্তাকার আকার এবং হোভার প্রভাব চাই তার উপর ফোকাস করি।

আমরা ব্যবহার করতে যাচ্ছি 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 উপাদানটিকে অনুভূমিকভাবে এবং উল্লম্বভাবে স্থাপন করতে। যখন এটি একটি মান নেয়, উভয় প্রান্তিককরণ একই মান ব্যবহার করে।

ইমেজ প্যানেল প্রসারিত করা হচ্ছে

পূর্ববর্তী একটি নিবন্ধে, আমি একটি দুর্দান্ত জুম প্রভাব তৈরি করেছি যা চিত্রগুলির একটি গ্রিডে প্রযোজ্য যেখানে আমরা সবকিছু নিয়ন্ত্রণ করতে পারি: সারির সংখ্যা, কলামের সংখ্যা, আকার, স্কেল ফ্যাক্টর ইত্যাদি।

একটি বিশেষ ক্ষেত্রে ক্লাসিক প্রসারিত প্যানেল ছিল, যেখানে আমাদের শুধুমাত্র একটি সারি এবং একটি পূর্ণ-প্রস্থ ধারক রয়েছে।

আমরা এই উদাহরণটি গ্রহণ করব এবং আকারের সাথে এটি একত্রিত করব!

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

প্রথমে, আসুন কোডটি সরলীকরণ করে এবং কিছু ভেরিয়েবল সরিয়ে শুরু করি

আমাদের শুধুমাত্র একটি সারি প্রয়োজন এবং কলামের সংখ্যা চিত্রের সংখ্যার উপর ভিত্তি করে সামঞ্জস্য করা উচিত। তার মানে আমাদের আর সারির সংখ্যার জন্য ভেরিয়েবলের প্রয়োজন নেই (--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… এবং কি অনুমান? আমি ইতিমধ্যে একটি বিস্তারিত নিবন্ধ আছে যে zig-zag আকৃতি তৈরি - একটি অনলাইন উল্লেখ না কোড পেতে জেনারেটর. দেখুন কিভাবে সবকিছু একসাথে আসে?

এখানে সবচেয়ে কঠিন অংশ হল জিগ-জ্যাগগুলি পুরোপুরি সারিবদ্ধ করা নিশ্চিত করা, এবং এর জন্য, আমাদের প্রতিটির জন্য একটি অফসেট যোগ করতে হবে :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 — প্রান্তিককরণ ঠিক করা হচ্ছে।

এছাড়াও, লক্ষ্য করুন কিভাবে আমরা আগের উদাহরণে প্রথম এবং শেষ চিত্রের জন্য একটি ভিন্ন মাস্ক ব্যবহার করি। আমাদের শুধুমাত্র প্রথম চিত্রের ডান দিকে এবং শেষ চিত্রের বাম দিকে একটি জিগ-জ্যাগ প্রয়োজন।

এবং কেন বৃত্তাকার পক্ষের না? চল এটা করি!

আমি জানি যে কোডটি ভীতিকর এবং বুঝতে কঠিন মনে হতে পারে, তবে যা চলছে তা হল বিভিন্ন কৌশলের সংমিশ্রণ যা আমরা এই এবং অন্যান্য নিবন্ধগুলিতে ইতিমধ্যেই ভাগ করেছি। এই ক্ষেত্রে, আমি জিগ-জ্যাগ এবং তির্যক আকারের মতো একই কোড কাঠামো ব্যবহার করি। এই উদাহরণগুলির সাথে এটি তুলনা করুন, এবং আপনি কোন পার্থক্য পাবেন না! তারা একই কৌশল জুম প্রভাব সম্পর্কে আমার আগের নিবন্ধ. তারপর, আমি আমার ব্যবহার করছি অন্যান্য লেখা এবং আমার অনলাইন জেনারেটর সেই বৃত্তাকার আকৃতি তৈরি করে এমন মাস্কের কোড পেতে।

যদি আপনি মনে করেন যে আমরা জিগ-জ্যাগের জন্য কী করেছি, আমরা সমস্ত চিত্রের জন্য একই মুখোশ ব্যবহার করেছি তবে একটি নিখুঁত ওভারল্যাপ তৈরি করতে বিজোড় চিত্রগুলিতে একটি অফসেট যুক্ত করতে হয়েছিল। এই ক্ষেত্রে, বিজোড়-সংখ্যার চিত্রগুলির জন্য আমাদের একটি আলাদা মুখোশ দরকার।

প্রথম মুখোশ:

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

এখানেই শেষ! তিনটি ভিন্ন লেআউট কিন্তু প্রতিবার একই CSS কৌশল:

• জুম প্রভাব তৈরি করার জন্য কোড গঠন
• আকার তৈরি করতে একটি মুখোশ বা ক্লিপ-পাথ
• আমাদের একটি নিখুঁত ওভারল্যাপ আছে তা নিশ্চিত করতে কিছু ক্ষেত্রে অদ্ভুত উপাদানগুলির জন্য একটি পৃথক কনফিগারেশন
• প্রথম এবং শেষ চিত্রের জন্য একটি নির্দিষ্ট কনফিগারেশন শুধুমাত্র এক দিকে আকৃতি রাখতে।

এবং এখানে তাদের সকলকে একসাথে নিয়ে একটি বড় ডেমো রয়েছে। আপনি যে লেআউটটি দেখতে চান তা সক্রিয় করতে আপনার যা দরকার তা হল একটি ক্লাস যোগ করা।

এবং এখানে ফ্লেক্সবক্স বাস্তবায়নের সাথে একটি

মোড়ক উম্মচন

উফ, আমরা শেষ! আমি জানি এই নিবন্ধটি এবং শেষের মধ্যে অনেক CSS কৌশল এবং উদাহরণ রয়েছে, আমার লেখা অন্যান্য নিবন্ধগুলি থেকে এখানে উল্লেখ করা অন্যান্য কৌশলগুলির উল্লেখ না করা। সবকিছু একসাথে করতে আমার সময় লেগেছে এবং আপনাকে একবারে সবকিছু বুঝতে হবে না। একটি পাঠ আপনাকে সমস্ত বিন্যাসের একটি ভাল ওভারভিউ দেবে, তবে আপনাকে নিবন্ধটি একাধিকবার পড়তে হবে এবং সমস্ত কৌশলগুলি উপলব্ধি করতে প্রতিটি উদাহরণে ফোকাস করতে হবে।

আপনি কি লক্ষ্য করেছেন যে আমরা সম্ভবত মার্কআপে থাকা ছবির সংখ্যা ব্যতীত HTML-কে স্পর্শ করিনি? আমরা যে সমস্ত লেআউট তৈরি করেছি সেগুলি একই HTML কোড ভাগ করে, যা চিত্রগুলির একটি তালিকা ছাড়া কিছুই নয়।

আমি শেষ করার আগে, আমি আপনাকে একটি শেষ উদাহরণ দিয়ে চলে যাব। এটি একটি "বনাম" একটি দুর্দান্ত হোভার প্রভাব সহ দুটি অ্যানিমে অক্ষরের মধ্যে।

তোমার খবর কি? আপনি যা শিখেছেন তার উপর ভিত্তি করে কিছু তৈরি করতে পারেন? এটি জটিল হওয়ার দরকার নেই — আমি সেই অ্যানিমে ম্যাচআপের মতো দুর্দান্ত বা মজার কিছু কল্পনা করুন। এটি আপনার জন্য একটি ভাল অনুশীলন হতে পারে এবং আমরা মন্তব্য বিভাগে একটি চমৎকার সংগ্রহ দিয়ে শেষ করতে পারি।