CSS পছন্দ-হ্রাস-স্বচ্ছতা

যারা একটি অস্বচ্ছ UI পছন্দ করেন তাদের জন্য অপ্টিমাইজ এবং সামঞ্জস্য করুন।

Adam Argyle

ক্রোম 118 থেকে CSS মিডিয়া ক্যোয়ারী 5 থেকে নতুন মিডিয়া ক্যোয়ারী বৈশিষ্ট্য prefers-reduced-transparency উপলব্ধ। অ-অস্বচ্ছ ইন্টারফেস মাথাব্যথার কারণ হতে পারে বা বিভিন্ন ধরণের দৃষ্টি ঘাটতির জন্য একটি চাক্ষুষ সংগ্রাম হতে পারে। এই কারণেই Windows, macOS এবং iOS-এর সিস্টেম পছন্দ রয়েছে যা UI থেকে স্বচ্ছতা কমাতে বা অপসারণ করতে পারে।

ব্রাউজারে এই নতুন মিডিয়া ক্যোয়ারী দিয়ে, CSS কম স্বচ্ছতার আকাঙ্ক্ষা নির্দিষ্ট করে ব্যবহারকারীদের জন্য ইন্টারফেসকে মানিয়ে নিতে পারে:

.example {
  --opacity: .5;

  background: hsl(200 100% 50% / var(--opacity));

  @media (prefers-reduced-transparency: reduce) {
    --opacity: .95;
  }
}

পূর্ববর্তী কোডের উদাহরণে, একটি CSS ভেরিয়েবলের একটি অপাসিটি মান 50% ধারণ করে যা একটি আধা-স্বচ্ছ নীল পটভূমি তৈরি করতে HSL এর সাথে ব্যবহার করা হয়। নেস্টেড মিডিয়া ক্যোয়ারী কম স্বচ্ছতার জন্য ব্যবহারকারীর পছন্দের জন্য পরীক্ষা করে এবং সত্য হলে, অস্বচ্ছতা ভেরিয়েবলকে 95% এ সামঞ্জস্য করে, একটি প্রায় অস্বচ্ছতার মান।

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

স্বচ্ছতা কমানোর জন্য কেস ব্যবহার করুন

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

ছবিগুলিতে আধা-স্বচ্ছ ক্যাপশন

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

স্বচ্ছ মডেল, বিজ্ঞপ্তি এবং popovers

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

.card {
  background: hsl(none none 100% / 20%);

  @media (prefers-reduced-transparency: reduce) {
    background: hsl(none none 0% / 80%);
  }
}

অভিযোজিত ফ্রস্টেড গ্লাস

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

.adaptive-glass {
  --glass-lightness: 100%;
  --glass-alpha: 50%;

  background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
  backdrop-filter: blur(40px);

  @media (prefers-color-scheme: dark) {
    --glass-lightness: 0%;
  }

  @media (prefers-reduced-transparency: reduce) {
    --glass-alpha: 85%;
  }
}

হিরো হেডার

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

এটি দুটি CSS মিডিয়া প্রশ্নের সাথে ঠিক করা যেতে পারে: prefers-reduced-motion এবং prefers-reduced-transparency। হ্রাস-মোশন মিডিয়া ক্যোয়ারীতে আপনি অসীম অ্যানিমেশন প্রয়োগ করতে পারেন শুধুমাত্র যদি ব্যবহারকারীর কম গতির জন্য "নো-অনুগ্রহ" থাকে, কোডে সংকেত দেয় যে এই ব্যবহারকারীর গতি থাকা ঠিক আছে৷

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

এটি সব একসাথে রাখুন এবং লক্ষ্য শ্রোতারা এটি পড়তে এবং বার্তা পেতে পারে তা নিশ্চিত করার সাথে সাথে আপনি একটি সৃজনশীল UI চেহারা স্থাপন করতে পারেন।

.Hero img {
  @media (prefers-reduced-motion: no-preference) {
    animation: zoom 30s ease infinite;
  }
}

.Hero .overlay {
  background: hsl(none none 0% / 95%);

  @media (prefers-reduced-transparency: no-preference) {
    background: linear-gradient(
      to top right in oklab,
      oklch(40% 0.3 340 / 70%),
      oklch(40% 0.4 200 / 70%)
    );
  }
}

ব্যবহারকারীর পছন্দের উপর সংযোজন বনাম বিয়োগমূলক দৃষ্টিভঙ্গি

পূর্ববর্তী উদাহরণটি তাদের হ্রাসকৃত পছন্দের জন্য এই ব্যবহারকারীর পছন্দগুলি পরীক্ষা করেনি, পরিবর্তে এটি কোনও পছন্দের জন্য পরীক্ষা করে না।

@media (prefers-reduced-transparency: no-preference) {
  …
}

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

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

Devtools

Chrome DevTools রেন্ডারিং ট্যাবে স্বচ্ছতা হ্রাস (এবং আরও) জন্য এই পছন্দটি অনুকরণ করতে পারে৷ ফ্রস্টেড গ্লাস কার্ডের আলো, অন্ধকার, স্বচ্ছ এবং হ্রাসকৃত স্বচ্ছতার রূপগুলি প্রদর্শন করতে পছন্দ-রঙ-স্কিম এবং পছন্দ-হ্রাস-স্বচ্ছতা মিডিয়া প্রশ্নগুলিকে কীভাবে টগল করতে হয় তা নিম্নলিখিত ভিডিওতে দেখুন৷