ক্যালেন্ডার, শপিং কার্ট, গ্যালারী, ফাইল এক্সপ্লোরার এবং অনলাইন লাইব্রেরি হল এমন কিছু পরিস্থিতিতে যেখানে নির্বাচনযোগ্য আইটেমগুলি গ্রিডে (যেমন বর্গাকার জালি) দেখানো হয়। আপনি জানেন, এমনকি সেই নিরাপত্তা চেকগুলি যা আপনাকে ক্রসওয়াক বা যাই হোক না কেন সমস্ত ছবি নির্বাচন করতে বলে।
আমি একটি গ্রিডে নির্বাচনযোগ্য বিকল্পগুলি প্রদর্শন করার জন্য একটি ঝরঝরে উপায় খুঁজে পেয়েছি। না, সেই reCAPTCHA পুনরায় তৈরি করা নয়, বরং একাধিক আইটেম নির্বাচন করতে সক্ষম হচ্ছে। এবং যখন দুই বা ততোধিক সংলগ্ন আইটেম নির্বাচন করা হয়, আমরা চতুর ব্যবহার করতে পারি :nth-of-type combinators, ছদ্ম উপাদান, এবং :checked ছদ্ম-শ্রেণী তাদের এমনভাবে স্টাইল করতে যেখানে তারা একসাথে দলবদ্ধ দেখায়।
বৃত্তাকার চেকবক্সগুলি পেতে কম্বিনেটর এবং সিউডোর সম্পূর্ণ ধারণাটি একটি থেকে এসেছে আগের নিবন্ধ আমি লিখেছিলাম. এটি একটি সাধারণ একক-কলাম নকশা ছিল:
এইবার, যাইহোক, একটি গ্রিডের উল্লম্ব এবং অনুভূমিক উভয় অক্ষ বরাবর উপাদানগুলিতে রাউন্ডিং প্রভাব প্রয়োগ করা হয়। এর জন্য আপনাকে চেকবক্স স্টাইলিং সম্পর্কে আমার শেষ নিবন্ধটি পড়তে হবে না কারণ আমি এখানে আপনার যা জানা দরকার তা কভার করতে যাচ্ছি। কিন্তু আপনি যদি এই নিবন্ধে আমরা যা করছি তার উপর একটি স্লিমড ডাউন টেক করতে আগ্রহী হন, তাহলে সেটি চেক আউট করার যোগ্য।
আমরা শুরু করার আগে…
কয়েকটি বিষয় নোট করা আপনার জন্য উপযোগী হবে। উদাহরণস্বরূপ, আমি সরলতার জন্য আমার ডেমোতে স্ট্যাটিক HTML এবং CSS ব্যবহার করছি। আপনার অ্যাপ্লিকেশনের উপর নির্ভর করে আপনাকে গতিশীলভাবে গ্রিড এবং আইটেমগুলি তৈরি করতে হতে পারে। প্রভাবের উপর ফোকাস করার জন্য আমি অ্যাক্সেসযোগ্যতার জন্য ব্যবহারিক চেকগুলি ছেড়ে চলেছি, তবে আপনি অবশ্যই একটি উত্পাদন পরিবেশে এই ধরণের জিনিস বিবেচনা করতে চান।
এছাড়াও, আমি লেআউটের জন্য CSS গ্রিড ব্যবহার করছি। আমি একই সুপারিশ করব কিন্তু, অবশ্যই, এটি শুধুমাত্র একটি ব্যক্তিগত পছন্দ এবং আপনার মাইলেজ পরিবর্তিত হতে পারে। আমার জন্য, গ্রিড ব্যবহার করা আমাকে সহজে একটি আইটেম লক্ষ্য করতে ভাইবোন-নির্বাচকদের ব্যবহার করতে দেয় ::before এবং ::after ছদ্ম
তাই, আপনার অ্যাপ্লিকেশনে আপনি যে লেআউট স্ট্যান্ডার্ড ব্যবহার করতে চান না কেন, নিশ্চিত করুন যে সিউডোগুলি এখনও CSS-এ টার্গেট করা যেতে পারে এবং লেআউটটি বিভিন্ন ব্রাউজার এবং স্ক্রীন জুড়ে কৌশলে থাকে তা নিশ্চিত করুন।
এখনই শুরু করা যাক
আপনি আগের ডেমোতে লক্ষ্য করেছেন যে, একটি চেকবক্স উপাদান চেক করা এবং আনচেক করা বাক্সগুলির নকশা পরিবর্তন করে, এটির চারপাশের অন্যান্য চেকবক্সগুলির নির্বাচনের অবস্থার উপর নির্ভর করে। এটি সম্ভব কারণ আমি প্রতিটি বাক্সকে তার নিজস্ব উপাদানের পরিবর্তে তার সংলগ্ন উপাদানগুলির ছদ্ম-উপাদান ব্যবহার করে স্টাইল করেছি।
নিম্নলিখিত চিত্র দেখায় কিভাবে ::before প্রতিটি বাক্সের ছদ্ম-উপাদান স্তম্ভ (প্রথম কলাম ব্যতীত) বাক্সগুলিকে তাদের বাম দিকে ওভারল্যাপ করুন এবং কীভাবে ::after প্রতিটি বাক্সের ছদ্ম-উপাদান সারি (প্রথম সারি ব্যতীত) উপরের বাক্সগুলিকে ওভারল্যাপ করুন।
এখানে বেস কোড
মার্কআপটি বেশ সহজবোধ্য:
<main> <input type=checkbox> <input type=checkbox> <input type=checkbox> <!-- more boxes -->
</main>প্রারম্ভিক CSS এ একটু বেশি চলছে। কিন্তু, প্রথমে, গ্রিড নিজেই:
/* The grid */
main { display: grid; grid: repeat(5, 60px) / repeat(4, 85px); align-items: center; justify-items: center; margin: 0;
}এটি পাঁচটি সারি এবং চারটি কলামের একটি গ্রিড যাতে চেকবক্স থাকে। আমি চেকবক্সগুলির ডিফল্ট চেহারাটি মুছে ফেলার সিদ্ধান্ত নিয়েছি, তারপরে তাদের আমার নিজস্ব হালকা ধূসর পটভূমি এবং সুপার গোলাকার সীমানাগুলি দিন:
/* all checkboxes */
input { -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 20px; cursor: pointer; display: grid; height: 40px; width: 60px; margin: 0;
}লক্ষ্য করুন, এছাড়াও, চেকবক্সগুলি নিজেই গ্রিড। যে তাদের স্থাপন জন্য কী ::before এবং ::after ছদ্ম-উপাদান। যার কথা বলতে গিয়ে, এখন সেটা করা যাক:
/* pseudo-elements except for the first column and first row */
input:not(:nth-of-type(4n+1))::before,
input:nth-of-type(n+5)::after { content: ''; border-radius: 20px; grid-area: 1 / 1; pointer-events: none;
}আমরা শুধুমাত্র চেকবক্সের ছদ্ম-উপাদানগুলি নির্বাচন করছি যেগুলি প্রথম কলামে বা গ্রিডের প্রথম সারিতে নেই। input:not(:nth-of-type(4n+1)) প্রথম চেকবক্সে শুরু হয়, তারপর নির্বাচন করে ::before সেখান থেকে প্রতি চতুর্থ আইটেমের। কিন্তু আমরা বলছি লক্ষ্য করুন :not(), তাই সত্যিই আমরা কি করছি কুঁদন দ্য ::before প্রতি চতুর্থ চেকবক্সের ছদ্ম-উপাদান, প্রথম থেকে শুরু করে। তারপর আমরা শৈলী প্রয়োগ করছি ::after পঞ্চম থেকে প্রতিটি চেকবক্সের ছদ্ম।
এখন আমরা উভয় স্টাইল করতে পারেন ::before এবং ::after প্রতিটি চেকবক্সের জন্য সিউডো যা গ্রিডের প্রথম কলাম বা সারিতে নেই, যাতে সেগুলিকে ডিফল্টরূপে লুকিয়ে যথাক্রমে বামে বা উপরে সরানো হয়।
/* pseudo-elements other than the first column */
input:not(:nth-of-type(4n+1))::before { transform: translatex(-85px);
} /* pseudo-elements other than the first row */
input:nth-of-type(n+5)::after { transform: translatey(-60px); }স্টাইলিং :checked অবস্থা
এখন চেকবক্স স্টাইল করার সময় আসে যখন তারা a এ থাকে :checked অবস্থা. প্রথমত, তাদের একটি রং দিতে, একটি বলুন limegreen পটভূমি:
input:checked { background: limegreen; }একটি চেক করা বাক্স তার সমস্ত সংলগ্ন চেক করা বাক্সগুলিকে পুনরায় স্টাইল করতে সক্ষম হওয়া উচিত। অন্য কথায়, যদি আমরা গ্রিডে একাদশ চেকবক্সটি নির্বাচন করি, তাহলে আমরা উপরের, নীচে, বাম এবং ডানদিকে এটির চারপাশে থাকা বাক্সগুলিকেও স্টাইল করতে সক্ষম হব।
এটি সঠিক ছদ্ম-উপাদানগুলিকে লক্ষ্য করে করা হয়। আমরা যে কিভাবে করব? ঠিক আছে, এটি গ্রিডে কলামের প্রকৃত সংখ্যার উপর নির্ভর করে। দুটি সন্নিহিত বাক্স একটি 5⨉4 গ্রিডে চেক করা হলে এখানে CSS:
/* a checked box's right borders (if the element to its right is checked) */
input:not(:nth-of-type(4n)):checked + input:checked::before { border-top-right-radius: 0; border-bottom-right-radius: 0; background: limegreen;
}
/* a checked box's bottom borders (if the element below is checked) */
input:nth-last-of-type(n+5):checked + * + * + * + input:checked::after { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (right side) checked box's left borders */
input:not(:nth-of-type(4n)):checked + input:checked + input::before { border-top-left-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (below) checked box's top borders */
input:not(:nth-of-type(4n)):checked + * + * + * + input:checked + input::before { border-top-left-radius: 0; border-top-right-radius: 0; background: limegreen;
}আপনি চাইলে উপরের কোডটি গতিশীলভাবে তৈরি করতে পারেন। যাইহোক, একটি সাধারণ গ্রিড, একটি চিত্র গ্যালারী বলে, কলামের সংখ্যা ছোট হবে এবং সম্ভবত একটি নির্দিষ্ট সংখ্যক আইটেম হবে, যেখানে সারিগুলি বাড়তে থাকবে। বিশেষ করে যদি মোবাইল স্ক্রিনের জন্য ডিজাইন করা হয়। এই কারণেই এই পদ্ধতিটি এখনও একটি কার্যকর উপায়। যদি কোনো কারণে আপনার অ্যাপ্লিকেশানে সীমিত সারি এবং প্রসারিত কলাম থাকে, তাহলে গ্রিডটিকে পাশে ঘোরানোর কথা বিবেচনা করুন কারণ, আইটেমগুলির একটি প্রবাহের সাথে, CSS গ্রিড সেগুলিকে বাম-থেকে-ডান এবং উপরে-থেকে-নিচে (অর্থাৎ সারি সারি) সাজায়। .
আমাদের গ্রিডের শেষ চেকবক্সগুলির জন্য স্টাইলিং যোগ করতে হবে — সেগুলি সমস্ত সিউডো-এলিমেন্ট দ্বারা আচ্ছাদিত নয় কারণ সেগুলি প্রতিটি অক্ষের শেষ আইটেম।
/* a checked box's (in last column) left borders */
input:nth-of-type(4n-1):checked + input:checked { border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* a checked box's (in last column) adjacent (below) checked box's top borders */
input:nth-of-type(4n):checked + * + * + * + input:checked { border-top-left-radius: 0; border-top-right-radius: 0;
}ওরা কিছু কৌশলী নির্বাচক! প্রথমটি…
input:nth-of-type(4n-1):checked + input:checked… মূলত এটি বলছে:
একটি চেক করা হয়েছে
<input>একটি চেক করা পাশের উপাদান<input>দ্বিতীয় শেষ কলামে।
এবং nth-of-type এই মত গণনা করা হয়:
4(0) - 1 = no match
4(1) - 1 = 3rd item
4(2) - 1 = 7th item
4(3) - 1 = 11th item
etc.সুতরাং, আমরা তৃতীয় চেকবক্স থেকে শুরু করছি এবং সেখান থেকে প্রতি চতুর্থটি নির্বাচন করছি। এবং যদি সেই অনুক্রমের একটি চেকবক্স চেক করা হয়, তাহলে আমরা পাশের চেকবক্সগুলিকেও স্টাইল করি, যদি সেগুলিও চেক করা থাকে।
এবং এই লাইন:
input:nth-of-type(4n):checked + * + * + * + input:checkedএটা বলছে:
An
<input>প্রদত্ত উপাদান যা চেক করা হয়েছে, তা সরাসরি একটি উপাদানের সংলগ্ন, যা সরাসরি অন্য একটি উপাদানের সংলগ্ন, যা সরাসরি অন্য একটি উপাদানের সংলগ্ন, যা ঘুরে, সরাসরি একটি উপাদানের সংলগ্ন।<input>উপাদান যা একটি চেক করা অবস্থায় আছে।
এর মানে কি আমরা প্রতি চতুর্থ চেকবক্স নির্বাচন করছি যা চেক করা হয়েছে। এবং যদি সেই অনুক্রমের একটি চেকবক্স চেক করা হয়, তাহলে আমরা সেই চেকবক্স থেকে পরবর্তী চতুর্থ চেকবক্সটিকে স্টাইল করি যদি এটিও চেক করা হয়।
এটা ব্যবহার করার জন্য নির্বাণ
আমরা যা দেখেছি তা হল ডিজাইনের পিছনে সাধারণ নীতি এবং যুক্তি। আবার, এটি আপনার অ্যাপ্লিকেশনে কতটা দরকারী তা নির্ভর করবে গ্রিড ডিজাইনের উপর।
আমি বৃত্তাকার সীমানা ব্যবহার করেছি, তবে আপনি অন্য আকারগুলি চেষ্টা করতে পারেন বা এমনকি পটভূমি প্রভাবগুলির সাথে পরীক্ষা করতে পারেন (Temani আপনি ধারণা জন্য আচ্ছাদিত করা হয়েছে) এখন যেহেতু আপনি জানেন কিভাবে সূত্রটি কাজ করে, বাকিটা সম্পূর্ণ আপনার কল্পনার উপর নির্ভর করে।
এটি একটি সাধারণ ক্যালেন্ডারে কীভাবে দেখতে পারে তার একটি উদাহরণ এখানে রয়েছে:
আবার, এটি স্ট্যাটিক মার্কআপ ব্যবহার করে নিছক একটি রুক্ষ প্রোটোটাইপ। এবং, একটি ক্যালেন্ডার বৈশিষ্ট্যে বিবেচনা করার জন্য প্রচুর এবং প্রচুর অ্যাক্সেসযোগ্যতার বিবেচনা থাকবে।
এটা একটা মোড়ানো! বেশ ঝরঝরে, তাই না? আমি বলতে চাচ্ছি, যা ঘটছে তার সম্পর্কে "নতুন" কিছুই নেই। কিন্তু এটি একটি ভাল উদাহরণ জিনিস নির্বাচন করা সিএসএস-এ। যদি আমাদের আরও উন্নত নির্বাচনী কৌশলগুলির উপর একটি হ্যান্ডেল থাকে যা কম্বিনেটর এবং সিউডো ব্যবহার করে, তাহলে আমাদের স্টাইলিং ক্ষমতাগুলি স্টাইলিং একটি আইটেমের বাইরে অনেক বেশি পৌঁছে যেতে পারে — যেমন আমরা দেখেছি, আমরা শর্তসাপেক্ষে অন্য উপাদানের অবস্থার উপর ভিত্তি করে আইটেমগুলিকে স্টাইল করতে পারি।
শর্তসাপেক্ষে একটি গ্রিড পাত্রে নির্বাচিত উপাদান স্টাইল করা মূলত প্রকাশিত সিএসএস-ট্রিকস। তোমার উচিত নিউজলেটার পান.
- '
- "
- 10
- 11
- 7
- a
- সম্পর্কে
- অভিগম্যতা
- দিয়ে
- অগ্রসর
- সব
- অনুমতি
- অন্য
- আবেদন
- ফলিত
- প্রয়োগ করা হচ্ছে
- অভিগমন
- কাছাকাছি
- প্রবন্ধ
- অক্ষ
- অক্ষ
- পটভূমি
- মূলত
- কারণ
- আগে
- হচ্ছে
- নিচে
- তার পরেও
- বক্স
- গণিত
- ক্যালেন্ডার
- পরীক্ষণ
- চেক
- কোড
- স্তম্ভ
- বিবেচনা
- বিবেচ্য বিষয়
- আধার
- বিষয়বস্তু
- আবরণ
- সিদ্ধান্ত নিয়েছে
- নির্ভর করে
- নির্ভর করে
- নকশা
- পরিকল্পিত
- বিভিন্ন
- সরাসরি
- প্রদর্শন
- নিচে
- সহজে
- প্রভাব
- প্রভাব
- দক্ষ
- উপাদান
- পরিবেশ
- বিশেষত
- ইত্যাদি
- সব
- ঠিক
- উদাহরণ
- ছাড়া
- বিস্তৃত
- পরীক্ষা
- অভিযাত্রী
- বৈশিষ্ট্য
- ব্যক্তিত্ব
- প্রথম
- স্থায়ী
- কেন্দ্রবিন্দু
- অনুসরণ
- সূত্র
- পাওয়া
- থেকে
- সাধারণ
- উত্পাদন করা
- চালু
- ভাল
- ধূসর
- গ্রিড
- হাতল
- উচ্চতা
- এখানে
- হাইলাইট করা
- অনুভূমিক
- কিভাবে
- যাহোক
- HTTPS দ্বারা
- ধারণা
- ভাবমূর্তি
- চিত্র
- কল্পনা
- অন্যান্য
- ক্রমবর্ধমান
- ইনপুট
- উদাহরণ
- আগ্রহী
- IT
- নিজেই
- রাখা
- চাবি
- জানা
- আলো
- সম্ভবত
- সীমিত
- লাইন
- সামান্য
- দেখুন
- তাকিয়ে
- করা
- ম্যাচ
- মানে
- হতে পারে
- মোবাইল
- অধিক
- বহু
- সংখ্যা
- অনলাইন
- অপশন সমূহ
- ক্রম
- অন্যান্য
- নিজের
- ব্যক্তিগত
- স্থাপন
- সম্ভব
- চমত্কার
- নীতি
- উত্পাদনের
- প্রদত্ত
- নাগাল
- সুপারিশ করা
- বিশ্রাম
- একই
- নিরাপত্তা
- নির্বাচিত
- নির্বাচন
- আকার
- কেনাকাটা
- প্রদর্শিত
- সহজ
- থেকে
- ছোট
- So
- কিছু
- ভাষী
- বর্গক্ষেত্র
- মান
- শুরু
- শুরু
- রাষ্ট্র
- এখনো
- প্রবাহ
- শৈলী
- লক্ষ্য
- লক্ষ্যবস্তু
- লক্ষ্য করে
- প্রযুক্তি
- সার্জারির
- জিনিস
- কিছু
- দ্বারা
- সময়
- একসঙ্গে
- শীর্ষ
- রুপান্তর
- ব্যবহার
- কি
- শব্দ
- কাজ
- মূল্য
- would
- আপনার
