এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

পছন্দ মিডিয়া প্রশ্ন সহ ব্যবহারকারী-অভিযোজিত ইন্টারফেস তৈরি করুন

১. শুরু করার আগে

211ff61d01be58e.png সম্পর্কে

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

ব্যবহারকারীর পছন্দসমূহ

ডিভাইস হার্ডওয়্যার পছন্দ একটি পছন্দ, অপারেটিং সিস্টেম একটি পছন্দ, অ্যাপ এবং অপারেটিং সিস্টেমের রঙগুলি পছন্দ, এবং অ্যাপ এবং অপারেটিং সিস্টেমের ডকুমেন্ট ভাষাগুলি পছন্দ। একজন ব্যবহারকারীর পছন্দের পরিমাণ কেবল বাড়ছে বলে মনে হচ্ছে। একটি ওয়েব পৃষ্ঠা সবকিছু অ্যাক্সেস করতে সক্ষম হয় না এবং সঙ্গত কারণেই ।

CSS দ্বারা ব্যবহার করা যেতে পারে এমন ব্যবহারকারীর পছন্দের কয়েকটি উদাহরণ এখানে দেওয়া হল:

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

CSS-এ শীঘ্রই আসছে এমন ব্যবহারকারীর পছন্দের কয়েকটি উদাহরণ এখানে দেওয়া হল:

কম ডেটা / লাইট মোড
রঙের পরিসর
বৈপরীত্য (কম | বেশি | হ্রাস)
রঙ (ব্যবহারকারীর রঙগুলিকে পৃষ্ঠায় জোর করে প্রবেশ করায়)
স্বচ্ছতা (চালু | হ্রাস)

মিডিয়া কোয়েরি

CSS এবং ওয়েব মিডিয়া কোয়েরির মাধ্যমে অভিযোজন এবং প্রতিক্রিয়াশীলতা সক্ষম করে, একটি ঘোষণামূলক শর্ত যাতে শৈলীর একটি সেট থাকে যদি সেই শর্তটি সত্য হয়। সবচেয়ে সাধারণ শর্ত হল ডিভাইসের ভিউপোর্ট আকারের উপর একটি শর্ত: যদি আকার 800 পিক্সেলের কম হয়, তাহলে সেই ক্ষেত্রে এখানে কিছু ভাল শৈলী রয়েছে।

ব্যবহারকারী-অভিযোজিত

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

পূর্বশর্ত

HTML এবং CSS সম্পর্কে জ্ঞান
গুগল ক্রোম ডেভেলপার টুলের মতো ডেভেলপার টুল সম্পর্কে জ্ঞান থাকা।

তুমি কী তৈরি করবে

এই কোডল্যাবে, আপনি একটি ব্যবহারকারী-অভিযোজিত ফর্ম তৈরি করতে যাচ্ছেন যা নিম্নলিখিতগুলির সাথে খাপ খাইয়ে নেবে:

ফর্ম নিয়ন্ত্রণ এবং আশেপাশের UI উপাদানগুলির জন্য হালকা এবং গাঢ় রঙের স্কিম অফার করে সিস্টেমের রঙের স্কিম পছন্দ
একাধিক ধরণের অ্যানিমেশন অফার করে সিস্টেমের গতি পছন্দগুলি
মোবাইল এবং ডেস্কটপ অভিজ্ঞতা প্রদানের জন্য ছোট এবং বড় ডিভাইস ভিউপোর্ট
বিভিন্ন ধরণের ইনপুট যেমন কীবোর্ড, স্ক্রিন রিডার, টাচ এবং মাউস
যেকোনো ভাষা এবং পঠন/লেখার ধরণ

de5d580a5b8d3c3d.png সম্পর্কে

তুমি কি শিখবে

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

হালকা এবং অন্ধকার থিম তৈরি করুন
অ্যানিমেটেড এবং অ্যাক্সেসযোগ্য ফর্ম তৈরি করুন
লেআউট রেসপন্সিভ ফর্ম
আপেক্ষিক একক এবং লজিক্যাল বৈশিষ্ট্য ব্যবহার করুন

f142984770700a43.png সম্পর্কে

এই কোডল্যাবটি ব্যবহারকারীর অভিযোজিত ইন্টারফেসের উপর দৃষ্টি নিবদ্ধ করে। অপ্রাসঙ্গিক ধারণা এবং কোড ব্লকগুলিকে গ্লস করা হয়েছে এবং আপনার জন্য কেবল কপি এবং পেস্ট করার জন্য সরবরাহ করা হয়েছে।

তোমার যা লাগবে

গুগল ক্রোম ৮৯ এবং তার পরবর্তী সংস্করণ, অথবা আপনার পছন্দের ব্রাউজার

19e9b707348ace4c.png সম্পর্কে

2. সেট আপ করুন

কোডটি পান

এই প্রকল্পের জন্য আপনার যা কিছু প্রয়োজন তা একটি GitHub রিপোজিটরিতে আছে। শুরু করার জন্য, আপনাকে কোডটি সংগ্রহ করে আপনার পছন্দের ডেভেলপার পরিবেশে খুলতে হবে। বিকল্পভাবে, আপনি এই কোডপেনটি ফোর্ক করতে পারেন এবং সেখান থেকে কাজ করতে পারেন।

প্রস্তাবিত: কোডপেন ব্যবহার করুন

একটি নতুন ব্রাউজার ট্যাব খুলুন।
https://codepen.io/argyleink/pen/abBMeeq এ যান।
যদি আপনার কোন অ্যাকাউন্ট না থাকে, তাহলে কাজটি সংরক্ষণ করার জন্য একটি অ্যাকাউন্ট তৈরি করুন।
ফর্ক ক্লিক করুন।

বিকল্প: স্থানীয়ভাবে কাজ করুন

আপনি যদি কোডটি ডাউনলোড করে স্থানীয়ভাবে কাজ করতে চান, তাহলে আপনার Node.js সংস্করণ ১২ বা তার বেশি থাকতে হবে এবং একটি কোড এডিটর সেট আপ করে ব্যবহার করার জন্য প্রস্তুত থাকতে হবে।

গিট ব্যবহার করুন

https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces দেখুন
একটি ফোল্ডারে রিপোজিটরি ক্লোন করুন।
লক্ষ্য করুন ডিফল্ট শাখাটি beginning হচ্ছে।

ফাইল ব্যবহার করুন

ডাউনলোড করা জিপ ফাইলটি একটি ফোল্ডারে আনপ্যাক করুন।

প্রকল্পটি চালান

উপরের যেকোনো ধাপে প্রতিষ্ঠিত প্রকল্প ডিরেক্টরিটি ব্যবহার করুন, তারপর:

সার্ভার চালানোর জন্য প্রয়োজনীয় নির্ভরতা ইনস্টল করতে npm install চালান।
পোর্ট ৩০০০-এ সার্ভার চালু করতে npm start চালান।
একটি নতুন ব্রাউজার ট্যাব খুলুন।
http://localhost:3000 এ যান।

HTML সম্পর্কে

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

যখন আপনি শুরু করার জন্য প্রস্তুত হবেন, তখন এটিই আপনার গতিশীল এবং অভিযোজিত ব্যবহারকারীর অভিজ্ঞতায় রূপান্তরিত হওয়ার মূল বিষয়।

de5d580a5b8d3c3d.png সম্পর্কে

৩. অভিযোজিত মিথস্ক্রিয়া

গিট শাখা : beginning

এই বিভাগের শেষে, আপনার সেটিংস ফর্মটি নিম্নলিখিতগুলির সাথে খাপ খাইয়ে নেবে:

গেমপ্যাড + কীবোর্ড
মাউস + টাচ
স্ক্রিন রিডার বা অনুরূপ সহায়ক প্রযুক্তি

HTML এর জন্য বৈশিষ্ট্য

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

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

ইনপুট গ্রুপ করা

HTML-এর <fieldset> উপাদানটি একই ধরণের ইনপুট এবং নিয়ন্ত্রণগুলিকে একসাথে গ্রুপ করার জন্য। আপনার ফর্মে দুটি গ্রুপ রয়েছে, একটি ভলিউমের জন্য এবং একটি বিজ্ঞপ্তির জন্য। এটি ব্যবহারকারীর অভিজ্ঞতার জন্য গুরুত্বপূর্ণ যাতে পুরো বিভাগগুলি এড়িয়ে যাওয়া যায়।

উপাদানগুলি অর্ডার করা

উপাদানগুলির ক্রম একটি যৌক্তিক ক্রমে প্রদান করা হয়েছে। এটি ব্যবহারকারীর অভিজ্ঞতার জন্য গুরুত্বপূর্ণ তাই ভিজ্যুয়াল অভিজ্ঞতার ক্রম গেমপ্যাড, কীবোর্ড, বা স্ক্রিন রিডার প্রযুক্তির জন্য একই বা অনুরূপ।

কীবোর্ড ইন্টারঅ্যাকশন

ওয়েব ব্যবহারকারীরা তাদের ট্যাব কী ব্যবহার করে ফর্মগুলির মধ্য দিয়ে যেতে অভ্যস্ত হয়ে উঠেছে, যা সৌভাগ্যবশত ব্রাউজারটি প্রত্যাশিত HTML উপাদানগুলি সরবরাহ করলে যত্ন নেয়। <button> , <input> , <h2> , এবং <label> এর মতো উপাদানগুলি ব্যবহার করে স্বয়ংক্রিয়ভাবে কীবোর্ড বা স্ক্রিন-রিডার গন্তব্যস্থল হয়ে ওঠে।

অনুসরণ

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

স্টাইল.সিএসএস

input {
  outline-offset: 5px;
}

চেষ্টা করার মতো জিনিস

index.html এ ব্যবহৃত HTML উপাদানগুলি পর্যালোচনা করুন।
আপনার ব্রাউজারে ডেমো পৃষ্ঠায় ক্লিক করুন।
ফর্মের মধ্য দিয়ে এলিমেন্ট ফোকাস সরাতে tab কী এবং shift+tab কী টিপুন।
স্লাইডার এবং চেকবক্সের মান পরিবর্তন করতে কীবোর্ড ব্যবহার করুন।
একটি ব্লুটুথ গেমপ্যাড কন্ট্রোলার সংযুক্ত করুন এবং ফর্মের মধ্য দিয়ে এলিমেন্ট ফোকাসটি সরান।

মাউসের মিথস্ক্রিয়া

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

অনুসরণ

আপনার লেবেল এবং তাদের ইনপুটগুলিকে সংযুক্ত করার জন্য আপনি কীভাবে দুটি ব্যবহারকারী-অভিজ্ঞতা বৈশিষ্ট্য পান তা দেখুন?

প্রথম বৈশিষ্ট্যটি হল কোন কোন বিকল্পের সাথে ইন্টারঅ্যাক্ট করা যায় এবং লেবেলটি একটি ছোট বর্গক্ষেত্রের চেয়ে মাউসের জন্য লক্ষ্য করা অনেক সহজ।

দ্বিতীয় বৈশিষ্ট্য হল কোন লেবেলটি ঠিক কোন ইনপুটের জন্য তা জানা। CSS ছাড়া, কোন লেবেলটি কোন চেকবক্সের জন্য তা নির্ধারণ করা বেশ কঠিন, যদি না আপনি কিছু বৈশিষ্ট্য প্রদান করেন।

এই স্পষ্ট সংযোগটি স্ক্রিন রিডারদের অভিজ্ঞতাও উন্নত করে, যা পরবর্তী বিভাগে আলোচনা করা হবে।

অসংযুক্ত: উপাদানগুলিকে সংযুক্ত করার জন্য কোনও বৈশিষ্ট্য নেই

<input type="checkbox">
<label>...</label>

সংশ্লিষ্ট: উপাদানগুলিকে সংযুক্তকারী বৈশিষ্ট্য

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

প্রদত্ত HTML ইতিমধ্যেই সমস্ত ইনপুট এবং লেবেলগুলিকে অ্যাট্রিবিউট করেছে। যদি এটি আপনার কাছে নতুন ধারণা হয় তবে আরও তদন্তের যোগ্য।

চেষ্টা করার মতো জিনিস

আপনার মাউস দিয়ে একটি লেবেলের উপর কার্সার রাখুন এবং চেকবক্সের হাইলাইটগুলি লক্ষ্য করুন।
Chrome ডেভেলপার টুল ব্যবহার করে একটি লেবেল উপাদান অনুসন্ধান করুন যাতে ক্লিকযোগ্য পৃষ্ঠের ক্ষেত্রফলটি কল্পনা করা যায় যা চেকবক্সটি নির্বাচন করতে পারে।

সহায়ক প্রযুক্তি এই ফর্মের সাথে ইন্টারঅ্যাক্ট করতে পারে এবং কয়েকটি HTML বৈশিষ্ট্যের সাহায্যে ব্যবহারকারীর অভিজ্ঞতা আরও মসৃণ করতে পারে।

অনুসরণ

Chrome-এ স্ক্রিন রিডার ব্যবহার করে বর্তমান ফর্ম নেভিগেট করা ব্যবহারকারীদের জন্য, <picture> এলিমেন্টে অপ্রয়োজনীয় স্টপ থাকা আবশ্যক (ক্রোমের জন্য নয়)। স্ক্রিন রিডার ব্যবহার করে এমন ব্যবহারকারী সম্ভবত দৃষ্টি প্রতিবন্ধকতার কারণে স্ক্রিন রিডার ব্যবহার করছেন, তাই ছবিতে থামানো সহায়ক নয়। আপনি একটি অ্যাট্রিবিউট ব্যবহার করে স্ক্রিন রিডার থেকে উপাদানগুলি লুকাতে পারেন।

index.html সম্পর্কে

<picture aria-hidden="true">

এখন স্ক্রিন রিডাররা সেই উপাদানটি অতিক্রম করে যা সম্পূর্ণরূপে দৃশ্যমান ছিল।

অনুসরণ

স্লাইডার এলিমেন্ট input[type="range"] -এ একটি বিশেষ ARIA অ্যাট্রিবিউট রয়েছে: aria-labelledby="media-volume" । এটি ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য স্ক্রিন রিডারের জন্য বিশেষ নির্দেশনা প্রদান করে।

চেষ্টা করার মতো জিনিস

ফর্মের মাধ্যমে ফোকাস সরাতে আপনার অপারেটিং-সিস্টেম স্ক্রিন-রিডার প্রযুক্তি ব্যবহার করুন।
ফর্মটিতে কিছু স্ক্রিন-রিডার সফ্টওয়্যার ডাউনলোড করে চেষ্টা করুন।

৪. অভিযোজিত লেআউট

গিট শাখা: layouts

এই বিভাগের শেষে, সেটিংস পৃষ্ঠাটি হবে:

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

f142984770700a43.png সম্পর্কে

ব্যবধান

একটি সুন্দর লেআউটের মূল চাবিকাঠি হল ব্যবধানের বিকল্পগুলির সীমিত প্যালেট। এটি বিষয়বস্তুকে প্রাকৃতিক সারিবদ্ধতা এবং সুরেলাতা খুঁজে পেতে সহায়তা করে।

কাস্টম প্রপার্টি

এই কর্মশালাটি সাতটি কাস্টম সম্পত্তির আকারের একটি সেটের উপর ভিত্তি করে তৈরি।

style.css এর উপরে এগুলো রাখুন:

স্টাইল.সিএসএস

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

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

পৃষ্ঠার ধরণ

এরপর, আপনাকে কিছু ডকুমেন্ট স্টাইল সেট করতে হবে, এলিমেন্ট থেকে মার্জিন সরিয়ে ফেলতে হবে এবং ফন্টটিকে একটি সুন্দর sans-serif এ সেট করতে হবে।

style.css এ নিম্নলিখিতটি যোগ করুন:

স্টাইল.সিএসএস

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

এবার আপনার স্পেসিং কাস্টম বৈশিষ্ট্যের প্রথম ব্যবহার! এটি আপনার মহাকাশ যাত্রা শুরু করে।

টাইপোগ্রাফি

এই লেআউটের ফন্টটি অভিযোজিত । ব্যবহারকারীর অপারেটিং সিস্টেম যেটি সর্বোত্তম ইন্টারফেস ফন্ট বলে মনে করবে সেটিই system-ui কীওয়ার্ড ব্যবহার করবে।

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

h1, h2, এবং h3 এর স্টাইলগুলি গৌণ এবং স্টাইলিস্টিক। যদিও, টেক্সট মোড়ানোর সময় small উপাদানটির অতিরিক্ত line-height প্রয়োজন। অন্যথায় এটি খুব বেশি গুচ্ছ।

যৌক্তিক বৈশিষ্ট্য

লক্ষ্য করুন, body padding সাইড নির্দিষ্ট করার জন্য লজিক্যাল প্রোপার্টি ( block-start , block-end ) ব্যবহার করছে। কোডল্যাবের বাকি অংশ জুড়ে লজিক্যাল প্রোপার্টি ব্যাপকভাবে ব্যবহৃত হবে। এগুলিও, একটি rem ইউনিটের মতো, ব্যবহারকারীর সাথে খাপ খাইয়ে নেয় । এই লেআউটটি অন্য ভাষায় অনুবাদ করা যেতে পারে এবং ব্যবহারকারী তাদের মাতৃভাষায় যে প্রাকৃতিক লেখা এবং নথির দিকনির্দেশনাগুলিতে অভ্যস্ত, সেগুলিতে সেট করা যেতে পারে। লজিক্যাল প্রোপার্টি স্থান, দিকনির্দেশনা বা সারিবদ্ধকরণের শুধুমাত্র একটি সংজ্ঞা দিয়ে এর জন্য সমর্থন আনলক করে।

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

লজিক্যাল প্রোপার্টি আপনাকে কম স্টাইলে লেখার মাধ্যমে আরও বেশি ব্যবহারকারীর কাছে পৌঁছাতে সাহায্য করে।

সিএসএস গ্রিড লেআউট

grid সিএসএস প্রপার্টি একটি শক্তিশালী লেআউট টুল যার জটিল কাজগুলি মোকাবেলা করার জন্য অনেক বৈশিষ্ট্য রয়েছে। আপনি কয়েকটি সহজ গ্রিড লেআউট এবং একটি জটিল লেআউট তৈরি করবেন। আপনি বাইরে থেকে ম্যাক্রো লেআউট থেকে মাইক্রো লেআউট পর্যন্ত কাজ করবেন। আপনার স্পেসিং কাস্টম প্রপার্টিগুলি কেবল প্যাডিং বা মার্জিন মান নয়, বরং কলামের আকার, সীমানা ব্যাসার্ধ এবং আরও অনেক কিছুর মতো গুরুত্বপূর্ণ হয়ে উঠবে।

এখানে Chrome DevTools-এর একটি স্ক্রিনশট দেওয়া হল যেখানে প্রতিটি CSS গ্রিড লেআউট একসাথে ওভারলে করা হয়েছে:

84e57c54d0633793.png সম্পর্কে

style.css এ নিম্নলিখিত প্রতিটি স্টাইল যোগ করে অনুসরণ করুন:

<প্রধান>

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);
}

গ্রিড ডিফল্টভাবে প্রতিটি চাইল্ড এলিমেন্টকে তার নিজস্ব সারিতে রাখে, যা এটিকে উপাদান স্ট্যাক করার জন্য দুর্দান্ত করে তোলে। এর সাথে gap ব্যবহারের অতিরিক্ত সুবিধাও রয়েছে। আগে, আপনি * নির্বাচকের সাহায্যে সমস্ত উপাদানের জন্য margin: 0 সেট করতেন, যা এখন আপনার ব্যবধানের জন্য gap ব্যবহার করার কারণে গুরুত্বপূর্ণ। Gap কেবল একটি পাত্রে স্থান পরিচালনা করার জন্য একটি একক স্থান নয়, বরং এর প্রবাহ আপেক্ষিক।

<ফর্ম>

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

এটি ডিজাইনের সবচেয়ে জটিল গ্রিড লেআউট, তবে সবচেয়ে উত্তেজনাপূর্ণ প্রতিক্রিয়াশীল দিকটির জন্য দায়ী:

max-width হল লেআউট অ্যালগরিদমের জন্য একটি মান প্রদান করা যা এটি কতটা বড় হতে পারে তা নির্ধারণ করার সময় ব্যবহার করা যেতে পারে।
gap কাস্টম বৈশিষ্ট্য ব্যবহার করছে এবং column-gap থেকে একটি ভিন্ন row-gap পাস করছে।
align-items flex-start এ সেট করা আছে যাতে আইটেমের উচ্চতা প্রসারিত না হয়।
grid-template-columns কিছু জটিল বাক্য গঠন আছে, কিন্তু লক্ষ্য হল সংক্ষিপ্ত; কলামগুলি 35ch প্রশস্ত রাখুন এবং কখনও 10ch এর কম না রাখুন, এবং যদি জায়গা থাকে তবে কলামে জিনিসগুলি রাখুন, অন্যথায় সারিগুলি ভাল।

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

<অংশ>

section {
  display: grid;
  gap: var(--space-md);
}

প্রতিটি অংশে সারির একটি গ্রিড থাকা উচিত যেখানে চাইল্ড এলিমেন্টের মধ্যে মাঝারি ফাঁকা স্থান থাকবে।

header {
  display: grid;
  gap: var(--space-xxs);
}

প্রতিটি হেডারে সারির একটি গ্রিড থাকা উচিত যেখানে চাইল্ড এলিমেন্টের মধ্যে অতিরিক্ত ছোট জায়গা থাকবে।

<ফিল্ডসেট>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

এই লেআউটটি কার্ডের মতো চেহারা তৈরি এবং ইনপুটগুলিকে একসাথে গ্রুপ করার জন্য দায়ী। পরবর্তী বিভাগে রঙ যোগ করলে overflow: hidden এবং gap: 1px স্পষ্ট হয়ে যায়।

.fieldset-আইটেম

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

এই লেআউটটি আইকন এবং চেকবক্সকে এর সাথে সম্পর্কিত লেবেল এবং নিয়ন্ত্রণগুলির সাথে কেন্দ্রীভূত করার জন্য দায়ী। গ্রিড টেমপ্লেটের প্রথম কলাম, var(--space-lg) , আইকনের চেয়ে প্রশস্ত একটি কলাম তৈরি করে, তাই একটি চাইল্ড এলিমেন্টকে কোথাও কেন্দ্রীভূত করার প্রয়োজন হয়।

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

.fieldset-আইটেম <ছবি>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

এই লেআউটটি সেটিংস, আইকন বৃত্তের আকার, একটি বৃত্তের আকৃতি তৈরি এবং এর মধ্যে একটি চিত্র কেন্দ্রীভূত করার জন্য দায়ী।

<ছবি> এবং [চেকবক্স] সারিবদ্ধকরণ

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

এই লেআউটটি :is ছদ্ম নির্বাচক ব্যবহার করে চিত্র এবং চেকবক্স উপাদানগুলিতে কেন্দ্রীকরণকে বিচ্ছিন্ন করে।

selector picture > svg .fieldset-item svg দিয়ে এভাবে প্রতিস্থাপন করুন :

.fieldset-আইটেম <svg>

.fieldset-item svg {
  block-size: var(--space-md);
}

এটি svg আইকনের আকারকে আকার সিস্টেমের একটি মানে সেট করে।

.sm-স্ট্যাক

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

এই ইউটিলিটি ক্লাসটি চেকবক্স লেবেল উপাদানগুলির জন্য যা চেকবক্সের জন্য সহায়ক পাঠ্যকে ফাঁকা করে।

ইনপুট[টাইপ="চেকবক্স"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

এই স্টাইলগুলি আমাদের স্পেসিং সেট থেকে মান ব্যবহার করে একটি চেকবক্সের আকার বাড়ায়।

চেষ্টা করার মতো জিনিস

Chrome ডেভেলপার টুলস খুলুন এবং Elements প্যানেলে HTML-এ গ্রিড ব্যাজগুলি খুঁজুন। ডিবাগ টুলগুলি চালু করতে সেগুলিতে ক্লিক করুন।
Chrome ডেভেলপার টুলস খুলুন এবং Styles প্যানে একটি ফাঁক রাখুন।
Chrome Developer Tools খুলুন, Styles প্যানে যান এবং Styles থেকে Layouts এ স্যুইচ করুন। এর সেটিংস টগল করে এবং layouts চালু করে এই এলাকাটি অন্বেষণ করুন।

মিডিয়া কোয়েরি

নিম্নলিখিত CSS ভিউপোর্টের আকার এবং ওরিয়েন্টেশনের উপর ভিত্তি করে স্টাইলগুলিকে অভিযোজিত করে, যাতে ভিউপোর্টের প্রেক্ষাপট বিবেচনা করে স্পেসিং বা বিন্যাসকে সর্বোত্তম করা যায়।

<প্রধান>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

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

<ফর্ম>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

ফর্মটি ইতিমধ্যেই auto-fit ব্যবহার করে ভিউপোর্ট আকারের প্রতি প্রতিক্রিয়াশীল ছিল, কিন্তু মোবাইল ডিভাইসে পরীক্ষা করার সময়, একটি ডিভাইসকে ল্যান্ডস্কেপে পরিণত করলে দুটি ফর্ম গ্রুপ পাশাপাশি থাকে না। একটি orientation মিডিয়া কোয়েরি এবং একটি ভিউপোর্ট প্রস্থ পরীক্ষা করে এই ল্যান্ডস্কেপ প্রসঙ্গের সাথে খাপ খাইয়ে নিন । এখন, যদি ডিভাইসটি ল্যান্ডস্কেপ হয় এবং কমপক্ষে 640 পিক্সেল প্রস্থের হয়, তাহলে --repeat কাস্টম প্রপার্টিটিকে auto-fit কীওয়ার্ডের পরিবর্তে একটি সংখ্যায় স্যুইচ করে দুটি কলাম জোর করে তৈরি করুন।

.fieldset-আইটেম

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

যখন আরও ভিউপোর্ট স্পেস পাওয়া যায় তখন এই মিডিয়া কোয়েরিটি আরেকটি স্পেসিং এক্সপেনশন। গ্রিড টেমপ্লেটটি টেমপ্লেটে একটি বৃহত্তর কাস্টম প্রোপার্টি ( var(--space-xxl) ) ব্যবহার করে প্রথম কলামটি প্রসারিত করে। প্যাডিংটি বৃহত্তর কাস্টম প্রোপার্টিগুলিতেও পাম্প করা হয়।

চেষ্টা করার মতো জিনিস

আপনার ব্রাউজারটি প্রসারিত এবং সংকুচিত করুন, এবং স্থান সামঞ্জস্য হওয়ার সময় দেখুন।
মোবাইল ডিভাইসে প্রিভিউ দেখুন
মোবাইল ডিভাইসে ল্যান্ডস্কেপে প্রিভিউ দেখুন

৫. অভিযোজিত রঙ

গিট শাখা: colors

এই বিভাগের শেষে, আপনার সেটিংস ফর্মটি হবে:

গাঢ় এবং হালকা রঙের পছন্দের সাথে খাপ খাইয়ে নিন
একটি ব্র্যান্ড হেক্স থেকে প্রাপ্ত একটি রঙের স্কিম রাখুন
সহজলভ্য রঙ রাখুন

19e9b707348ace4c.png সম্পর্কে

এইচএসএল

পরবর্তী বিভাগে, আপনি HSL ব্যবহার করে একটি রঙ সিস্টেম তৈরি করবেন যা আপনাকে হালকা এবং অন্ধকার থিম তৈরি করতে সাহায্য করবে। এটি CSS এর এই মূল ধারণার উপর ভিত্তি করে তৈরি: calc() ।

HSL হল হিউ, স্যাচুরেশন এবং লাইটনেস। হিউ হল একটি কোণ, যেমন ঘড়ির একটি বিন্দু, অন্যদিকে স্যাচুরেশন এবং লাইটনেস হল শতাংশ। calc() শতাংশ এবং কোণের উপর গণিত করতে সক্ষম। আপনি CSS-এ এই শতাংশের উপর হালকাতা এবং স্যাচুরেশন গণনা করতে পারেন। কাস্টম বৈশিষ্ট্যের সাথে রঙ চ্যানেল গণনা একত্রিত করুন, এবং আপনি একটি আধুনিক, গতিশীল রঙের স্কিম খুঁজছেন যেখানে ভেরিয়েন্টগুলি একটি বেস রঙ থেকে গণনা করা হয়, যা আপনাকে কোডে মুষ্টিমেয় রঙের ব্যবস্থাপনা এড়াতে সাহায্য করে।

5300e908c0c33d7.png সম্পর্কে

কাস্টম প্রপার্টি

এই বিভাগে, আপনি আপনার বাকি স্টাইলের মধ্যে ব্যবহারের জন্য কাস্টম বৈশিষ্ট্যের একটি সেট তৈরি করবেন। :root ট্যাগে আপনি আগে যে স্পেসিং সেটটি তৈরি করেছিলেন তার অনুরূপ, আপনি রঙ যোগ করবেন।

ধরে নিন আপনার অ্যাপের ব্র্যান্ড রঙ হল #0af । আপনার প্রথম কাজ হল এই হেক্স রঙের মানটিকে HSL রঙের মান: hsl(200 100% 50%) তে রূপান্তর করা। এই রূপান্তরটি HSL-এ আপনার ব্র্যান্ডের রঙের চ্যানেলগুলি প্রকাশ করে, যা আপনি calc() ব্যবহার করে বিভিন্ন সহায়ক ব্র্যান্ডের রঙ গণনা করতে পারেন।

এই বিভাগের নিম্নলিখিত প্রতিটি কোড ব্লক একই :root নির্বাচকের মধ্যে যোগ করা উচিত।

ব্র্যান্ড চ্যানেল

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

তিনটি HSL চ্যানেল বের করে তাদের নিজস্ব কাস্টম বৈশিষ্ট্যে স্থাপন করা হয়েছে।

তিনটি বৈশিষ্ট্য যেমন আছে তেমন ব্যবহার করুন এবং ব্র্যান্ডের রঙটি পুনরায় তৈরি করুন।

ব্র্যান্ড

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

যেহেতু আপনার রঙের স্কিমটি ডিফল্টভাবে গাঢ়, তাই গাঢ় পৃষ্ঠে ব্যবহারের জন্য রঙগুলিকে ডিস্যাচুরেট করা ভালো অভ্যাস (এগুলি অন্যথায় চোখে কম্পন করতে পারে বা অ্যাক্সেসযোগ্য হতে পারে)। আপনার ব্র্যান্ডের রঙ ডিস্যাচুরেট করার জন্য, আপনি যেমন আছে তেমন রঙ এবং হালকাতা ব্যবহার করুন, তবে কিছু ভাগ করে স্যাচুরেশন অর্ধেক করুন: calc(var(--saturation) / 2) । এখন আপনার ব্র্যান্ডের রঙটি সঠিকভাবে থিমে আছে, তবে ব্যবহারের জন্য ডিস্যাচুরেট করা হয়েছে।

টেক্সট

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

আমাদের ডার্ক থিমে পড়ার টেক্সটের জন্য, আপনি ব্র্যান্ডের রঙকে ভিত্তি হিসেবে ব্যবহার করেন, কিন্তু এটি থেকে প্রায় সাদা রঙ তৈরি করেন। অনেক ব্যবহারকারী মনে করবেন টেক্সটটি সাদা, যদিও এটি আসলে খুব হালকা নীল। রঙের মধ্যে থাকা ডিজাইনের সামঞ্জস্য তৈরির একটি শক্তিশালী উপায়। --text1 85% সাদা এবং --text2 65% সাদা, এবং উভয়েরই স্যাচুরেশন খুব কম।

আপনার প্রোজেক্টে কোড যোগ করার পর, Chrome Developer Tools খুলুন এবং এই চ্যানেলের মানগুলি পরিবর্তন করে দেখুন। HSL এবং এর চ্যানেলগুলি একে অপরের সাথে কীভাবে ইন্টারঅ্যাক্ট করে তা অনুভব করুন। হয়তো আপনার রুচি কমবেশি স্যাচুরেশন চায়।

পৃষ্ঠতল

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

টেক্সটটি খুবই হালকা কারণ ডার্ক মোডে পৃষ্ঠতল অন্ধকার থাকবে। যেখানে টেক্সটের রঙগুলি উচ্চ হালকা মান (85% এবং তার বেশি) ব্যবহার করছিল, সেখানে পৃষ্ঠতলগুলি নিম্ন মান (30% এবং তার কম) ব্যবহার করবে। পৃষ্ঠ এবং টেক্সটের মধ্যে হালকাতার পরিসরের মধ্যে একটি সুস্থ স্প্যান থাকা ব্যবহারকারীদের পড়ার জন্য অ্যাক্সেসযোগ্য রঙ নিশ্চিত করতে সহায়তা করবে।

লক্ষ্য করুন কিভাবে রঙগুলি সবচেয়ে গাঢ় ধূসর রঙে শুরু হয়, যার মধ্যে ১০% হালকাতা এবং ১০% স্যাচুরেশন থাকে, তারপর হালকা হওয়ার সাথে সাথে ডিস্যাচুরেটেড হয়। প্রতিটি নতুন পৃষ্ঠ পূর্ববর্তীটির তুলনায় ৫% হালকা। হালকা পৃষ্ঠগুলিতে স্যাচুরেশন একটু বেশিই কমে যায়। আপনার পৃষ্ঠতলগুলিকে ১০% স্যাচুরেশনে রাখার চেষ্টা করুন। আপনি কি এটি কমবেশি পছন্দ করেন?

হালকা থিম

গাঢ় থিম নির্দিষ্ট করে এমন টেক্সট এবং পৃষ্ঠের রঙের একটি সুস্থ সেটের সাথে, এখনই সময় একটি prefers-color-scheme মিডিয়া কোয়েরির ভিতরে রঙের কাস্টম বৈশিষ্ট্যগুলি আপডেট করে হালকা থিমের পছন্দের সাথে খাপ খাইয়ে নেওয়ার।

রঙের বৈপরীত্য ভালোভাবে বজায় রাখার জন্য আপনি আপনার পৃষ্ঠ এবং টেক্সট রঙের মধ্যে হালকাতার মানের একটি বড় পার্থক্য রাখার একই কৌশল ব্যবহার করবেন।

ব্র্যান্ড

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

প্রথমেই আসে ব্র্যান্ডের রঙ। এর স্যাচুরেশন পূর্ণ শক্তিতে পুনরুদ্ধার করা প্রয়োজন।

টেক্সট

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

যেমন গাঢ় থিমে খুব হালকা নীল টেক্সট রঙ ছিল, তেমনই হালকা থিমে টেক্সট রঙগুলি খুব গাঢ় নীল। HSL রঙের জন্য হালকাতার মান হিসাবে 10% এবং 30% দেখলে আপনার মনে হবে যে এই রঙগুলি গাঢ়।

পৃষ্ঠতল

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

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

রঙ সিস্টেম ব্যবহার করুন

এখন রঙগুলি সংজ্ঞায়িত হয়ে গেছে, এখন সেগুলি ব্যবহারের সময়। আপনার কাছে একটি সুন্দর পপিং অ্যাকসেন্ট ব্র্যান্ড রঙ, দুটি টেক্সট রঙ এবং চারটি পৃষ্ঠের রঙ রয়েছে।

নিম্নলিখিত কোড বিভাগগুলির জন্য, ম্যাচিং সিলেক্টরটি খুঁজুন এবং বিদ্যমান কোড ব্লকে রঙের CSS যোগ করুন।

<শরীর>>

body {
  background: var(--surface1);
  color: var(--text1);
}

পৃষ্ঠার প্রাথমিক রঙগুলি হল আপনার তৈরি প্রথম পৃষ্ঠ এবং টেক্সট রঙ, যা ডিফল্ট কন্ট্রাস্টের পরিমাণকে সর্বোচ্চে রাখে। হালকা এবং গাঢ় টগলিং পরীক্ষা করা শুরু হতে পারে!

<ফিল্ডসেট>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

এটি আপনার ডিজাইনের কার্ডের মতো উপাদান। ১ পিক্সেল বর্ডার এবং ১ পিক্সেল ফাঁক একই রঙের এবং প্রতিটি .fieldset-item পিছনের পৃষ্ঠকে প্রতিনিধিত্ব করে। এটি চমৎকার দৃশ্যমান সাদৃশ্য তৈরি করে এবং বজায় রাখা সহজ।

.fieldset-আইটেম

.fieldset-item {
  background: var(--surface3);
}

প্রতিটি ফর্ম ইনপুট তার নিজস্ব পৃষ্ঠতলে। আশা করি, আপনি দেখতে পাচ্ছেন কিভাবে এগুলো একত্রিত হচ্ছে এবং কিভাবে হালকাতার বৈচিত্র্য একসাথে স্তরে স্তরে স্তরে স্তরে মিশে যাচ্ছে।

.fieldset-item > ছবি

.fieldset-item > picture {
  background: var(--surface4);
}

আইকনের চারপাশের বৃত্তের আকৃতি প্রদর্শনের জন্য এটি একটি স্টাইলিস্টিক পছন্দ। পরবর্তী বিভাগে ইন্টারঅ্যাকশন যোগ করলে কেন তা স্পষ্ট হয়ে ওঠে।

.fieldset-আইটেম svg

.fieldset-item svg {
  fill: var(--text2);
}

ফর্মের আইকনগুলি alt text --text2 ব্যবহার করার জন্য সেট করা হয়েছে। যেসব ডিজাইনে ভরা আইকনগুলি টেক্সটের তুলনায় সামান্য হালকা হয়, সেগুলি খুব বেশি ভারী বোধ করা থেকে বিরত রাখে।

.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

এই নির্বাচকটি ইনপুট কন্টেইনার উপাদানের সাথে মেলে যখন ভিতরের কোনও ইনপুট ইন্টারঅ্যাক্ট করা হচ্ছে এবং আপনার ব্র্যান্ড অ্যাকসেন্টের সাথে এটি হাইলাইট করার জন্য SVG কে লক্ষ্য করে। এটি ফর্মের সুন্দর UX প্রতিক্রিয়া প্রদান করে, যেখানে ইনপুটগুলির সাথে ইন্টারঅ্যাক্ট করলে তাদের প্রাসঙ্গিক আইকনোগ্রাফি হাইলাইট হয়।

<ছোট>

small {
  color: var(--text2);
}

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

গাঢ় ফর্ম নিয়ন্ত্রণ

:root {
  color-scheme: dark light;
}

এই চমৎকার শেষ স্পর্শটি ব্রাউজারকে বলে যে এই পৃষ্ঠাটি অন্ধকার এবং হালকা উভয় থিমকেই সমর্থন করে। ব্রাউজারটি আমাদের অন্ধকার ফর্ম নিয়ন্ত্রণ দিয়ে পুরস্কৃত করে।

৬. অভিযোজিত অ্যানিমেশন

গিট শাখা: animations

এই বিভাগের শেষে, সেটিংস পৃষ্ঠাটি হবে:

ব্যবহারকারীর গতি পছন্দের সাথে খাপ খাইয়ে নিন
ব্যবহারকারীর মিথস্ক্রিয়ায় সাড়া দিন

অনুসরণ

গতি হ্রাস বনাম গতিহীনতা

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

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

মিথস্ক্রিয়া শৈলী

<ফিল্ডসেট>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

যখন একজন ব্যবহারকারী <fieldset> কার্ড-সুদর্শন উপাদানগুলির একটির ইনপুটগুলির সাথে ইন্টারঅ্যাক্ট করেন, তখন এটি একটি উত্তোলন প্রভাব যোগ করে। ইন্টারফেসটি একটি উপাদানকে এগিয়ে নিয়ে যাচ্ছে, যা ব্যবহারকারীর দিকে প্রাসঙ্গিক ফর্ম গ্রুপ আনার সাথে সাথে ব্যবহারকারীকে ফোকাস করতে সহায়তা করছে।

.fieldset-আইটেম

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

যখন ব্যবহারকারী কোনও ইনপুটের সাথে ইন্টারঅ্যাক্ট করেন, তখন নির্দিষ্ট আইটেম স্তরের পটভূমিটি একটি হাইলাইটেড পৃষ্ঠের রঙে পরিবর্তিত হয়, যা ব্যবহারকারীর দৃষ্টি আকর্ষণ করতে এবং ইনপুট গ্রহণের সংকেত দেওয়ার জন্য আরেকটি সহায়ক ইন্টারফেস বৈশিষ্ট্য। বেশিরভাগ ক্ষেত্রে রঙের পরিবর্তন হ্রাস করার প্রয়োজন হয় না।

.fieldset-item > ছবি

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

এখানে একটি clip-path অ্যানিমেশন দেওয়া হল যা শুধুমাত্র তখনই ব্যবহার করা যাবে যখন ব্যবহারকারীর গতি হ্রাসের ক্ষেত্রে কোনও পছন্দ না থাকে। প্রথম নির্বাচক এবং স্টাইলগুলি বৃত্ত ক্লিপ পাথকে 10% দ্বারা সংকুচিত করে এবং কিছু ট্রানজিশন প্যারামিটার সেট করে। দ্বিতীয় নির্বাচক এবং স্টাইল ব্যবহারকারীদের একটি ইনপুটের সাথে ইন্টারঅ্যাক্ট করার জন্য অপেক্ষা করে, তারপর আইকনের বৃত্তটি স্কেল করে। ঠিক থাকলে একটি সূক্ষ্ম, কিন্তু সুন্দর প্রভাব।

৭. অভিনন্দন

গিট শাখা: complete

অভিনন্দন, আপনি সফলভাবে একটি ব্যবহারকারী-অভিযোজিত ইন্টারফেস তৈরি করেছেন!

বিভিন্ন ব্যবহারকারীর পরিস্থিতি এবং সেটিংসের সাথে খাপ খাইয়ে নেওয়ার জন্য ইন্টারফেস তৈরির জন্য প্রয়োজনীয় মূল পদক্ষেপগুলি এখন আপনি জানেন।

পছন্দ মিডিয়া প্রশ্ন সহ ব্যবহারকারী-অভিযোজিত ইন্টারফেস তৈরি করুন

১. শুরু করার আগে

ব্যবহারকারীর পছন্দসমূহ

মিডিয়া কোয়েরি

ব্যবহারকারী-অভিযোজিত

পূর্বশর্ত

তুমি কী তৈরি করবে

তুমি কি শিখবে

তোমার যা লাগবে

2. সেট আপ করুন

কোডটি পান

প্রস্তাবিত: কোডপেন ব্যবহার করুন

বিকল্প: স্থানীয়ভাবে কাজ করুন

HTML সম্পর্কে

৩. অভিযোজিত মিথস্ক্রিয়া

HTML এর জন্য বৈশিষ্ট্য

ইনপুট গ্রুপ করা

উপাদানগুলি অর্ডার করা

কীবোর্ড ইন্টারঅ্যাকশন

স্টাইল.সিএসএস

চেষ্টা করার মতো জিনিস

মাউসের মিথস্ক্রিয়া

চেষ্টা করার মতো জিনিস

স্ক্রিন-রিডার ইন্টারঅ্যাকশন

index.html সম্পর্কে

চেষ্টা করার মতো জিনিস

৪. অভিযোজিত লেআউট

ব্যবধান

কাস্টম প্রপার্টি

স্টাইল.সিএসএস

পৃষ্ঠার ধরণ

স্টাইল.সিএসএস

টাইপোগ্রাফি

যৌক্তিক বৈশিষ্ট্য

সিএসএস গ্রিড লেআউট

<প্রধান>

<ফর্ম>

<অংশ>

<শিরোনাম>

<ফিল্ডসেট>

.fieldset-আইটেম

.fieldset-আইটেম <ছবি>

<ছবি> এবং [চেকবক্স] সারিবদ্ধকরণ

.fieldset-আইটেম <svg>

.sm-স্ট্যাক

ইনপুট[টাইপ="চেকবক্স"]

চেষ্টা করার মতো জিনিস

মিডিয়া কোয়েরি

<প্রধান>

<ফর্ম>

.fieldset-আইটেম

চেষ্টা করার মতো জিনিস

৫. অভিযোজিত রঙ

এইচএসএল

কাস্টম প্রপার্টি

ব্র্যান্ড চ্যানেল

ব্র্যান্ড

টেক্সট

পৃষ্ঠতল

হালকা থিম

ব্র্যান্ড

টেক্সট

পৃষ্ঠতল

রঙ সিস্টেম ব্যবহার করুন

<শরীর>>

<ফিল্ডসেট>

.fieldset-আইটেম

.fieldset-item > ছবি

.fieldset-আইটেম svg

.fieldset-item:focus-within svg

<ছোট>

গাঢ় ফর্ম নিয়ন্ত্রণ

৬. অভিযোজিত অ্যানিমেশন

গতি হ্রাস বনাম গতিহীনতা

মিথস্ক্রিয়া শৈলী

<ফিল্ডসেট>

.fieldset-আইটেম

.fieldset-item > ছবি

৭. অভিনন্দন