একটি বিশুদ্ধ CSS গ্যালারি ফোকাস ইফেক্ট এর সাথে : না

অতীতে প্রায়শই, আমাকে কনটেইনারের ভিতরে সমস্ত উপাদানগুলিতে শৈলীগুলি কীভাবে যুক্ত করা যায় তা খুঁজে বের করতে হবে কিন্তু না hovered এক

এই প্রভাবের জন্য একটি হোভার্ড উপাদানের ভাইবোন নির্বাচন করা প্রয়োজন। আমি এর জন্য জাভাস্ক্রিপ্ট প্রয়োগ করতাম, সঠিক CSS নিয়ম সংজ্ঞায়িত করে এমন ক্লাস যোগ করে বা সরিয়ে দিতাম mouseenter এবং mouseleave ঘটনা, এই অনুরূপ:

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

কয়েক মাস আগে আমি আমার কোম্পানির ওয়েবসাইটে গ্রিড-ভিত্তিক ফিডে একই পদ্ধতি প্রয়োগ করার চেষ্টা করছিলাম এবং — বুম — উপাদানগুলির মধ্যে ফাঁকের কারণে এটি কাজ করেনি!

সৌভাগ্যবশত আমার জন্য, এটা দেখা গেল যে এটিকে এভাবে থাকতে হবে না, এবং আবার এটির জন্য আমার জাভাস্ক্রিপ্টের প্রয়োজন নেই।

মার্কআপ এবং বেস সিএসএস

সঠিক মার্কআপ প্রস্তুত করে কোডিং শুরু করা যাক:

• .grid একটি গ্রিড-ভিত্তিক

  তালিকা;

• এবং .grid__child উপাদান হয়

যে শিশুদের সাথে আমরা যোগাযোগ করতে চাই।

মার্কআপ এই মত দেখায়:

শৈলী এই মত হওয়া উচিত:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 15rem);
  grid-gap: 1rem;
}

.grid__child {
  background: rgba(0, 0, 0, .1);
  border-radius: .5rem;
  aspect-ratio: 1/1;
}

এই উদাহরণ কোড একটি গ্রিডে তিনটি কলাম দখল করে তিনটি তালিকা আইটেম তৈরি করবে।

CSS নির্বাচকদের ক্ষমতা

এখন, কিছু ইন্টারেক্টিভিটি যোগ করা যাক. আমি প্রাথমিকভাবে যে পদ্ধতিটি প্রয়োগ করেছি তা দুটি ধাপের উপর ভিত্তি করে ছিল:

1. পাত্রে ঘোরাফেরা করলে ভিতরে থাকা সমস্ত উপাদানের শৈলী পরিবর্তন করা উচিত...  
2. …এই মুহূর্তে কার্সার ঘোরাফেরা করছে এমন একটি বাদে।

কার্সারটি কন্টেইনারের উপর ঘোরাঘুরি করার সময় প্রতিটি শিশুকে ধরা দিয়ে শুরু করা যাক:

.grid:hover .grid__child {
  /* ... */
}

দ্বিতীয়ত, বর্তমানে হোভার করা আইটেমটি বাদ দিন এবং কমিয়ে দিন opacity অন্য কোন শিশুর:

.grid:hover .grid__child:not(:hover) {
  opacity: 0.3;
}

এবং এটি শিশু উপাদানগুলির মধ্যে ফাঁক ছাড়া পাত্রের জন্য পুরোপুরি যথেষ্ট হবে:

যাইহোক, আমার ক্ষেত্রে, আমি এই ফাঁকগুলি সরাতে পারিনি:

যখন আমি টাইলগুলির মধ্যে মাউসটি সরাতেছিলাম তখন সমস্ত শিশু উপাদানগুলি বিবর্ণ হয়ে যাচ্ছিল।

ফাঁক উপেক্ষা করা

আমরা অনুমান করতে পারি যে ফাঁকগুলি পাত্রের অংশ যা এর বাচ্চাদের দ্বারা আবৃত হয় না। আমরা প্রতিবার কার্সারটি কন্টেইনারে প্রবেশ করার সময় প্রভাবটি চালাতে চাই না, বরং যখন এটি ভিতরের একটি উপাদানের উপর ঘোরায়। আমরা কি তখন ফাঁকের উপরে কার্সারকে অগ্রাহ্য করতে পারি? 

হ্যাঁ, আমরা ব্যবহার করতে পারি pointer-events: none উপরে .grid ধারক এবং সঙ্গে তাদের ফিরিয়ে আনা pointer-events: auto তার সন্তানদের উপর:

.grid {
  /* ... */
  pointer-events: none;
}

/* ... */

.grid__child {
  /* ... */
  pointer-events: auto;
}

আসুন অস্বচ্ছতার উপর কিছু শীতল রূপান্তর যোগ করি এবং আমাদের একটি প্রস্তুত উপাদান রয়েছে:

আমরা যখন আরও টাইলস যোগ করি এবং একটি 2-মাত্রিক বিন্যাস তৈরি করি তখন এটি সম্ভবত আরও শীতল:

চূড়ান্ত CSS এই মত দেখায়:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 15rem);
  grid-gap: 3rem;
  pointer-events: none;
}

.grid:hover .grid__child:not(:hover) {
  opacity: 0.3;
}

.grid__child {
  background: rgba(0, 0, 0, .1);
  border-radius: .5rem;
  aspect-ratio: 1/1;
  pointer-events: auto;
  transition: opacity 300ms;
}

কোডের মাত্র 2টি অতিরিক্ত লাইন দিয়ে আমরা ফাঁক সমস্যাটি অতিক্রম করেছি!

সম্ভাব্য সমস্যা

যদিও এটি একটি কমপ্যাক্ট সমাধান, এমন কিছু পরিস্থিতিতে রয়েছে যেখানে এটির জন্য কিছু সমাধানের প্রয়োজন হতে পারে।

দুর্ভাগ্যবশত, এই কৌশলটি কাজ করবে না যখন আপনি কন্টেইনারটিকে স্ক্রোলযোগ্য করতে চান, যেমন, অনুভূমিক স্লাইডারের মতো। দ্য pointer-events: none শৈলী শুধুমাত্র হোভার ইভেন্টকেই নয়, অন্য সকলকেও উপেক্ষা করবে। এই ধরনের পরিস্থিতিতে, আপনি মোড়ানো করতে পারেন .grid অন্য পাত্রে, এই মত:

সারাংশ

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

আমি আশা করি আপনি এই ছোট টিউটোরিয়ালটি পছন্দ করেছেন এবং এটি দরকারী বলে মনে করেছেন। ধন্যবাদ!

লেখক নির্বাচন করেছেন প্রযুক্তি প্রশিক্ষণ অংশ হিসাবে একটি অনুদান গ্রহণ অনুদানের জন্য লিখুন প্রোগ্রাম.