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

একটি সেটিংস উপাদান নির্মাণ
সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।

স্লাইডার এবং চেকবক্সগুলির একটি সেটিংস উপাদান কীভাবে তৈরি করা যায় তার একটি ভিত্তিগত ওভারভিউ।

Adam Argyle

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

ডেমো

আপনি যদি ভিডিও পছন্দ করেন বা আমরা যা তৈরি করছি তার একটি UI/UX প্রিভিউ চান, তাহলে YouTube এ এখানে একটি সংক্ষিপ্ত ওয়াকথ্রু রয়েছে:

ওভারভিউ

আমি এই উপাদানটির দিকগুলিকে নিম্নলিখিত বিভাগে বিভক্ত করেছি:

বিন্যাস
রঙ
কাস্টম পরিসীমা ইনপুট
কাস্টম চেকবক্স ইনপুট
অ্যাক্সেসযোগ্যতা বিবেচনা
জাভাস্ক্রিপ্ট

বিন্যাস

এটি হল প্রথম GUI চ্যালেঞ্জ ডেমো যা সমস্ত CSS গ্রিড ! এখানে গ্রিডের জন্য Chrome DevTools সহ প্রতিটি গ্রিড হাইলাইট করা হয়েছে:

রঙিন রূপরেখা এবং ফাঁক ফাঁক ওভারলে যা সেটিংস বিন্যাস তৈরি করে এমন সমস্ত বাক্স দেখাতে সাহায্য করে

দ্রষ্টব্য: আপনার গ্রিড লেআউট হাইলাইট করতে: 1. cmd+opt+i বা ctrl+alt+i দিয়ে Chrome DevTools খুলুন। 1. শৈলী ট্যাবের পাশে লেআউট ট্যাবটি নির্বাচন করুন৷ 1. গ্রিড লেআউট বিভাগের অধীনে, সমস্ত লেআউট পরীক্ষা করুন। 1. সমস্ত লেআউটের রং পরিবর্তন করুন।

শুধু ফাঁকের জন্য

সবচেয়ে সাধারণ লেআউট:

foo {
  display: grid;
  gap: var(--something);
}

আমি এই লেআউটটিকে "শুধু ফাঁকের জন্য" বলি কারণ এটি শুধুমাত্র ব্লকগুলির মধ্যে ফাঁক যোগ করতে গ্রিড ব্যবহার করে।

পাঁচটি লেআউট এই কৌশলটি ব্যবহার করে, এখানে সেগুলির সবগুলি প্রদর্শিত হয়েছে:

উল্লম্ব গ্রিড লেআউটগুলি রূপরেখা সহ হাইলাইট করা হয়েছে এবং ফাঁকগুলি পূরণ করেছে৷

fieldset উপাদান, যার মধ্যে প্রতিটি ইনপুট গ্রুপ রয়েছে ( .fieldset-item ), উপাদানগুলির মধ্যে হেয়ারলাইন সীমানা তৈরি করতে gap: 1px ব্যবহার করছে৷ কোন জটিল সীমান্ত সমাধান!

শূন্যস্থান পূরণ

.grid {
  display: grid;
  gap: 1px;
  background: var(--bg-surface-1);

  & > .fieldset-item {
    background: var(--bg-surface-2);
  }
}

সীমান্ত কৌশল

.grid {
  display: grid;

  & > .fieldset-item {
    background: var(--bg-surface-2);

    &:not(:last-child) {
      border-bottom: 1px solid var(--bg-surface-1);
    }
  }
}

প্রাকৃতিক গ্রিড মোড়ানো

সবচেয়ে জটিল লেআউটটি ম্যাক্রো লেআউট, <main> এবং <form> মধ্যে লজিক্যাল লেআউট সিস্টেম।

কেন্দ্রে মোড়ানো বিষয়বস্তু

ফ্লেক্সবক্স এবং গ্রিড উভয়ই align-items বা align-content ক্ষমতা প্রদান করে এবং মোড়ানো উপাদানগুলির সাথে কাজ করার সময়, content বিন্যাস সারিবদ্ধকরণগুলি একটি গোষ্ঠী হিসাবে শিশুদের মধ্যে স্থান বিতরণ করবে।

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

মূল উপাদানটি হল place-content: center প্রান্তিককরণ শর্টহ্যান্ড যাতে বাচ্চারা এক এবং দুটি কলামের লেআউটে উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্রীভূত হয়।

উপরের ভিডিওতে দেখুন কিভাবে "বিষয়বস্তু" কেন্দ্রীভূত থাকে, যদিও মোড়ানো হয়েছে।

অটো-ফিট minmax পুনরাবৃত্তি করুন

<form> প্রতিটি বিভাগের জন্য একটি অভিযোজিত গ্রিড বিন্যাস ব্যবহার করে। উপলব্ধ স্থানের উপর ভিত্তি করে এই বিন্যাসটি এক থেকে দুটি কলাম থেকে স্যুইচ করে।

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

প্রতিক্রিয়াশীল বিন্যাসে সেই কাস্টম টাচ রাখার জন্য এই গ্রিডের row-gap (--স্পেস-এক্সএল) column-gap (--স্পেস-এক্সএক্সএল) এর চেয়ে আলাদা মান রয়েছে। যখন কলাম স্ট্যাক, আমরা একটি বড় ফাঁক চাই, কিন্তু আমরা একটি প্রশস্ত পর্দার মত বড় না.

grid-template-columns বৈশিষ্ট্য 3টি CSS ফাংশন ব্যবহার করে: repeat() , minmax() এবং min() । উনা ক্র্যাভেটস-এর এই সম্পর্কে একটি দুর্দান্ত লেআউট ব্লগ পোস্ট রয়েছে, এটিকে RAM বলে।

আমাদের লেআউটে 3টি বিশেষ সংযোজন আছে, যদি আপনি এটি উনার সাথে তুলনা করেন:

আমরা একটি অতিরিক্ত min() ফাংশন পাস করি।
আমরা align-items: flex-start ।
একটি max-width: 89vw শৈলী আছে।

অতিরিক্ত min() ফাংশনটি ইভান মিন্টো তাদের ব্লগে minmax() এবং min() সহ অভ্যন্তরীণভাবে প্রতিক্রিয়াশীল CSS গ্রিড পোস্টে ভালভাবে বর্ণনা করেছেন। আমি যে একটি পড়া দিতে সুপারিশ. flex-start অ্যালাইনমেন্ট সংশোধন হল ডিফল্ট স্ট্রেচিং ইফেক্টটি সরিয়ে ফেলার জন্য, যাতে এই লেআউটের বাচ্চাদের সমান উচ্চতা থাকতে হবে না, তাদের স্বাভাবিক, অন্তর্নিহিত উচ্চতা থাকতে পারে। YouTube ভিডিওতে এই প্রান্তিককরণ সংযোজনের একটি দ্রুত ভাঙ্গন রয়েছে৷

max-width: 89vw এই পোস্টে একটি ছোট ভাঙ্গন মূল্য। আমাকে প্রয়োগ করা শৈলী সহ এবং ছাড়া লেআউট দেখাতে দিন:

কি হচ্ছে? যখন max-width নির্দিষ্ট করা হয়, তখন এটি স্থানটিতে কতগুলি পুনরাবৃত্তি করতে পারে তা জানার জন্য auto-fit লেআউট অ্যালগরিদমের জন্য প্রসঙ্গ, স্পষ্ট আকার বা নির্দিষ্ট মাপ প্রদান করে। যদিও এটি স্পষ্ট বলে মনে হচ্ছে যে স্থানটি "পূর্ণ প্রস্থ", CSS গ্রিড স্পেক অনুযায়ী, একটি নির্দিষ্ট আকার বা সর্বোচ্চ-আকার প্রদান করা আবশ্যক। আমি একটি সর্বোচ্চ আকার প্রদান করেছি.

তাহলে, কেন 89vw ? কারণ আমার লেআউটের জন্য "এটি কাজ করেছে"। আমি এবং আরও কিছু ক্রোম লোকেরা তদন্ত করছি কেন আরও যুক্তিসঙ্গত মান, যেমন 100vw যথেষ্ট নয় এবং এটি আসলে একটি বাগ কিনা।

ব্যবধান

এই লেআউটের বেশিরভাগ সামঞ্জস্য একটি সীমিত প্যালেটের ব্যবধান থেকে, 7 সঠিক হতে হবে।

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

গ্রিড, CSS @nest এবং @media এর লেভেল 5 সিনট্যাক্সের সাথে এই প্রবাহের ব্যবহার সত্যিই চমৎকারভাবে। এখানে একটি উদাহরণ, সম্পূর্ণরূপে <main> শৈলীর বিন্যাস সেট।

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

  @media (width >= 540px) {
    & {
      padding: var(--space-lg);
    }
  }

  @media (width >= 800px) {
    & {
      padding: var(--space-xl);
    }
  }
}

কেন্দ্রীভূত সামগ্রী সহ একটি গ্রিড, ডিফল্টরূপে মাঝারিভাবে প্যাড করা (যেমন মোবাইলে)। কিন্তু যত বেশি ভিউপোর্ট স্পেস পাওয়া যায়, এটি প্যাডিং বাড়িয়ে ছড়িয়ে পড়ে। 2021 CSS বেশ ভাল দেখাচ্ছে!

আগের লেআউটটি মনে রাখবেন, "শুধু ফাঁকের জন্য"? এই উপাদানটিতে তারা কীভাবে দেখায় তার একটি আরও সম্পূর্ণ সংস্করণ এখানে রয়েছে:

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

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

রঙ

রঙের একটি নিয়ন্ত্রিত ব্যবহার এই নকশাটিকে অভিব্যক্তিপূর্ণ কিন্তু ন্যূনতম হিসাবে দাঁড়াতে সাহায্য করেছে। আমি এটি এই মত করি:

:root {
  --surface1: lch(10 0 0);
  --surface2: lch(15 0 0);
  --surface3: lch(20 0 0);
  --surface4: lch(25 0 0);

  --text1: lch(95 0 0);
  --text2: lch(75 0 0);
}

মূল শব্দ: PostCSS lab() এবং lch() প্লাগইন হল PostCSS প্রিসেট Env- এর অংশ, এবং rgb() রঙ আউটপুট করবে।

আমি surface-dark এবং surface-darker মত নামের বিপরীতে নম্বর দিয়ে আমার সারফেস এবং টেক্সট রঙের নাম রাখি কারণ মিডিয়া ক্যোয়ারীতে, আমি সেগুলি ফ্লিপ করব, এবং হালকা এবং অন্ধকার অর্থপূর্ণ হবে না।

আমি তাদের পছন্দের মিডিয়া ক্যোয়ারীতে এভাবে ফ্লিপ করি:

:root {
  ...

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --surface2: lch(100 0 0);
      --surface3: lch(98 0 0);
      --surface4: lch(85 0 0);

      --text1: lch(20 0 0);
      --text2: lch(40 0 0);
    }
  }
}

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

এলসিএইচ?

রঙের তত্ত্বের গভীরে না গিয়ে, এলসিএইচ একটি মানব ভিত্তিক বাক্য গঠন, যা আমরা কীভাবে রঙ বুঝতে পারি তা পূরণ করে, গণিত দিয়ে আমরা কীভাবে রঙ পরিমাপ করি (যেমন 255)। এটি এটিকে একটি স্বতন্ত্র সুবিধা দেয় কারণ মানুষ এটিকে আরও সহজে লিখতে পারে এবং অন্যান্য মানুষ এই সামঞ্জস্যগুলির সাথে তাল মিলিয়ে থাকবে৷

pod.link/csspodcast ওয়েবপৃষ্ঠার একটি স্ক্রিনশট, কালার 2 সহ: পারসেপশন পর্ব টানা হয়েছে — সিএসএস পডকাস্টে উপলব্ধিগত রঙ (এবং আরও!) সম্পর্কে জানুন

আজকের জন্য, এই ডেমোতে, আসুন সিনট্যাক্স এবং মানগুলির উপর ফোকাস করি যা আমি হালকা এবং অন্ধকার করতে ফ্লিপ করছি। আসুন 1টি পৃষ্ঠ এবং 1টি পাঠ্যের রঙ দেখি:

:root {
  --surface1: lch(10 0 0);
  --text1:    lch(95 0 0);

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --text1:    lch(40 0 0);
    }
  }
}

--surface1: lch(10 0 0) অনুবাদ করে 10% হালকাতা, 0 ক্রোমা এবং 0 হিউ: একটি খুব গাঢ় বর্ণহীন ধূসর। তারপর, লাইট মোডের জন্য মিডিয়া ক্যোয়ারীতে, --সারফেস 90% --surface1: lch(90 0 0); . এবং যে কৌশল সারাংশ. শুধুমাত্র 2টি থিমের মধ্যে হালকাতা পরিবর্তন করে শুরু করুন, ডিজাইনের জন্য যে বৈসাদৃশ্য অনুপাত প্রয়োজন বা যা অ্যাক্সেসযোগ্যতা বজায় রাখতে পারে তা বজায় রাখা।

এখানে lch() এর সাথে বোনাস হল যে হালকাতা মানবমুখী, এবং আমরা এটির একটি % পরিবর্তন সম্পর্কে ভাল অনুভব করতে পারি যে এটি উপলব্ধিগতভাবে এবং ধারাবাহিকভাবে % ভিন্ন হবে। hsl() যেমন নির্ভরযোগ্য নয় ।

আপনি যদি আগ্রহী হন তবে রঙের স্থান এবং lch() সম্পর্কে আরও শিখতে হবে । এটা আসছে!

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

রঙ-স্কিম সহ অভিযোজিত ফর্ম নিয়ন্ত্রণ

অনেক ব্রাউজার ডার্ক থিম কন্ট্রোল পাঠায়, বর্তমানে Safari এবং Chromium, কিন্তু আপনাকে CSS বা HTML-এ উল্লেখ করতে হবে যে আপনার ডিজাইন সেগুলি ব্যবহার করে।

উপরেরটি DevTools-এর শৈলী প্যানেল থেকে সম্পত্তির প্রভাব প্রদর্শন করছে। ডেমোটি HTML ট্যাগ ব্যবহার করে, যা আমার মতে সাধারণত একটি ভাল অবস্থান:

<meta name="color-scheme" content="dark light">

টমাস স্টেইনারের এই color-scheme নিবন্ধে এটি সম্পর্কে সমস্ত জানুন। ডার্ক চেকবক্স ইনপুট থেকে লাভ করার জন্য আরও অনেক কিছু আছে!

CSS `accent-color`

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

input[type="checkbox"] {
  accent-color: var(--brand);
}

গোলাপী চেকবক্সের Linux-এ Chromium থেকে একটি স্ক্রিনশট

নির্দিষ্ট গ্রেডিয়েন্ট এবং ফোকাস-ভিতরে রঙের পপ

রঙ সবচেয়ে বেশি পপ হয় যখন এটি অল্প ব্যবহার করা হয়, এবং আমি এটি অর্জন করতে পছন্দ করি এমন একটি উপায় হল রঙিন UI ইন্টারঅ্যাকশনের মাধ্যমে।

উপরের ভিডিওতে UI প্রতিক্রিয়া এবং মিথস্ক্রিয়াগুলির অনেক স্তর রয়েছে, যা মিথস্ক্রিয়াকে ব্যক্তিত্ব দিতে সাহায্য করে:

প্রসঙ্গ হাইলাইট করা।
মানটি পরিসরে "কত পূর্ণ" এর UI প্রতিক্রিয়া প্রদান করা।
UI প্রতিক্রিয়া প্রদান করা যে একটি ক্ষেত্র ইনপুট গ্রহণ করছে।

যখন একটি উপাদানের সাথে ইন্টারঅ্যাক্ট করা হচ্ছে তখন প্রতিক্রিয়া প্রদানের জন্য, CSS বিভিন্ন উপাদানের চেহারা পরিবর্তন করতে :focus-within pseudo class ব্যবহার করছে, আসুন .fieldset-item কে ভেঙে দেওয়া যাক, এটি খুবই আকর্ষণীয়:

.fieldset-item {
  ...

  &:focus-within {
    background: var(--surface2);

    & svg {
      fill: white;
    }

    & picture {
      clip-path: circle(50%);
      background: var(--brand-bg-gradient) fixed;
    }
  }
}

যখন এই উপাদানটির একটি শিশুর মধ্যে ফোকাস থাকে:

.fieldset-item ব্যাকগ্রাউন্ডে একটি উচ্চতর কনট্রাস্ট পৃষ্ঠের রঙ বরাদ্দ করা হয়েছে।
নেস্টেড svg উচ্চতর বৈসাদৃশ্যের জন্য সাদা পূর্ণ হয়।
নেস্টেড <picture> clip-path একটি পূর্ণ বৃত্তে প্রসারিত হয় এবং পটভূমি উজ্জ্বল স্থির গ্রেডিয়েন্টে পূর্ণ হয়।

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

নিম্নলিখিত HTML ইনপুট উপাদান দেওয়া, আমি আপনাকে দেখাব কিভাবে আমি এর চেহারা কাস্টমাইজ করেছি:

<input type="range">

এই উপাদানটির 3টি অংশ আমাদের কাস্টমাইজ করতে হবে:

পরিসীমা উপাদান / ধারক
ট্র্যাক
থাম্ব

রেঞ্জ উপাদান শৈলী

input[type="range"] {
  /* style setting variables */
  --track-height: .5ex;
  --track-fill: 0%;
  --thumb-size: 3ex;
  --thumb-offset: -1.25ex;
  --thumb-highlight-size: 0px;

  appearance: none;         /* clear styles, make way for mine */
  display: block;
  inline-size: 100%;        /* fill container */
  margin: 1ex 0;            /* ensure thumb isn't colliding with sibling content */
  background: transparent;  /* bg is in the track */
  outline-offset: 5px;      /* focus styles have space */
}

CSS-এর প্রথম কয়েকটি লাইন হল শৈলীগুলির কাস্টম অংশ, এবং আমি আশা করি যে তাদের স্পষ্টভাবে লেবেল করা সাহায্য করবে। বাকি স্টাইলগুলি বেশিরভাগই রিসেট স্টাইল, যা উপাদানটির জটিল অংশগুলি তৈরি করার জন্য একটি সামঞ্জস্যপূর্ণ ভিত্তি প্রদান করে।

ট্র্যাক শৈলী

input[type="range"]::-webkit-slider-runnable-track {
  appearance: none; /* clear styles, make way for mine */
  block-size: var(--track-height);
  border-radius: 5ex;
  background:
    /* hard stop gradient:
        - half transparent (where colorful fill we be)
        - half dark track fill
        - 1st background image is on top
    */
    linear-gradient(
      to right,
      transparent var(--track-fill),
      var(--surface1) 0%
    ),
    /* colorful fill effect, behind track surface fill */
    var(--brand-bg-gradient) fixed;
}

এর কৌশলটি হল প্রাণবন্ত ভরাট রঙ "প্রকাশ করা"। এটি উপরে হার্ড স্টপ গ্রেডিয়েন্ট দিয়ে করা হয়। ভরাট শতাংশ পর্যন্ত গ্রেডিয়েন্ট স্বচ্ছ, এবং এর পরে অপূর্ণ ট্র্যাক পৃষ্ঠের রঙ ব্যবহার করে। সেই অপূর্ণ পৃষ্ঠের পিছনে, একটি পূর্ণ প্রস্থের রঙ, এটি প্রকাশ করার জন্য স্বচ্ছতার জন্য অপেক্ষা করছে।

ট্র্যাক ভরাট শৈলী

আমার নকশা পূরণ শৈলী বজায় রাখার জন্য জাভাস্ক্রিপ্ট প্রয়োজন . শুধুমাত্র CSS কৌশল রয়েছে কিন্তু তাদের থাম্ব উপাদানটিকে ট্র্যাকের মতো একই উচ্চতা হতে হবে এবং আমি সেই সীমার মধ্যে একটি সামঞ্জস্য খুঁজে পেতে পারিনি।

/* grab sliders on page */
const sliders = document.querySelectorAll('input[type="range"]')

/* take a slider element, return a percentage string for use in CSS */
const rangeToPercent = slider => {
  const max = slider.getAttribute('max') || 10;
  const percent = slider.value / max * 100;

  return `${parseInt(percent)}%`;
};

/* on page load, set the fill amount */
sliders.forEach(slider => {
  slider.style.setProperty('--track-fill', rangeToPercent(slider));

  /* when a slider changes, update the fill prop */
  slider.addEventListener('input', e => {
    e.target.style.setProperty('--track-fill', rangeToPercent(e.target));
  })
})

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

এখানে Ana Tudor- এর CSS-Tricks-এর উপর একটি দুর্দান্ত পোস্ট রয়েছে , যা ট্র্যাক পূরণের জন্য একমাত্র CSS সমাধান প্রদর্শন করে। আমি এই range উপাদান খুব অনুপ্রেরণামূলক খুঁজে পেয়েছি.

থাম্ব শৈলী

input[type="range"]::-webkit-slider-thumb {
  appearance: none; /* clear styles, make way for mine */
  cursor: ew-resize; /* cursor style to support drag direction */
  border: 3px solid var(--surface3);
  block-size: var(--thumb-size);
  inline-size: var(--thumb-size);
  margin-top: var(--thumb-offset);
  border-radius: 50%;
  background: var(--brand-bg-gradient) fixed;
}

এই শৈলী সংখ্যাগরিষ্ঠ একটি সুন্দর বৃত্ত করতে হয়. আবার আপনি সেখানে স্থির ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট দেখতে পাচ্ছেন যা থাম্বস, ট্র্যাক এবং সংশ্লিষ্ট SVG উপাদানগুলির গতিশীল রঙকে একীভূত করে। হোভার হাইলাইটের জন্য ব্যবহৃত box-shadow কৌশলটিকে আলাদা করতে সাহায্য করার জন্য আমি মিথস্ক্রিয়াটির জন্য শৈলীগুলি আলাদা করেছি:

@custom-media --motionOK (prefers-reduced-motion: no-preference);

::-webkit-slider-thumb {
  …

  /* shadow spread is initally 0 */
  box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);

  /* if motion is OK, transition the box-shadow change */
  @media (--motionOK) {
    & {
      transition: box-shadow .1s ease;
    }
  }

  /* on hover/active state of parent, increase size prop */
  @nest input[type="range"]:is(:hover,:active) & {
    --thumb-highlight-size: 10px;
  }
}

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

যদি শুধুমাত্র হাইলাইট প্রভাব চেকবক্সে এত সহজ ছিল...

ক্রস ব্রাউজার নির্বাচক

আমি খুঁজে পেয়েছি ক্রস ব্রাউজার সামঞ্জস্য অর্জনের জন্য আমার এই -webkit- এবং -moz- নির্বাচকদের প্রয়োজন:

input[type="range"] {
  &::-webkit-slider-runnable-track {}
  &::-moz-range-track {}
  &::-webkit-slider-thumb {}
  &::-moz-range-thumb {}
}

কাস্টম চেকবক্স

<input type="checkbox">

এই উপাদানটির 3টি অংশ আমাদের কাস্টমাইজ করতে হবে:

চেকবক্স উপাদান
সংশ্লিষ্ট লেবেল
প্রভাব হাইলাইট করুন

চেকবক্স উপাদান

input[type="checkbox"] {
  inline-size: var(--space-sm);   /* increase width */
  block-size: var(--space-sm);    /* increase height */
  outline-offset: 5px;            /* focus style enhancement */
  accent-color: var(--brand);     /* tint the input */
  position: relative;             /* prepare for an absolute pseudo element */
  transform-style: preserve-3d;   /* create a 3d z-space stacking context */
  margin: 0;
  cursor: pointer;
}

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

চেকবক্স লেবেল

2টি কারণে চেকবক্সের জন্য লেবেল প্রদান করা গুরুত্বপূর্ণ। প্রথমটি হল চেকবক্স মানটি কীসের জন্য ব্যবহার করা হয় তা উপস্থাপন করা, "কিসের জন্য চালু বা বন্ধ?" দ্বিতীয়টি হল UX-এর জন্য, ওয়েব ব্যবহারকারীরা তাদের সংশ্লিষ্ট লেবেলের মাধ্যমে চেকবক্সের সাথে ইন্টারঅ্যাক্ট করতে অভ্যস্ত হয়ে উঠেছে।

ইনপুট

<input
  type="checkbox"
  id="text-notifications"
  name="text-notifications"
>

লেবেল

<label for="text-notifications">
  <h3>Text Messages</h3>
  <small>Get notified about all text messages sent to your device</small>
</label>

আপনার লেবেলে, একটি for রাখুন যা আইডি দ্বারা একটি চেকবক্সে নির্দেশ করে: <label for="text-notifications"> । আপনার চেকবক্সে, মাউস বা স্ক্রিনরিডারের মতো বিভিন্ন সরঞ্জাম এবং প্রযুক্তির মাধ্যমে এটি পাওয়া গেছে তা নিশ্চিত করতে নাম এবং আইডি উভয়ই দ্বিগুণ করুন: <input type="checkbox" id="text-notifications" name="text-notifications"> । :hover , :active এবং আরও অনেক কিছু বিনামূল্যে সংযোগের সাথে আসে, আপনার ফর্মের সাথে যেভাবে ইন্টারঅ্যাক্ট করা যেতে পারে তা বাড়িয়ে দেয়।

চেকবক্স হাইলাইট

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

আমি একটি ছদ্ম উপাদান, এবং একটি দুর্ভাগ্যজনক পরিমাণ চতুর CSS সহ একই ভিজ্যুয়াল প্রভাব অর্জন করতে সক্ষম হয়েছি:

@custom-media --motionOK (prefers-reduced-motion: no-preference);

input[type="checkbox"]::before {
  --thumb-scale: .01;                        /* initial scale of highlight */
  --thumb-highlight-size: var(--space-xl);

  content: "";
  inline-size: var(--thumb-highlight-size);
  block-size: var(--thumb-highlight-size);
  clip-path: circle(50%);                     /* circle shape */
  position: absolute;                         /* this is why position relative on parent */
  top: 50%;                                   /* pop and plop technique (https://web.dev/centering-in-css#5-pop-and-plop) */
  left: 50%;
  background: var(--thumb-highlight-color);
  transform-origin: center center;            /* goal is a centered scaling circle */
  transform:                                  /* order here matters!! */
    translateX(-50%)                          /* counter balances left: 50% */
    translateY(-50%)                          /* counter balances top: 50% */
    translateZ(-1px)                          /* PUTS IT BEHIND THE CHECKBOX */
    scale(var(--thumb-scale))                 /* value we toggle for animation */
  ;
  will-change: transform;

  @media (--motionOK) {                       /* transition only if motion is OK */
    & {
      transition: transform .2s ease;
    }
  }
}

/* on hover, set scale custom property to "in" state */
input[type="checkbox"]:hover::before {
  --thumb-scale: 1;
}

একটি বৃত্ত ছদ্ম-উপাদান তৈরি করা সোজা কাজ, তবে এটি যে উপাদানটির সাথে সংযুক্ত ছিল তার পিছনে এটি স্থাপন করা আরও কঠিন ছিল। আমি এটি ঠিক করেছি আগে এবং পরে এখানে:

এটি অবশ্যই একটি মাইক্রো মিথস্ক্রিয়া, কিন্তু ভিজ্যুয়াল সামঞ্জস্য রাখা আমার কাছে গুরুত্বপূর্ণ। অ্যানিমেশন স্কেলিং কৌশলটি একই রকম যা আমরা অন্যান্য জায়গায় ব্যবহার করছি। আমরা একটি কাস্টম প্রপার্টি একটি নতুন মান সেট করি এবং গতি পছন্দের উপর ভিত্তি করে CSS ট্রানজিশন করি। এখানে মূল বৈশিষ্ট্য হল translateZ(-1px) । অভিভাবক একটি 3D স্পেস তৈরি করেছেন এবং এই ছদ্ম-উপাদান শিশুটি z-স্পেসে নিজেকে কিছুটা পিছনে রেখে এতে ট্যাপ করেছে।

অ্যাক্সেসযোগ্যতা

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

এইচটিএমএল উপাদান পছন্দ

<form>
<header>
<fieldset>
<picture>
<label>
<input>

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

এইচটিএমএল বৈশিষ্ট্য

আমরা এমন উপাদানগুলি লুকাতে পারি যা স্ক্রিনরিডারদের প্রয়োজন হয় না, এই ক্ষেত্রে স্লাইডারের পাশের আইকনটি:

<picture aria-hidden="true">

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

ব্রাউজার পরীক্ষা স্ক্রিনরিডার ইন্টারঅ্যাকশন ক্রস নিশ্চিত করুন। আসল ডেমোতে aria-hidden="true" সহ উপাদানগুলির তালিকায় <label> অন্তর্ভুক্ত ছিল, কিন্তু টুইটার কথোপকথন ক্রস ব্রাউজার পার্থক্য প্রকাশ করার পরে এটি সরিয়ে দেওয়া হয়েছে।

SVG হল একগুচ্ছ গণিত, আসুন একটি <title> উপাদান যোগ করি একটি বিনামূল্যের মাউস হোভার শিরোনামের জন্য এবং গণিতটি কী তৈরি করছে সে সম্পর্কে একটি মানব পাঠযোগ্য মন্তব্য:

<svg viewBox="0 0 24 24">
  <title>A note icon</title>
  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>

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

জাভাস্ক্রিপ্ট

জাভাস্ক্রিপ্ট থেকে কিভাবে ট্র্যাক ফিল কালার ম্যানেজ করা হচ্ছে তা আমি ইতিমধ্যেই কভার করেছি , তাই এখন <form> সম্পর্কিত জাভাস্ক্রিপ্ট দেখুন:

const form = document.querySelector('form');

form.addEventListener('input', event => {
  const formData = Object.fromEntries(new FormData(form));
  console.table(formData);
})

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

console.table() ফলাফলের একটি স্ক্রিনশট, যেখানে ফর্ম ডেটা একটি টেবিলে দেখানো হয়েছে৷

উপসংহার

এখন আপনি জানেন যে আমি কীভাবে এটি করেছি, আপনি কীভাবে করবেন?! এটি কিছু মজার উপাদান আর্কিটেকচারের জন্য তৈরি করে! কে তাদের প্রিয় ফ্রেমওয়ার্কে স্লট সহ 1ম সংস্করণ তৈরি করতে যাচ্ছে? 🙂

আসুন আমাদের পদ্ধতির বৈচিত্র্য আনুন এবং ওয়েবে তৈরি করার সমস্ত উপায় শিখি। একটি ডেমো তৈরি করুন, আমাকে লিঙ্কগুলি টুইট করুন এবং আমি এটিকে নীচের কমিউনিটি রিমিক্স বিভাগে যোগ করব!

কমিউনিটি রিমিক্স

@tomayac চেকবক্স লেবেলগুলির জন্য হোভার এলাকা সম্পর্কিত তাদের শৈলী সহ! এই সংস্করণে উপাদানগুলির মধ্যে কোনও হোভার গ্যাপ নেই: ডেমো এবং উত্স ।

Adam Argyle

ডেমো

ওভারভিউ

আমি এই উপাদানটির দিকগুলিকে নিম্নলিখিত বিভাগে বিভক্ত করেছি:

বিন্যাস
রঙ
কাস্টম পরিসীমা ইনপুট
কাস্টম চেকবক্স ইনপুট
অ্যাক্সেসযোগ্যতা বিবেচনা
জাভাস্ক্রিপ্ট

বিন্যাস

শুধু ফাঁকের জন্য

সবচেয়ে সাধারণ লেআউট:

foo {
  display: grid;
  gap: var(--something);
}

পাঁচটি লেআউট এই কৌশলটি ব্যবহার করে, এখানে সেগুলির সবগুলি প্রদর্শিত হয়েছে:

শূন্যস্থান পূরণ

.grid {
  display: grid;
  gap: 1px;
  background: var(--bg-surface-1);

  & > .fieldset-item {
    background: var(--bg-surface-2);
  }
}

সীমান্ত কৌশল

.grid {
  display: grid;

  & > .fieldset-item {
    background: var(--bg-surface-2);

    &:not(:last-child) {
      border-bottom: 1px solid var(--bg-surface-1);
    }
  }
}

প্রাকৃতিক গ্রিড মোড়ানো

কেন্দ্রে মোড়ানো বিষয়বস্তু

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

অটো-ফিট minmax পুনরাবৃত্তি করুন

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

আমাদের লেআউটে 3টি বিশেষ সংযোজন আছে, যদি আপনি এটি উনার সাথে তুলনা করেন:

আমরা একটি অতিরিক্ত min() ফাংশন পাস করি।
আমরা align-items: flex-start ।
একটি max-width: 89vw শৈলী আছে।

ব্যবধান

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

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

  @media (width >= 540px) {
    & {
      padding: var(--space-lg);
    }
  }

  @media (width >= 800px) {
    & {
      padding: var(--space-xl);
    }
  }
}

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

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

রঙ

:root {
  --surface1: lch(10 0 0);
  --surface2: lch(15 0 0);
  --surface3: lch(20 0 0);
  --surface4: lch(25 0 0);

  --text1: lch(95 0 0);
  --text2: lch(75 0 0);
}

আমি তাদের পছন্দের মিডিয়া ক্যোয়ারীতে এভাবে ফ্লিপ করি:

:root {
  ...

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --surface2: lch(100 0 0);
      --surface3: lch(98 0 0);
      --surface4: lch(85 0 0);

      --text1: lch(20 0 0);
      --text2: lch(40 0 0);
    }
  }
}

এলসিএইচ?

রঙের তত্ত্বের গভীরে না গিয়ে, এলসিএইচ একটি মানব ভিত্তিক বাক্য গঠন, যা আমরা কীভাবে রঙ বুঝতে পারি তা পূরণ করে, গণিত দিয়ে আমরা কীভাবে রঙ পরিমাপ করি (যেমন 255)। এটি এটিকে একটি স্বতন্ত্র সুবিধা দেয় কারণ মানুষ এটিকে আরও সহজে লিখতে পারে এবং অন্যান্য মানুষ এই সমন্বয়গুলির সাথে তাল মিলিয়ে থাকবে৷

:root {
  --surface1: lch(10 0 0);
  --text1:    lch(95 0 0);

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --text1:    lch(40 0 0);
    }
  }
}

আপনি যদি আগ্রহী হন তবে রঙের স্থান এবং lch() সম্পর্কে আরও শিখতে হবে । এটা আসছে!

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

রঙ-স্কিম সহ অভিযোজিত ফর্ম নিয়ন্ত্রণ

<meta name="color-scheme" content="dark light">

CSS `accent-color`

input[type="checkbox"] {
  accent-color: var(--brand);
}

গোলাপী চেকবক্সের Linux-এ Chromium থেকে একটি স্ক্রিনশট

নির্দিষ্ট গ্রেডিয়েন্ট এবং ফোকাস-ভিতরে রঙের পপ

প্রসঙ্গ হাইলাইট করা।
মানটি পরিসরে "কত পূর্ণ" এর UI প্রতিক্রিয়া প্রদান করা।
UI প্রতিক্রিয়া প্রদান করা যে একটি ক্ষেত্র ইনপুট গ্রহণ করছে।

.fieldset-item {
  ...

  &:focus-within {
    background: var(--surface2);

    & svg {
      fill: white;
    }

    & picture {
      clip-path: circle(50%);
      background: var(--brand-bg-gradient) fixed;
    }
  }
}

যখন এই উপাদানটির একটি শিশুর মধ্যে ফোকাস থাকে:

.fieldset-item ব্যাকগ্রাউন্ডে একটি উচ্চতর কনট্রাস্ট পৃষ্ঠের রঙ বরাদ্দ করা হয়েছে।
নেস্টেড svg উচ্চতর বৈসাদৃশ্যের জন্য সাদা পূর্ণ হয়।
নেস্টেড <picture> clip-path একটি পূর্ণ বৃত্তে প্রসারিত হয় এবং পটভূমি উজ্জ্বল স্থির গ্রেডিয়েন্টে পূর্ণ হয়।

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

<input type="range">

এই উপাদানটির 3টি অংশ আমাদের কাস্টমাইজ করতে হবে:

পরিসীমা উপাদান / ধারক
ট্র্যাক
থাম্ব

রেঞ্জ উপাদান শৈলী

input[type="range"] {
  /* style setting variables */
  --track-height: .5ex;
  --track-fill: 0%;
  --thumb-size: 3ex;
  --thumb-offset: -1.25ex;
  --thumb-highlight-size: 0px;

  appearance: none;         /* clear styles, make way for mine */
  display: block;
  inline-size: 100%;        /* fill container */
  margin: 1ex 0;            /* ensure thumb isn't colliding with sibling content */
  background: transparent;  /* bg is in the track */
  outline-offset: 5px;      /* focus styles have space */
}

ট্র্যাক শৈলী

input[type="range"]::-webkit-slider-runnable-track {
  appearance: none; /* clear styles, make way for mine */
  block-size: var(--track-height);
  border-radius: 5ex;
  background:
    /* hard stop gradient:
        - half transparent (where colorful fill we be)
        - half dark track fill
        - 1st background image is on top
    */
    linear-gradient(
      to right,
      transparent var(--track-fill),
      var(--surface1) 0%
    ),
    /* colorful fill effect, behind track surface fill */
    var(--brand-bg-gradient) fixed;
}

ট্র্যাক ভরাট শৈলী

/* grab sliders on page */
const sliders = document.querySelectorAll('input[type="range"]')

/* take a slider element, return a percentage string for use in CSS */
const rangeToPercent = slider => {
  const max = slider.getAttribute('max') || 10;
  const percent = slider.value / max * 100;

  return `${parseInt(percent)}%`;
};

/* on page load, set the fill amount */
sliders.forEach(slider => {
  slider.style.setProperty('--track-fill', rangeToPercent(slider));

  /* when a slider changes, update the fill prop */
  slider.addEventListener('input', e => {
    e.target.style.setProperty('--track-fill', rangeToPercent(e.target));
  })
})

থাম্ব শৈলী

input[type="range"]::-webkit-slider-thumb {
  appearance: none; /* clear styles, make way for mine */
  cursor: ew-resize; /* cursor style to support drag direction */
  border: 3px solid var(--surface3);
  block-size: var(--thumb-size);
  inline-size: var(--thumb-size);
  margin-top: var(--thumb-offset);
  border-radius: 50%;
  background: var(--brand-bg-gradient) fixed;
}

@custom-media --motionOK (prefers-reduced-motion: no-preference);

::-webkit-slider-thumb {
  …

  /* shadow spread is initally 0 */
  box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);

  /* if motion is OK, transition the box-shadow change */
  @media (--motionOK) {
    & {
      transition: box-shadow .1s ease;
    }
  }

  /* on hover/active state of parent, increase size prop */
  @nest input[type="range"]:is(:hover,:active) & {
    --thumb-highlight-size: 10px;
  }
}

যদি শুধুমাত্র হাইলাইট প্রভাব চেকবক্সে এত সহজ ছিল...

ক্রস ব্রাউজার নির্বাচক

input[type="range"] {
  &::-webkit-slider-runnable-track {}
  &::-moz-range-track {}
  &::-webkit-slider-thumb {}
  &::-moz-range-thumb {}
}

কাস্টম চেকবক্স

<input type="checkbox">

এই উপাদানটির 3টি অংশ আমাদের কাস্টমাইজ করতে হবে:

চেকবক্স উপাদান
সংশ্লিষ্ট লেবেল
প্রভাব হাইলাইট করুন

চেকবক্স উপাদান

input[type="checkbox"] {
  inline-size: var(--space-sm);   /* increase width */
  block-size: var(--space-sm);    /* increase height */
  outline-offset: 5px;            /* focus style enhancement */
  accent-color: var(--brand);     /* tint the input */
  position: relative;             /* prepare for an absolute pseudo element */
  transform-style: preserve-3d;   /* create a 3d z-space stacking context */
  margin: 0;
  cursor: pointer;
}

চেকবক্স লেবেল

ইনপুট

<input
  type="checkbox"
  id="text-notifications"
  name="text-notifications"
>

লেবেল

<label for="text-notifications">
  <h3>Text Messages</h3>
  <small>Get notified about all text messages sent to your device</small>
</label>

চেকবক্স হাইলাইট

@custom-media --motionOK (prefers-reduced-motion: no-preference);

input[type="checkbox"]::before {
  --thumb-scale: .01;                        /* initial scale of highlight */
  --thumb-highlight-size: var(--space-xl);

  content: "";
  inline-size: var(--thumb-highlight-size);
  block-size: var(--thumb-highlight-size);
  clip-path: circle(50%);                     /* circle shape */
  position: absolute;                         /* this is why position relative on parent */
  top: 50%;                                   /* pop and plop technique (https://web.dev/centering-in-css#5-pop-and-plop) */
  left: 50%;
  background: var(--thumb-highlight-color);
  transform-origin: center center;            /* goal is a centered scaling circle */
  transform:                                  /* order here matters!! */
    translateX(-50%)                          /* counter balances left: 50% */
    translateY(-50%)                          /* counter balances top: 50% */
    translateZ(-1px)                          /* PUTS IT BEHIND THE CHECKBOX */
    scale(var(--thumb-scale))                 /* value we toggle for animation */
  ;
  will-change: transform;

  @media (--motionOK) {                       /* transition only if motion is OK */
    & {
      transition: transform .2s ease;
    }
  }
}

/* on hover, set scale custom property to "in" state */
input[type="checkbox"]:hover::before {
  --thumb-scale: 1;
}

অ্যাক্সেসযোগ্যতা

এইচটিএমএল উপাদান পছন্দ

<form>
<header>
<fieldset>
<picture>
<label>
<input>

এইচটিএমএল বৈশিষ্ট্য

<picture aria-hidden="true">

<svg viewBox="0 0 24 24">
  <title>A note icon</title>
  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>

জাভাস্ক্রিপ্ট

const form = document.querySelector('form');

form.addEventListener('input', event => {
  const formData = Object.fromEntries(new FormData(form));
  console.table(formData);
})

কনসোল.টেবল () ফলাফলের একটি স্ক্রিনশট, যেখানে ফর্ম ডেটা একটি টেবিলে প্রদর্শিত হয়

উপসংহার

এখন আপনি জানেন যে আমি কীভাবে এটি করেছি, আপনি কীভাবে করবেন?! এটি কিছু মজাদার উপাদান আর্কিটেকচার তৈরি করে! কে তাদের প্রিয় কাঠামোর স্লট সহ 1 ম সংস্করণ তৈরি করতে চলেছে? 🙂

আসুন আমাদের পদ্ধতির বৈচিত্র্যময় করুন এবং ওয়েবে তৈরির সমস্ত উপায় শিখি। একটি ডেমো তৈরি করুন, আমার লিঙ্কগুলি টুইট করুন এবং আমি এটি নীচে সম্প্রদায় রিমিক্স বিভাগে যুক্ত করব!

সম্প্রদায় রিমিক্স

চেকবক্স লেবেলের জন্য হোভার অঞ্চল সম্পর্কিত তাদের স্টাইল সহ @টোমায়াক ! এই সংস্করণটির উপাদানগুলির মধ্যে কোনও হোভার ফাঁক নেই: ডেমো এবং উত্স ।

স্লাইডার এবং চেকবক্সগুলির একটি সেটিংস উপাদান কীভাবে তৈরি করবেন তার একটি ভিত্তি ওভারভিউ।

Adam Argyle

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

ডেমো

আপনি যদি ভিডিও পছন্দ করেন, বা আমরা কী তৈরি করছি তার একটি ইউআই/ইউএক্স পূর্বরূপ চান, ইউটিউবে এখানে একটি সংক্ষিপ্ত ওয়াকথ্রু রয়েছে:

ওভারভিউ

আমি নিম্নলিখিত বিভাগগুলিতে এই উপাদানটির দিকগুলি ভেঙে ফেলেছি:

বিন্যাস
রঙ
কাস্টম রেঞ্জ ইনপুট
কাস্টম চেকবক্স ইনপুট
অ্যাক্সেসযোগ্যতা বিবেচনা
জাভাস্ক্রিপ্ট

বিন্যাস

এটি সমস্ত সিএসএস গ্রিড হওয়ার প্রথম জিইউআই চ্যালেঞ্জ ডেমো! গ্রিডের জন্য ক্রোম ডেভটুলগুলির সাথে হাইলাইট করা প্রতিটি গ্রিড এখানে:

রঙিন রূপরেখা এবং ফাঁক স্পেসিং ওভারলে যা সেটিংস লেআউটটি তৈরি করে এমন সমস্ত বাক্স প্রদর্শন করতে সহায়তা করে

দ্রষ্টব্য: আপনার গ্রিড লেআউটগুলি হাইলাইট করতে: 1। cmd+opt+i বা ctrl+alt+i সহ ক্রোম ডিভটুলগুলি খুলুন। 1। স্টাইলস ট্যাবের পাশের লেআউট ট্যাবটি নির্বাচন করুন। 1। গ্রিড লেআউট বিভাগের অধীনে, সমস্ত লেআউটগুলি পরীক্ষা করুন। 1। সমস্ত লেআউটের রঙ পরিবর্তন করুন।

শুধু ফাঁক জন্য

সর্বাধিক সাধারণ বিন্যাস:

foo {
  display: grid;
  gap: var(--something);
}

আমি এই লেআউটটিকে "জাস্ট ফর গ্যাপ" বলি কারণ এটি কেবল ব্লকগুলির মধ্যে ফাঁক যুক্ত করতে গ্রিড ব্যবহার করে।

পাঁচটি লেআউট এই কৌশলটি ব্যবহার করে, এখানে সমস্ত প্রদর্শিত:

উল্লম্ব গ্রিড লেআউটগুলি রূপরেখার সাথে হাইলাইট করা হয়েছে এবং ফাঁকগুলি পূরণ করেছে

fieldset উপাদান, যা প্রতিটি ইনপুট গ্রুপ রয়েছে ( .fieldset-item ), উপাদানগুলির মধ্যে হেয়ারলাইন সীমানা তৈরি করতে gap: 1px ব্যবহার করছে। কোন কৌশলগত সীমান্ত সমাধান!

ভরা ফাঁক

.grid {
  display: grid;
  gap: 1px;
  background: var(--bg-surface-1);

  & > .fieldset-item {
    background: var(--bg-surface-2);
  }
}

সীমান্ত কৌশল

.grid {
  display: grid;

  & > .fieldset-item {
    background: var(--bg-surface-2);

    &:not(:last-child) {
      border-bottom: 1px solid var(--bg-surface-1);
    }
  }
}

প্রাকৃতিক গ্রিড মোড়ানো

সবচেয়ে জটিল লেআউটটি ম্যাক্রো লেআউট হিসাবে শেষ হয়েছিল, <main> এবং <form> এর মধ্যে লজিকাল লেআউট সিস্টেম।

মোড়ক সামগ্রী কেন্দ্রীকরণ

ফ্লেক্সবক্স এবং গ্রিড উভয়ই align-items বা align-content জন্য দক্ষতা সরবরাহ করে এবং মোড়ক উপাদানগুলির সাথে কাজ করার সময়, content বিন্যাসের প্রান্তিককরণগুলি একটি গোষ্ঠী হিসাবে বাচ্চাদের মধ্যে স্থান বিতরণ করবে।

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

প্রধান উপাদানটি place-content: center প্রান্তিককরণ শর্টহ্যান্ড যাতে বাচ্চারা এক এবং দুটি কলাম লেআউট উভয় ক্ষেত্রেই উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্রিক হয়।

উপরের ভিডিওটিতে দেখুন কীভাবে "বিষয়বস্তু" কেন্দ্রিক থাকে, যদিও মোড়ক ঘটেছে।

অটো-ফিট মিনম্যাক্স পুনরাবৃত্তি করুন

<form> প্রতিটি বিভাগের জন্য একটি অভিযোজিত গ্রিড লেআউট ব্যবহার করে। এই লেআউটটি উপলভ্য স্থানের উপর ভিত্তি করে এক থেকে দুটি কলাম স্যুইচ করে।

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

প্রতিক্রিয়াশীল বিন্যাসে সেই কাস্টম স্পর্শ রাখতে column-gap (--স্পেস-এক্সএক্সএল) এর চেয়ে row-gap (--স্পেস-এক্সএল) এর জন্য এই গ্রিডের আলাদা মান রয়েছে। যখন কলামগুলি স্ট্যাক করে, আমরা একটি বড় ফাঁক চাই, তবে এত বড় নয় যেন আমরা প্রশস্ত পর্দায় আছি।

grid-template-columns সম্পত্তি 3 টি সিএসএস ফাংশন ব্যবহার করে: repeat() , minmax() এবং min() । আনা ক্র্যাভেটসের এ সম্পর্কে একটি দুর্দান্ত লেআউট ব্লগ পোস্ট রয়েছে, এটি র‌্যাম বলে।

আমাদের লেআউটে 3 টি বিশেষ সংযোজন রয়েছে, যদি আপনি এটি ইউএনএর সাথে তুলনা করেন:

আমরা একটি অতিরিক্ত min() ফাংশন পাস করি।
আমরা align-items: flex-start ।
একটি max-width: 89vw স্টাইল।

অতিরিক্ত min() ফাংশনটি ইভান মিন্টো তাদের ব্লগে পোস্টে মিনম্যাক্স () এবং মিনিট () এর সাথে অন্তর্নিহিত প্রতিক্রিয়াশীল সিএসএস গ্রিডে ভালভাবে বর্ণনা করেছেন। আমি এটি একটি পড়া দেওয়ার পরামর্শ দিচ্ছি। flex-start প্রান্তিককরণ সংশোধন হ'ল ডিফল্ট প্রসারিত প্রভাবটি সরিয়ে ফেলা, যাতে এই বিন্যাসের বাচ্চাদের সমান উচ্চতা থাকতে না হয়, তাদের প্রাকৃতিক, অভ্যন্তরীণ উচ্চতা থাকতে পারে। ইউটিউব ভিডিওতে এই প্রান্তিককরণ সংযোজনের দ্রুত ভাঙ্গন রয়েছে।

max-width: 89vw এই পোস্টে একটি ছোট ব্রেকডাউন মূল্যবান। আমি আপনাকে স্টাইল প্রয়োগের সাথে এবং ছাড়াই বিন্যাসটি দেখাতে দিন:

কি হচ্ছে? যখন max-width নির্দিষ্ট করা হয়, তখন এটি auto-fit লেআউট অ্যালগরিদমের জন্য প্রসঙ্গ, সুস্পষ্ট আকার বা নির্দিষ্ট আকারের সরবরাহ করে যা এটি স্থানের সাথে কতগুলি পুনরাবৃত্তি ফিট করতে পারে তা জানতে। যদিও এটি স্পষ্ট বলে মনে হয় যে স্থানটি "সম্পূর্ণ প্রস্থ", সিএসএস গ্রিড স্পেক অনুযায়ী, একটি নির্দিষ্ট আকার বা সর্বোচ্চ-আকার অবশ্যই সরবরাহ করতে হবে। আমি একটি সর্বোচ্চ আকার সরবরাহ করেছি।

তো, কেন 89vw ? কারণ আমার বিন্যাসের জন্য "এটি কাজ করেছে"। আমি এবং অন্যান্য কয়েকজন ক্রোম লোকেরা তদন্ত করছে যে কেন 100vw এর মতো আরও যুক্তিসঙ্গত মান যথেষ্ট নয়, এবং যদি এটি আসলে একটি বাগ হয়।

ব্যবধান

এই লেআউটটির সিংহভাগের সিংহভাগই স্পেসিংয়ের সীমিত প্যালেট থেকে, 7 সঠিক হতে।

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

গ্রিড, সিএসএস @নেস্ট এবং @মিডিয়ার স্তর 5 সিনট্যাক্সের সাথে এই প্রবাহের ব্যবহার সত্যিই সুন্দরভাবে। এখানে একটি উদাহরণ, সম্পূর্ণ <main> স্টাইলের লেআউট সেট।

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

  @media (width >= 540px) {
    & {
      padding: var(--space-lg);
    }
  }

  @media (width >= 800px) {
    & {
      padding: var(--space-xl);
    }
  }
}

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

আগের লেআউটটি মনে আছে, "জাস্ট ফর গ্যাপ"? তারা এই উপাদানটিতে কীভাবে দেখায় তার আরও একটি সম্পূর্ণ সংস্করণ এখানে:

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

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

রঙ

রঙের একটি নিয়ন্ত্রিত ব্যবহার এই নকশাটিকে অভিব্যক্তিপূর্ণ তবুও ন্যূনতম হিসাবে দাঁড়াতে সহায়তা করেছে। আমি এটি এই মত করি:

:root {
  --surface1: lch(10 0 0);
  --surface2: lch(15 0 0);
  --surface3: lch(20 0 0);
  --surface4: lch(25 0 0);

  --text1: lch(95 0 0);
  --text2: lch(75 0 0);
}

মূল শব্দ: পোস্টসিএসএস lab() এবং lch() প্লাগইন পোস্টসিএসএস প্রিসেট এনভির অংশ, এবং rgb() রঙগুলি আউটপুট দেবে।

আমি আমার পৃষ্ঠ এবং পাঠ্যের রঙগুলি surface-dark এবং surface-darker মতো নামগুলির বিপরীতে নাম্বারগুলির সাথে নাম রাখি কারণ একটি মিডিয়া ক্যোয়ারিতে আমি সেগুলি উল্টিয়ে দেব, এবং হালকা এবং অন্ধকার অর্থবহ হবে না।

আমি এ জাতীয় পছন্দসই মিডিয়া ক্যোয়ারিতে তাদের ফ্লিপ করি:

:root {
  ...

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --surface2: lch(100 0 0);
      --surface3: lch(98 0 0);
      --surface4: lch(85 0 0);

      --text1: lch(20 0 0);
      --text2: lch(40 0 0);
    }
  }
}

আমরা রঙিন সিনট্যাক্স বিশদগুলিতে ডুব দেওয়ার আগে সামগ্রিক চিত্র এবং কৌশলটিতে দ্রুত ঝলক পাওয়া গুরুত্বপূর্ণ। তবে, যেহেতু আমি নিজের থেকে কিছুটা এগিয়ে এসেছি, আমাকে কিছুটা ব্যাক আপ করতে দিন।

Lch?

রঙিন তত্ত্বের জমিতে খুব গভীর না হয়ে এলসিএইচ হ'ল একটি মানবমুখী সিনট্যাক্স, যা আমরা কীভাবে রঙ উপলব্ধি করি তা সরবরাহ করে, আমরা কীভাবে গণিতের সাথে রঙ পরিমাপ করি তা নয় (255 এর মতো)। এটি এটিকে একটি স্বতন্ত্র সুবিধা দেয় কারণ মানুষ এটি আরও সহজে লিখতে পারে এবং অন্যান্য মানুষ এই সমন্বয়গুলির সাথে তাল মিলবে।

রঙ 2 সহ পড.লিংক/সিএসএসপডকাস্ট ওয়েবপৃষ্ঠার একটি স্ক্রিনশট: উপলব্ধি পর্বটি টানা — সিএসএস পডকাস্টে ধারণাগত রঙ (এবং আরও!) সম্পর্কে জানুন

আজকের জন্য, এই ডেমোতে, আসুন সিনট্যাক্স এবং যে মানগুলি আমি হালকা এবং অন্ধকার করার জন্য উল্টে দিচ্ছি তার দিকে মনোনিবেশ করি। আসুন 1 পৃষ্ঠ এবং 1 টি পাঠ্য রঙ দেখুন:

:root {
  --surface1: lch(10 0 0);
  --text1:    lch(95 0 0);

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --text1:    lch(40 0 0);
    }
  }
}

--surface1: lch(10 0 0) 10% স্বল্পতা, 0 ক্রোমা এবং 0 হিউতে অনুবাদ করে: খুব গা dark ় বর্ণহীন ধূসর। তারপরে, হালকা মোডের জন্য মিডিয়া ক্যোয়ারিতে, --surface1: lch(90 0 0); এর সাথে হালকাতা 90% এ উল্টানো হয়; . এবং এটি কৌশলটির সূত্র। ডিজাইনের জন্য কলগুলি কল করার জন্য বা কী অ্যাক্সেসযোগ্যতা বজায় রাখতে পারে তার বিপরীতে অনুপাতগুলি বজায় রেখে কেবল 2 টি থিমের মধ্যে হালকা পরিবর্তন করে শুরু করুন।

lch() এর সাথে বোনাসটি এখানে হ'ল স্বল্পতা মানবমুখী, এবং আমরা এর মধ্যে % পরিবর্তন সম্পর্কে ভাল বোধ করতে পারি, এটি বোধগম্য এবং ধারাবাহিকভাবে যে % আলাদা হবে। উদাহরণস্বরূপ hsl() নির্ভরযোগ্য নয় ।

আপনি যদি আগ্রহী হন তবে রঙের স্পেস এবং lch() সম্পর্কে আরও অনেক কিছু শিখতে হবে । এটা আসছে!

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

রঙিন-স্কিমের সাথে অভিযোজিত ফর্ম নিয়ন্ত্রণগুলি

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

উপরেরটি ডিভটুলসের স্টাইলস প্যানেল থেকে সম্পত্তির প্রভাব প্রদর্শন করছে। ডেমো এইচটিএমএল ট্যাগ ব্যবহার করে, যা আমার মতে সাধারণত একটি ভাল অবস্থান:

<meta name="color-scheme" content="dark light">

থমাস স্টেইনারের এই color-scheme নিবন্ধে এটি সম্পর্কে সমস্ত কিছু জানুন। গা dark ় চেকবক্স ইনপুটগুলির চেয়ে আরও অনেক কিছু অর্জন করতে পারে!

সিএসএস `accent-color`

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

input[type="checkbox"] {
  accent-color: var(--brand);
}

গোলাপী চেকবক্সের লিনাক্সে ক্রোমিয়াম থেকে একটি স্ক্রিনশট

নির্দিষ্ট গ্রেডিয়েন্ট এবং ফোকাস সহ রঙিন পপস

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

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

হাইলাইটিং প্রসঙ্গ।
"কত পূর্ণ" মানটি পরিসীমাটিতে রয়েছে তার ইউআই প্রতিক্রিয়া সরবরাহ করা।
ইউআই প্রতিক্রিয়া সরবরাহ করে যে কোনও ক্ষেত্র ইনপুট গ্রহণ করছে।

কোনও উপাদানগুলির সাথে ইন্টারঅ্যাক্ট করা হচ্ছে এমন প্রতিক্রিয়া সরবরাহ করার জন্য, সিএসএস বিভিন্ন উপাদানগুলির উপস্থিতি পরিবর্তন করতে :focus-within সিউডো শ্রেণি ব্যবহার করছে, আসুন .fieldset-item ভেঙে ফেলি, এটি অত্যন্ত আকর্ষণীয়:

.fieldset-item {
  ...

  &:focus-within {
    background: var(--surface2);

    & svg {
      fill: white;
    }

    & picture {
      clip-path: circle(50%);
      background: var(--brand-bg-gradient) fixed;
    }
  }
}

যখন এই উপাদানটির কোনও সন্তানের ফোকাস থাকে:

.fieldset-item ব্যাকগ্রাউন্ডকে একটি উচ্চতর বিপরীতে পৃষ্ঠের রঙ বরাদ্দ করা হয়।
নেস্টেড svg উচ্চতর বিপরীতে সাদা ভরাট।
নেস্টেড <picture> clip-path একটি সম্পূর্ণ বৃত্তে প্রসারিত হয় এবং পটভূমি উজ্জ্বল স্থির গ্রেডিয়েন্টে পূর্ণ হয়।

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

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

<input type="range">

এই উপাদানটির 3 টি অংশ রয়েছে যা আমাদের কাস্টমাইজ করতে হবে:

পরিসীমা উপাদান / ধারক
ট্র্যাক
থাম্ব

পরিসীমা উপাদান শৈলী

input[type="range"] {
  /* style setting variables */
  --track-height: .5ex;
  --track-fill: 0%;
  --thumb-size: 3ex;
  --thumb-offset: -1.25ex;
  --thumb-highlight-size: 0px;

  appearance: none;         /* clear styles, make way for mine */
  display: block;
  inline-size: 100%;        /* fill container */
  margin: 1ex 0;            /* ensure thumb isn't colliding with sibling content */
  background: transparent;  /* bg is in the track */
  outline-offset: 5px;      /* focus styles have space */
}

সিএসএসের প্রথম কয়েকটি লাইন হ'ল শৈলীর কাস্টম অংশগুলি এবং আমি আশা করি যে তাদের স্পষ্টভাবে লেবেল করা সহায়তা করে। উপাদানগুলির কৌশলগত অংশগুলি তৈরির জন্য একটি ধারাবাহিক ভিত্তি সরবরাহ করার জন্য বাকী শৈলীগুলি বেশিরভাগই স্টাইলগুলি পুনরায় সেট করা হয়।

ট্র্যাক শৈলী

input[type="range"]::-webkit-slider-runnable-track {
  appearance: none; /* clear styles, make way for mine */
  block-size: var(--track-height);
  border-radius: 5ex;
  background:
    /* hard stop gradient:
        - half transparent (where colorful fill we be)
        - half dark track fill
        - 1st background image is on top
    */
    linear-gradient(
      to right,
      transparent var(--track-fill),
      var(--surface1) 0%
    ),
    /* colorful fill effect, behind track surface fill */
    var(--brand-bg-gradient) fixed;
}

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

ট্র্যাক ফিল স্টাইল

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

/* grab sliders on page */
const sliders = document.querySelectorAll('input[type="range"]')

/* take a slider element, return a percentage string for use in CSS */
const rangeToPercent = slider => {
  const max = slider.getAttribute('max') || 10;
  const percent = slider.value / max * 100;

  return `${parseInt(percent)}%`;
};

/* on page load, set the fill amount */
sliders.forEach(slider => {
  slider.style.setProperty('--track-fill', rangeToPercent(slider));

  /* when a slider changes, update the fill prop */
  slider.addEventListener('input', e => {
    e.target.style.setProperty('--track-fill', rangeToPercent(e.target));
  })
})

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

এখানে আনা টিউডারের সিএসএস-ট্রিক্সের একটি দুর্দান্ত পোস্ট রয়েছে , যা ট্র্যাক ফিলের জন্য কেবল একটি সিএসএস কেবল সমাধান প্রদর্শন করে। আমি এই range উপাদানটি খুব অনুপ্রেরণামূলকও পেয়েছি।

থাম্ব স্টাইল

input[type="range"]::-webkit-slider-thumb {
  appearance: none; /* clear styles, make way for mine */
  cursor: ew-resize; /* cursor style to support drag direction */
  border: 3px solid var(--surface3);
  block-size: var(--thumb-size);
  inline-size: var(--thumb-size);
  margin-top: var(--thumb-offset);
  border-radius: 50%;
  background: var(--brand-bg-gradient) fixed;
}

এই শৈলীর বেশিরভাগই একটি দুর্দান্ত বৃত্ত তৈরি করা হয়। আবার আপনি সেখানে স্থির ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট দেখতে পান যা থাম্বস, ট্র্যাকস এবং সম্পর্কিত এসভিজি উপাদানগুলির গতিশীল রঙগুলিকে একত্রিত করে। হোভার হাইলাইটের জন্য ব্যবহৃত box-shadow কৌশলটি পৃথক করতে সহায়তা করার জন্য আমি মিথস্ক্রিয়াটির জন্য শৈলীগুলি পৃথক করেছি:

@custom-media --motionOK (prefers-reduced-motion: no-preference);

::-webkit-slider-thumb {
  …

  /* shadow spread is initally 0 */
  box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);

  /* if motion is OK, transition the box-shadow change */
  @media (--motionOK) {
    & {
      transition: box-shadow .1s ease;
    }
  }

  /* on hover/active state of parent, increase size prop */
  @nest input[type="range"]:is(:hover,:active) & {
    --thumb-highlight-size: 10px;
  }
}

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

যদি কেবল হাইলাইট প্রভাবটি চেকবক্সগুলিতে এত সহজ ছিল ...

ক্রস ব্রাউজার নির্বাচক

আমি খুঁজে পেয়েছি যে ক্রস ব্রাউজারের ধারাবাহিকতা অর্জনের জন্য আমার এই -webkit- এবং -moz- নির্বাচকদের প্রয়োজন:

input[type="range"] {
  &::-webkit-slider-runnable-track {}
  &::-moz-range-track {}
  &::-webkit-slider-thumb {}
  &::-moz-range-thumb {}
}

কাস্টম চেকবক্স

<input type="checkbox">

এই উপাদানটির 3 টি অংশ রয়েছে যা আমাদের কাস্টমাইজ করতে হবে:

চেকবক্স উপাদান
সংশ্লিষ্ট লেবেল
হাইলাইট এফেক্ট

চেকবক্স উপাদান

input[type="checkbox"] {
  inline-size: var(--space-sm);   /* increase width */
  block-size: var(--space-sm);    /* increase height */
  outline-offset: 5px;            /* focus style enhancement */
  accent-color: var(--brand);     /* tint the input */
  position: relative;             /* prepare for an absolute pseudo element */
  transform-style: preserve-3d;   /* create a 3d z-space stacking context */
  margin: 0;
  cursor: pointer;
}

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

চেকবক্স লেবেল

2 কারণে চেকবক্সগুলির জন্য লেবেল সরবরাহ করা গুরুত্বপূর্ণ। প্রথমটি হ'ল চেকবক্সের মানটি কী জন্য ব্যবহৃত হয় তা উপস্থাপন করা, "কী জন্য চালু বা বন্ধ?" দ্বিতীয়টি ইউএক্সের জন্য, ওয়েব ব্যবহারকারীরা তাদের সম্পর্কিত লেবেলগুলির মাধ্যমে চেকবক্সগুলির সাথে আলাপচারিত করতে অভ্যস্ত হয়ে উঠেছে।

ইনপুট

<input
  type="checkbox"
  id="text-notifications"
  name="text-notifications"
>

লেবেল

<label for="text-notifications">
  <h3>Text Messages</h3>
  <small>Get notified about all text messages sent to your device</small>
</label>

আপনার লেবেলে, এমন একটি বৈশিষ্ট্যের for রাখুন যা আইডি দ্বারা একটি চেকবক্সকে নির্দেশ করে: <label for="text-notifications"> । আপনার চেকবক্সে, মাউস বা স্ক্রিন রিডারের মতো বিভিন্ন সরঞ্জাম এবং প্রযুক্তির সাথে এটি পাওয়া গেছে তা নিশ্চিত করার জন্য নাম এবং আইডি উভয়ই দ্বিগুণ করুন: <input type="checkbox" id="text-notifications" name="text-notifications"> । :hover ,: :active এবং আরও সংযোগের সাথে নিখরচায় আসে, আপনার ফর্মের সাথে ইন্টারঅ্যাক্ট করার উপায়গুলি বাড়িয়ে তোলে।

চেকবক্স হাইলাইট

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

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

@custom-media --motionOK (prefers-reduced-motion: no-preference);

input[type="checkbox"]::before {
  --thumb-scale: .01;                        /* initial scale of highlight */
  --thumb-highlight-size: var(--space-xl);

  content: "";
  inline-size: var(--thumb-highlight-size);
  block-size: var(--thumb-highlight-size);
  clip-path: circle(50%);                     /* circle shape */
  position: absolute;                         /* this is why position relative on parent */
  top: 50%;                                   /* pop and plop technique (https://web.dev/centering-in-css#5-pop-and-plop) */
  left: 50%;
  background: var(--thumb-highlight-color);
  transform-origin: center center;            /* goal is a centered scaling circle */
  transform:                                  /* order here matters!! */
    translateX(-50%)                          /* counter balances left: 50% */
    translateY(-50%)                          /* counter balances top: 50% */
    translateZ(-1px)                          /* PUTS IT BEHIND THE CHECKBOX */
    scale(var(--thumb-scale))                 /* value we toggle for animation */
  ;
  will-change: transform;

  @media (--motionOK) {                       /* transition only if motion is OK */
    & {
      transition: transform .2s ease;
    }
  }
}

/* on hover, set scale custom property to "in" state */
input[type="checkbox"]:hover::before {
  --thumb-scale: 1;
}

একটি বৃত্ত সিউডো-উপাদান তৈরি করা সোজা কাজ, তবে এটিকে সংযুক্ত উপাদানটির পিছনে রেখে আরও শক্ত ছিল। আমি এটি ঠিক করার আগে এবং পরে এখানে:

এটি অবশ্যই একটি মাইক্রো ইন্টারঅ্যাকশন, তবে ভিজ্যুয়াল ধারাবাহিকতা বজায় রাখতে আমার কাছে গুরুত্বপূর্ণ। অ্যানিমেশন স্কেলিং কৌশলটি আমরা অন্যান্য জায়গায় যেমন ব্যবহার করছি তেমনই। আমরা একটি নতুন মানতে একটি কাস্টম সম্পত্তি সেট করেছি এবং সিএসএসকে গতি পছন্দগুলির উপর ভিত্তি করে এটি রূপান্তর করতে দিন। এখানে মূল বৈশিষ্ট্যটি হ'ল translateZ(-1px) । পিতামাতারা একটি 3 ডি স্পেস তৈরি করেছেন এবং এই সিউডো-এলিমেন্ট শিশুটি জেড-স্পেসে কিছুটা পিছনে রেখে নিজেকে ট্যাপ করে।

অ্যাক্সেসযোগ্যতা

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

এইচটিএমএল উপাদান পছন্দ

<form>
<header>
<fieldset>
<picture>
<label>
<input>

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

এইচটিএমএল বৈশিষ্ট্য

আমরা স্ক্রিন রিডারদের দ্বারা প্রয়োজন এমন উপাদানগুলিকে আড়াল করতে পারি, এক্ষেত্রে স্লাইডারের পাশের আইকন:

<picture aria-hidden="true">

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

ব্রাউজার টেস্ট স্ক্রিন রিডার ইন্টারঅ্যাকশনগুলি অতিক্রম করার বিষয়টি নিশ্চিত করুন। মূল ডেমোতে aria-hidden="true" সহ উপাদানগুলির তালিকায় <label> অন্তর্ভুক্ত ছিল, তবে টুইটার কথোপকথনের পরে ক্রস ব্রাউজারের পার্থক্য প্রকাশের পরে এটি সরানো হয়েছে।

এসভিজি হ'ল গণিতের একগুচ্ছ, আসুন একটি ফ্রি মাউস হোভার শিরোনামের জন্য একটি <title> উপাদান যুক্ত করুন এবং গণিত কী তৈরি করছে সে সম্পর্কে একটি মানবিক পঠনযোগ্য মন্তব্য:

<svg viewBox="0 0 24 24">
  <title>A note icon</title>
  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>

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

জাভাস্ক্রিপ্ট

আমি ইতিমধ্যে জাভাস্ক্রিপ্ট থেকে ট্র্যাক পূরণের রঙটি কীভাবে পরিচালনা করা হচ্ছে তা ইতিমধ্যে কভার করেছি , সুতরাং আসুন এখন <form> সম্পর্কিত জাভাস্ক্রিপ্টটি দেখুন:

const form = document.querySelector('form');

form.addEventListener('input', event => {
  const formData = Object.fromEntries(new FormData(form));
  console.table(formData);
})

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

উপসংহার

সম্প্রদায় রিমিক্স

চেকবক্স লেবেলের জন্য হোভার অঞ্চল সম্পর্কিত তাদের স্টাইল সহ @টোমায়াক ! এই সংস্করণটির উপাদানগুলির মধ্যে কোনও হোভার ফাঁক নেই: ডেমো এবং উত্স ।

Adam Argyle

ডেমো

ওভারভিউ

আমি নিম্নলিখিত বিভাগগুলিতে এই উপাদানটির দিকগুলি ভেঙে ফেলেছি:

বিন্যাস
রঙ
কাস্টম রেঞ্জ ইনপুট
কাস্টম চেকবক্স ইনপুট
অ্যাক্সেসযোগ্যতা বিবেচনা
জাভাস্ক্রিপ্ট

বিন্যাস

শুধু ফাঁক জন্য

সর্বাধিক সাধারণ বিন্যাস:

foo {
  display: grid;
  gap: var(--something);
}

পাঁচটি লেআউট এই কৌশলটি ব্যবহার করে, এখানে সমস্ত প্রদর্শিত:

ভরা ফাঁক

.grid {
  display: grid;
  gap: 1px;
  background: var(--bg-surface-1);

  & > .fieldset-item {
    background: var(--bg-surface-2);
  }
}

সীমান্ত কৌশল

.grid {
  display: grid;

  & > .fieldset-item {
    background: var(--bg-surface-2);

    &:not(:last-child) {
      border-bottom: 1px solid var(--bg-surface-1);
    }
  }
}

প্রাকৃতিক গ্রিড মোড়ানো

মোড়ক সামগ্রী কেন্দ্রীকরণ

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

উপরের ভিডিওটিতে দেখুন কীভাবে "বিষয়বস্তু" কেন্দ্রিক থাকে, যদিও মোড়ক ঘটেছে।

অটো-ফিট মিনম্যাক্স পুনরাবৃত্তি করুন

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

আমাদের লেআউটে 3 টি বিশেষ সংযোজন রয়েছে, যদি আপনি এটি ইউএনএর সাথে তুলনা করেন:

আমরা একটি অতিরিক্ত min() ফাংশন পাস করি।
আমরা align-items: flex-start ।
একটি max-width: 89vw স্টাইল।

ব্যবধান

এই লেআউটটির সিংহভাগের সিংহভাগই স্পেসিংয়ের সীমিত প্যালেট থেকে, 7 সঠিক হতে।

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

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

  @media (width >= 540px) {
    & {
      padding: var(--space-lg);
    }
  }

  @media (width >= 800px) {
    & {
      padding: var(--space-xl);
    }
  }
}

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

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

রঙ

:root {
  --surface1: lch(10 0 0);
  --surface2: lch(15 0 0);
  --surface3: lch(20 0 0);
  --surface4: lch(25 0 0);

  --text1: lch(95 0 0);
  --text2: lch(75 0 0);
}

আমি এ জাতীয় পছন্দসই মিডিয়া ক্যোয়ারিতে তাদের ফ্লিপ করি:

:root {
  ...

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --surface2: lch(100 0 0);
      --surface3: lch(98 0 0);
      --surface4: lch(85 0 0);

      --text1: lch(20 0 0);
      --text2: lch(40 0 0);
    }
  }
}

Lch?

:root {
  --surface1: lch(10 0 0);
  --text1:    lch(95 0 0);

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --text1:    lch(40 0 0);
    }
  }
}

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

রঙিন-স্কিমের সাথে অভিযোজিত ফর্ম নিয়ন্ত্রণগুলি

<meta name="color-scheme" content="dark light">

সিএসএস `accent-color`

input[type="checkbox"] {
  accent-color: var(--brand);
}

গোলাপী চেকবক্সের লিনাক্সে ক্রোমিয়াম থেকে একটি স্ক্রিনশট

নির্দিষ্ট গ্রেডিয়েন্ট এবং ফোকাস সহ রঙিন পপস

হাইলাইটিং প্রসঙ্গ।
"কত পূর্ণ" মানটি পরিসীমাটিতে রয়েছে তার ইউআই প্রতিক্রিয়া সরবরাহ করা।
ইউআই প্রতিক্রিয়া সরবরাহ করে যে কোনও ক্ষেত্র ইনপুট গ্রহণ করছে।

.fieldset-item {
  ...

  &:focus-within {
    background: var(--surface2);

    & svg {
      fill: white;
    }

    & picture {
      clip-path: circle(50%);
      background: var(--brand-bg-gradient) fixed;
    }
  }
}

যখন এই উপাদানটির কোনও সন্তানের ফোকাস থাকে:

.fieldset-item ব্যাকগ্রাউন্ডকে একটি উচ্চতর বিপরীতে পৃষ্ঠের রঙ বরাদ্দ করা হয়।
নেস্টেড svg উচ্চতর বিপরীতে সাদা ভরাট।
নেস্টেড <picture> clip-path একটি সম্পূর্ণ বৃত্তে প্রসারিত হয় এবং পটভূমি উজ্জ্বল স্থির গ্রেডিয়েন্টে পূর্ণ হয়।

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

<input type="range">

এই উপাদানটির 3 টি অংশ রয়েছে যা আমাদের কাস্টমাইজ করতে হবে:

পরিসীমা উপাদান / ধারক
ট্র্যাক
থাম্ব

পরিসীমা উপাদান শৈলী

input[type="range"] {
  /* style setting variables */
  --track-height: .5ex;
  --track-fill: 0%;
  --thumb-size: 3ex;
  --thumb-offset: -1.25ex;
  --thumb-highlight-size: 0px;

  appearance: none;         /* clear styles, make way for mine */
  display: block;
  inline-size: 100%;        /* fill container */
  margin: 1ex 0;            /* ensure thumb isn't colliding with sibling content */
  background: transparent;  /* bg is in the track */
  outline-offset: 5px;      /* focus styles have space */
}

ট্র্যাক শৈলী

input[type="range"]::-webkit-slider-runnable-track {
  appearance: none; /* clear styles, make way for mine */
  block-size: var(--track-height);
  border-radius: 5ex;
  background:
    /* hard stop gradient:
        - half transparent (where colorful fill we be)
        - half dark track fill
        - 1st background image is on top
    */
    linear-gradient(
      to right,
      transparent var(--track-fill),
      var(--surface1) 0%
    ),
    /* colorful fill effect, behind track surface fill */
    var(--brand-bg-gradient) fixed;
}

ট্র্যাক ফিল স্টাইল

/* grab sliders on page */
const sliders = document.querySelectorAll('input[type="range"]')

/* take a slider element, return a percentage string for use in CSS */
const rangeToPercent = slider => {
  const max = slider.getAttribute('max') || 10;
  const percent = slider.value / max * 100;

  return `${parseInt(percent)}%`;
};

/* on page load, set the fill amount */
sliders.forEach(slider => {
  slider.style.setProperty('--track-fill', rangeToPercent(slider));

  /* when a slider changes, update the fill prop */
  slider.addEventListener('input', e => {
    e.target.style.setProperty('--track-fill', rangeToPercent(e.target));
  })
})

থাম্ব স্টাইল

input[type="range"]::-webkit-slider-thumb {
  appearance: none; /* clear styles, make way for mine */
  cursor: ew-resize; /* cursor style to support drag direction */
  border: 3px solid var(--surface3);
  block-size: var(--thumb-size);
  inline-size: var(--thumb-size);
  margin-top: var(--thumb-offset);
  border-radius: 50%;
  background: var(--brand-bg-gradient) fixed;
}

@custom-media --motionOK (prefers-reduced-motion: no-preference);

::-webkit-slider-thumb {
  …

  /* shadow spread is initally 0 */
  box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);

  /* if motion is OK, transition the box-shadow change */
  @media (--motionOK) {
    & {
      transition: box-shadow .1s ease;
    }
  }

  /* on hover/active state of parent, increase size prop */
  @nest input[type="range"]:is(:hover,:active) & {
    --thumb-highlight-size: 10px;
  }
}

যদি কেবল হাইলাইট প্রভাবটি চেকবক্সগুলিতে এত সহজ ছিল ...

ক্রস ব্রাউজার নির্বাচক

input[type="range"] {
  &::-webkit-slider-runnable-track {}
  &::-moz-range-track {}
  &::-webkit-slider-thumb {}
  &::-moz-range-thumb {}
}

কাস্টম চেকবক্স

<input type="checkbox">

এই উপাদানটির 3 টি অংশ রয়েছে যা আমাদের কাস্টমাইজ করতে হবে:

চেকবক্স উপাদান
সংশ্লিষ্ট লেবেল
হাইলাইট এফেক্ট

চেকবক্স উপাদান

input[type="checkbox"] {
  inline-size: var(--space-sm);   /* increase width */
  block-size: var(--space-sm);    /* increase height */
  outline-offset: 5px;            /* focus style enhancement */
  accent-color: var(--brand);     /* tint the input */
  position: relative;             /* prepare for an absolute pseudo element */
  transform-style: preserve-3d;   /* create a 3d z-space stacking context */
  margin: 0;
  cursor: pointer;
}

চেকবক্স লেবেল

ইনপুট

<input
  type="checkbox"
  id="text-notifications"
  name="text-notifications"
>

লেবেল

<label for="text-notifications">
  <h3>Text Messages</h3>
  <small>Get notified about all text messages sent to your device</small>
</label>

চেকবক্স হাইলাইট

@custom-media --motionOK (prefers-reduced-motion: no-preference);

input[type="checkbox"]::before {
  --thumb-scale: .01;                        /* initial scale of highlight */
  --thumb-highlight-size: var(--space-xl);

  content: "";
  inline-size: var(--thumb-highlight-size);
  block-size: var(--thumb-highlight-size);
  clip-path: circle(50%);                     /* circle shape */
  position: absolute;                         /* this is why position relative on parent */
  top: 50%;                                   /* pop and plop technique (https://web.dev/centering-in-css#5-pop-and-plop) */
  left: 50%;
  background: var(--thumb-highlight-color);
  transform-origin: center center;            /* goal is a centered scaling circle */
  transform:                                  /* order here matters!! */
    translateX(-50%)                          /* counter balances left: 50% */
    translateY(-50%)                          /* counter balances top: 50% */
    translateZ(-1px)                          /* PUTS IT BEHIND THE CHECKBOX */
    scale(var(--thumb-scale))                 /* value we toggle for animation */
  ;
  will-change: transform;

  @media (--motionOK) {                       /* transition only if motion is OK */
    & {
      transition: transform .2s ease;
    }
  }
}

/* on hover, set scale custom property to "in" state */
input[type="checkbox"]:hover::before {
  --thumb-scale: 1;
}

অ্যাক্সেসযোগ্যতা

এইচটিএমএল উপাদান পছন্দ

<form>
<header>
<fieldset>
<picture>
<label>
<input>

এইচটিএমএল বৈশিষ্ট্য

<picture aria-hidden="true">

The SVG is a bunch of math, let's add a <title> element for a free mouse hover title and a human readable comment about what the math is creating:

<svg viewBox="0 0 24 24">
  <title>A note icon</title>
  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>

Other than that, we've used enough clearly marked HTML, that the form tests really well across mouse, keyboard, video game controllers and screenreaders.

জাভাস্ক্রিপ্ট

I've already covered how the track fill color was being managed from JavaScript, so let's look at the <form> related JavaScript now:

const form = document.querySelector('form');

form.addEventListener('input', event => {
  const formData = Object.fromEntries(new FormData(form));
  console.table(formData);
})

Everytime the form is interacted with and changed, the console logs the form as an object into a table for easy review before submitting to a server.

A screenshot of the console.table() results, where the form data is shown in a table

উপসংহার

Now that you know how I did it, how would you?! This makes for some fun component architecture! Who's going to make the 1st version with slots in their favorite framework? 🙂

Let's diversify our approaches and learn all the ways to build on the web. Create a demo, tweet me links, and I'll add it to the Community remixes section below!

Community remixes

@tomayac with their style regarding the hover area for the checkbox labels! This version has no hover gap between elements: demo and source .

ওভারভিউ

বিন্যাস

শুধু ফাঁকের জন্য

প্রাকৃতিক গ্রিড মোড়ানো

কেন্দ্রে মোড়ানো বিষয়বস্তু

অটো-ফিট minmax পুনরাবৃত্তি করুন

ব্যবধান

রঙ

এলসিএইচ?

রঙ-স্কিম সহ অভিযোজিত ফর্ম নিয়ন্ত্রণ

CSS accent-color

নির্দিষ্ট গ্রেডিয়েন্ট এবং ফোকাস-ভিতরে রঙের পপ

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

রেঞ্জ উপাদান শৈলী

ট্র্যাক শৈলী

ট্র্যাক ভরাট শৈলী

থাম্ব শৈলী

ক্রস ব্রাউজার নির্বাচক

কাস্টম চেকবক্স

চেকবক্স উপাদান

চেকবক্স লেবেল

চেকবক্স হাইলাইট

অ্যাক্সেসযোগ্যতা

এইচটিএমএল উপাদান পছন্দ

এইচটিএমএল বৈশিষ্ট্য

জাভাস্ক্রিপ্ট

উপসংহার

কমিউনিটি রিমিক্স

ওভারভিউ

বিন্যাস

শুধু ফাঁকের জন্য

প্রাকৃতিক গ্রিড মোড়ানো

কেন্দ্রে মোড়ানো বিষয়বস্তু

অটো-ফিট minmax পুনরাবৃত্তি করুন

ব্যবধান

রঙ

এলসিএইচ?

রঙ-স্কিম সহ অভিযোজিত ফর্ম নিয়ন্ত্রণ

CSS accent-color

নির্দিষ্ট গ্রেডিয়েন্ট এবং ফোকাস-ভিতরে রঙের পপ

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

রেঞ্জ উপাদান শৈলী

ট্র্যাক শৈলী

ট্র্যাক ভরাট শৈলী

থাম্ব শৈলী

ক্রস ব্রাউজার নির্বাচক

কাস্টম চেকবক্স

চেকবক্স উপাদান

চেকবক্স লেবেল

চেকবক্স হাইলাইট

অ্যাক্সেসযোগ্যতা

এইচটিএমএল উপাদান পছন্দ

এইচটিএমএল বৈশিষ্ট্য

জাভাস্ক্রিপ্ট

উপসংহার

সম্প্রদায় রিমিক্স

ওভারভিউ

বিন্যাস

শুধু ফাঁক জন্য

প্রাকৃতিক গ্রিড মোড়ানো

মোড়ক সামগ্রী কেন্দ্রীকরণ

অটো-ফিট মিনম্যাক্স পুনরাবৃত্তি করুন

ব্যবধান

রঙ

Lch?

রঙিন-স্কিমের সাথে অভিযোজিত ফর্ম নিয়ন্ত্রণগুলি

সিএসএস accent-color

নির্দিষ্ট গ্রেডিয়েন্ট এবং ফোকাস সহ রঙিন পপস

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

পরিসীমা উপাদান শৈলী

ট্র্যাক শৈলী

ট্র্যাক ফিল স্টাইল

থাম্ব স্টাইল

ক্রস ব্রাউজার নির্বাচক

কাস্টম চেকবক্স

চেকবক্স উপাদান

চেকবক্স লেবেল

চেকবক্স হাইলাইট

অ্যাক্সেসযোগ্যতা

এইচটিএমএল উপাদান পছন্দ

CSS `accent-color`

CSS `accent-color`

সিএসএস `accent-color`

সিএসএস `accent-color`