ভিজ্যুয়াল এফেক্ট

গভীরতা ও টেক্সচার

• বাস্তবসম্মত সফ্ট ডেপথ এফেক্টের জন্য একাধিক শ্যাডো লেয়ার করুন।
• আয়তাকার নয় এমন আকৃতি বা স্বচ্ছ PNG-এর জন্য box-shadow-এর পরিবর্তে filter: drop-shadow() ব্যবহার করুন।
• লাইটিং ওভারলের জন্য mix-blend-mode এবং background-blend-mode ব্যবহার করুন (isolation: isolate-এর মাধ্যমে স্কোপ সীমিত করুন)

.hero {
  background-image: url('texture.png'), linear-gradient(to bottom, #fff, #eee);
  background-blend-mode: soft-light;
}

গ্রেডিয়েন্ট ও color-mix()

গ্রেডিয়েন্ট বা color-mix()-এর জন্য ইন্টারপোলেশন কালার স্পেস স্পষ্টভাবে উল্লেখ করতে in oklch বা in oklab ব্যবহার করুন।

• in oklch ক্রোমা আরও ভালোভাবে সংরক্ষণ করে, তবে ডিভাইসের গ্যামাট থেকে আরও সহজে বেরিয়ে যেতে পারে, বিশেষ করে রঙের মধ্যে বড় পার্থক্যের ক্ষেত্রে
• in oklab আরও সহজে গ্যামাটে থাকে (ইন-গ্যামাট এন্ডপয়েন্ট ধরে নিয়ে) তবে মাঝখানে ওয়াশ আউট হয়ে যাওয়া ডিস্যাচুরেটেড রঙ তৈরি করতে পারে, বিশেষ করে বিপরীত রঙের মধ্যে ইন্টারপোলেট করার সময়।
• DON'T use in srgb unless you have a specific reason to do so (e.g. you are building a color picker that needs to interpolate in srgb).

ফলব্যাক

২০২৪ সালের আগের কিছু ব্রাউজারে গ্রেডিয়েন্ট কালার ইন্টারপোলেশন স্পেস কাজ করে না। এইসব ব্রাউজারকে সাপোর্ট করতে, ভেরিয়েবল নির্ধারণ করে টোকেন ব্যবহার করা নিরাপদ হলে তবেই সেটি ব্যবহার করুন:

:root {
  --in-oklab: ;
  --in-oklch: ;
}

@supports (linear-gradient(in oklab, white, black)) {
  :root {
    --in-oklab: in oklab;
    --in-oklch: in oklch;
  }
}

তারপর এইভাবে ব্যবহার করুন:

.card {
  background: linear-gradient(to bottom var(--in-oklab), var(--accent-color), var(--darker));
}

• গুরুত্বপূর্ণ: আপনি এই টেকনিক ব্যবহার করলে, এটি ছাড়া সবসময় একটি নন-এম্পটি গ্রেডিয়েন্ট প্রারম্ভিক নির্দেশাবলী আছে কিনা তা নিশ্চিত করুন, অন্যথায় পুরনো ব্রাউজারে সিনট্যাক্স সংক্রান্ত সমস্যা হবে।
• color-mix()-এর জন্য আপনার এটি প্রয়োজন নেই। কোনও ব্রাউজার color-mix()-এ কাজ করলে, এটি in <color-space> আর্গুমেন্টেও কাজ করে।

প্যাটার্ন

CSS গ্রেডিয়েন্ট + হার্ড স্টপের মাধ্যমে অনেক প্যাটার্ন তৈরি করা যেতে পারে এবং এগুলি SVG বা এক্সটার্নাল ছবির চেয়ে আরও বেশি ফ্লেক্সিবল ও পারফর্ম্যান্ট হতে পারে, কারণ এগুলি আশেপাশের প্রসঙ্গ থেকে CSS ভেরিয়েবল ও দৈর্ঘ্যে অ্যাক্সেস পেতে পারে। আপনাকে দুবার পজিশন রিপিট করতে হবে না — শুধু 0 বা 0% ব্যবহার করুন এবং গ্রেডিয়েন্ট ফিক্সআপ এটি অটোমেটিক অ্যাডজাস্ট করে নেবে।

নিচে উদাহরণ দেওয়া হল।

প্রতিটি 1em প্রস্থের উল্লম্ব স্ট্রাইপ:

background: linear-gradient(to right, var(--color-1) 50%, var(--color-2) 0) 0 / 2em;

প্রতিটি 1em প্রস্থের ডায়াগনাল স্ট্রাইপ:

background: repeating-linear-gradient(-45deg, var(--color-1) 0 1em, var(--color-2) 0 2em);

1emটি বর্গক্ষেত্র সহ চেকারবোর্ড প্যাটার্ন:

background: repeating-conic-gradient(var(--color-1) 0 25%, var(--color-2) 0 50%) 0 / 2em 2em;

.5em ব্যাসার্ধের ডট সহ পোলকা ডট 2em দূরত্বে (অনুভূমিকভাবে/উল্লম্বভাবে — তির্যক দূরত্বের জন্য sqrt(2) দ্বারা গুণ করুন):

--distance: 2em;
--radius: .5em;
--polka: radial-gradient(circle, var(--color-1) var(--radius), transparent calc(var(--radius) + 1px));
background: var(--polka) 0 0, var(--polka) var(--distance) var(--distance) var(--color-2);
background-size: calc(var(--distance) * 2) calc(var(--distance) * 2);

সাধারণ পাই চার্ট:

.pie {
  --p: 80%;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--color-1) var(--p), transparent 0%) var(--color-2);
}

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