ভিজ্যুয়াল ইফেক্ট — filter, blend mode, clip-path আর mask

১ · আঁকা শেষ, তারপর সম্পাদনা — ভিজ্যুয়াল ইফেক্টের চার পরিবার

মোবাইলে ছবি তুলে আপনি হয়তো একটু উজ্জ্বল করেন, সাদা-কালো করেন, বা গোল করে কেটে প্রোফাইল ছবি বানান। ওয়েবে এসব একসময় Photoshop-এ করে আলাদা ছবি আপলোড করতে হতো। আজ CSS নিজেই এই কাজগুলো পারে — মূল ছবি একটিই থাকে, আর ব্রাউজার দেখানোর সময় সম্পাদনা করে।

এই পর্বের মূল ধারণাটি একটি বাক্যে বলা যায়: ব্রাউজার প্রথমে element-টি তার সব সন্তানসহ সাধারণভাবে আঁকে, তারপর সেই আঁকা ছবির ওপর সম্পাদনা চালায়। পর্ব ১-এ দেখেছেন, পাতা দেখানোর ধাপগুলো হলো layout, paint আর compositing. ভিজ্যুয়াল ইফেক্ট বসে paint আর compositing-এর মাঝখানে। এগুলো layout বদলায় না — কোনো element একচুলও সরে না, শুধু চেহারা বদলায়।

২ · filter — দশটি ফাংশনে ছবি-সম্পাদনা

filter property-তে এক বা একাধিক ফাংশন লেখা হয়, ফাঁকা জায়গা দিয়ে আলাদা করে (কমা নয়)। প্রতিটি ফাংশন পুরো element-এর ওপর কাজ করে — লেখা, বর্ডার, ব্যাকগ্রাউন্ড, ভেতরের ছবি, সন্তান element সব। কোন ফাংশন কী করে, আর মান কীভাবে পড়বেন:

খেয়াল করুন, বেশিরভাগ ফাংশনে মান না দিলেও চলে — তখন ব্রাউজার “পুরো মাত্রা” ধরে নেয় (grayscale() মানে grayscale(1), কিন্তু blur() মানে blur(0)). পরিষ্কারের জন্য সবসময় মান লিখে দেওয়াই ভালো। নিচে একই ছবিতে নয়টি ফাংশন দেখুন — ছবিটি এই সাইটেরই একটি ব্লগ-কভার:

body {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  font: 12px monospace;
}
figure { margin: 0; overflow: hidden; }
img { display: block; width: 100%; }

.f1 img { filter: blur(3px); }
.f2 img { filter: brightness(1.5); }
.f3 img { filter: contrast(1.8); }
.f4 img { filter: grayscale(1); }
.f5 img { filter: sepia(1); }
.f6 img { filter: saturate(2.5); }
.f7 img { filter: hue-rotate(120deg); }
.f8 img { filter: invert(1); }
.f9 img { filter: opacity(.35); }

filter: opacity(.5) আর সাধারণ opacity: .5 দেখতে প্রায় এক; পার্থক্য হলো প্রথমটি filter-শিকলের একটি ধাপ, তাই ক্রমের সাথে বাঁধা। সাধারণ কাজে opacity property-ই যথেষ্ট।

৩ · filter-এর শিকল — ক্রম কেন জরুরি, আর drop-shadow বনাম box-shadow

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

filter: noneআসল ছবি

grayscale(1)প্রথম ধাপ

grayscale(1) sepia(1)ধূসর ছবিতে বাদামি রং

sepia(1) grayscale(1)একই দুটি ফাংশন, উল্টো ক্রম

drop-shadow(… red) invert(1)ছায়াও উল্টে গেল

1. শুরুর ছবি। লাল কোট, নীল চেয়ার, পর্দায় চার্ট। এখনো কোনো filter নেই। এবার এই ছবিকে দুটি ফাংশনের লাইনে ঢোকাব।
2. প্রথম ধাপ: grayscale(1). প্রতিটি পিক্সেলের রং বাদ দিয়ে শুধু উজ্জ্বলতা রাখা হলো। লাল কোট এখন মাঝারি ধূসর। এই ধূসর ছবিটিই পরের ফাংশনের “কাঁচামাল”।
3. দ্বিতীয় ধাপ: তার ওপর sepia(1). sepia ধূসর ছবিকে বাদামি রঙে রাঙায় — পুরোনো দিনের পারিবারিক অ্যালবামের ছবির মতো। ফল: উষ্ণ বাদামি ছবি।
4. ক্রম উল্টে দিলাম। এবার আগে sepia — ছবি বাদামি হলো, তারপর grayscale সেই বাদামি রংটাও মুছে দিল। ফল: পুরো ধূসর। একই দুটি শব্দ, শুধু ক্রম আলাদা — ফল সম্পূর্ণ ভিন্ন। শেষ ফাংশনের কথাই শেষ কথা।
5. ছায়াও শিকলের অংশ। প্রথমে লাল drop-shadow যোগ হলো, তারপর invert(1) পুরো ফলটা উল্টে দিল — ছবির সাথে লাল ছায়াও উল্টে আকাশি (cyan) হয়ে গেল। ছায়া লাল রাখতে চাইলে invert(1) drop-shadow(…) লিখতে হতো। নিয়ম: যেটা “শেষ রূপ”-এ অক্ষত চান, সেটি শিকলের শেষে রাখুন।

drop-shadow বনাম box-shadow — স্বচ্ছ লোগোয় পার্থক্য

পর্ব ২২-এ ছোট করে দেখেছেন: box-shadow element-এর আয়তাকার বাক্স ধরে ছায়া আঁকে, আর drop-shadow() আঁকা আসল আকৃতি ধরে — স্বচ্ছ পিক্সেল বাদ দিয়ে। স্বচ্ছ পটভূমির PNG বা WebP লোগো, SVG আইকন, বা clip-path দিয়ে কাটা আকৃতিতে পার্থক্যটা সবচেয়ে স্পষ্ট। নিচে এই সাইটের নিজের লোগো (স্বচ্ছ পটভূমির WebP) দিয়ে দেখুন, সাথে ক্রমের আরেকটি পরীক্ষা:

body { background: #eef3f8; }
img  { width: 200px; margin: 14px; }

/* বাক্স ধরে ছায়া */
.bs { box-shadow: 6px 6px 6px rgb(0 0 0 / .45); }

/* আকৃতি ধরে ছায়া */
.ds { filter: drop-shadow(6px 6px 4px rgb(0 0 0 / .45)); }

/* ক্রম: আগে ছায়া, তারপর রং ঘোরানো */
.o1 { filter: drop-shadow(5px 5px 0 #f42a41) hue-rotate(200deg); }
/* ক্রম: আগে রং ঘোরানো, তারপর ছায়া */
.o2 { filter: hue-rotate(200deg) drop-shadow(5px 5px 0 #f42a41); }

৪ · backdrop-filter — পেছনটা ঝাপসা করা ঘষা কাচ

বাসার বাথরুমের ঘষা কাচের জানালা মনে করুন: আলো আসে, ওপাশের রং বোঝা যায়, কিন্তু কোনো কিছু স্পষ্ট দেখা যায় না। backdrop-filter ঠিক এটাই করে। filter element-এর নিজের আঁকার ওপর কাজ করে; backdrop-filter কাজ করে element-এর পেছনে যা দেখা যাচ্ছে তার ওপর — শুধু element-এর সীমার ভেতরে। এখান থেকেই জনপ্রিয় glassmorphism নকশা: ঘষা কাচের মতো হেডার, মেনু বা কার্ড।

একটি শর্ত সবাই ভুলে যান: element-এর নিজের পটভূমি আধা-স্বচ্ছ হতে হবে। ব্রাউজার আগে পেছনের অংশটুকু ঝাপসা করে, তার ওপর element-এর নিজের ব্যাকগ্রাউন্ড আঁকে, তার ওপর লেখা। পটভূমি পুরো অস্বচ্ছ সাদা হলে ঝাপসা অংশটা ঢাকা পড়ে যায় — মনে হয় কাজই করছে না। আবার পুরো স্বচ্ছ হলে লেখার পেছনে শুধু ঝাপসা ছবি, contrast-এর কোনো নিশ্চয়তা নেই। মাঝামাঝি — যেমন ৫০–৭৫ শতাংশ অস্বচ্ছ সাদা বা কালো — সাধারণত ভালো কাজ করে।

.page {
  height: 260px; overflow: auto;
  font-family: sans-serif; border: 1px solid #ccc;
}
.page img { display: block; width: 100%; }
.page p   { margin: 12px; line-height: 1.6; }

.glass {
  position: sticky; top: 0;
  height: 48px; margin-bottom: -48px;   /* ছবির ওপরে ভাসবে */
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 14px; font-size: 14px; color: #0b1a2a;
  background: rgb(255 255 255 / .55);
  backdrop-filter: blur(10px) saturate(1.4);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgb(255 255 255 / .92); }   /* fallback */
}

সাপোর্ট, fallback আর তিনটি সাবধানতা

backdrop-filter প্রথম এনেছিল Apple-এর Safari, অনেক বছর শুধু -webkit-backdrop-filter উপসর্গ দিয়ে। উপসর্গ ছাড়া রূপটি সব প্রধান ব্রাউজারে আসে ২০২৪ সালে, তাই এটি Baseline Newly available. খুব পুরোনো iPhone-এর Safari সমর্থন করতে চাইলে উপসর্গওয়ালা লাইনটিও পাশাপাশি রাখা যায়; নতুন প্রজেক্টে উপসর্গ ছাড়া রূপই মূল। আর সবসময় এমন একটি fallback রাখুন যাতে ইফেক্ট না থাকলেও লেখা পড়া যায় — উপরের উদাহরণের @supports not অংশ ঠিক সেই কাজ করে (প্রায় অস্বচ্ছ পটভূমি)। এটাই progressive enhancement: সবাই কাজের জিনিস পান, নতুন ব্রাউজার পায় বাড়তি সৌন্দর্য।

• পাঠযোগ্যতা: blur ছবির রেখা নরম করে, কিন্তু উজ্জ্বল আর গাঢ় অংশ থেকেই যায়। তাই কাচের রং আর অস্বচ্ছতা এমন রাখুন যাতে সবচেয়ে খারাপ জায়গাতেও 4.5:1 থাকে (contrast, পর্ব ২০).
• পারফরম্যান্স: প্রতিটি ফ্রেমে ব্রাউজারকে পেছনের অংশ পড়ে নিয়ে নতুন করে ঝাপসা করতে হয়। sticky হেডারে এর মানে স্ক্রলের প্রতিটি মুহূর্তে কাজ। বড় blur ব্যাসার্ধ আর বড় এলাকা খরচ বাড়ায়।
• লুকোনো ফাঁদ: কাচের element-এর কোনো পূর্বপুরুষে filter, opacity-র মান 1-এর কম, mask বা clip-path থাকলে অনেক ক্ষেত্রে কাচ শুধু সেই পূর্বপুরুষের ভেতরের জিনিস ঝাপসা করে — তার বাইরের পাতা নয়। “blur কাজ করছে না” মনে হলে DevTools-এ ওপরের element-গুলো একবার দেখুন।

৫ · Blend mode — রং মেশানোর গণিত, duotone আর isolation

স্বাভাবিকভাবে একটি অস্বচ্ছ element তার নিচের সবকিছু ঢেকে দেয়। আধা-স্বচ্ছ হলে দুটি রং ওজন অনুযায়ী মেশে — এটুকু আমরা জানি। Blend mode আরেকটি প্রশ্নের উত্তর দেয়: ওপরের রং (source) আর নিচের রং (backdrop) — এই দুটি সংখ্যাকে কোন গাণিতিক সূত্রে মিলিয়ে নতুন রং হবে? Photoshop-এর “Multiply”, “Screen” নামগুলো চেনা লাগলে ঠিক — CSS-এ সেই একই সূত্র।

CSS-এ দুটি property:

• mix-blend-mode — পুরো element (লেখা, ছবি, সব) তার নিচের পাতার সাথে মেশে।
• background-blend-mode — একটি element-এর নিজের ব্যাকগ্রাউন্ড স্তরগুলো (ছবি, gradient, রং) একে অপরের সাথে মেশে; বাইরের কিছুর সাথে নয়।

সূত্রগুলো বোঝার জন্য প্রতিটি রঙের চ্যানেলকে 0 (কালো) থেকে 1 (পূর্ণ উজ্জ্বল)-এর একটি সংখ্যা ভাবুন। নিচে সাদা পটভূমিতে একটি হলুদ আর একটি নীল বৃত্ত — নীলটির blend mode বদলে দেখুন:

আরও কিছু মোড আছে — darken ও lighten (প্রতিটি চ্যানেলে ছোট বা বড়টি নেওয়া), color-dodge, color-burn, hard-light, soft-light, exclusion, আর চারটি রঙ-ভিত্তিক মোড hue, saturation, color, luminosity. সব মিলিয়ে ষোলোটি প্রচলিত মান; mix-blend-mode আর background-blend-mode দুটোই Baseline Widely available.

duotone — দুই রঙের ছবি

Duotone মানে ছবির অন্ধকার অংশ এক রঙে আর উজ্জ্বল অংশ আরেক রঙে — পোস্টার আর ব্যানারে খুব চলে, কারণ যেকোনো ছবিকে ব্র্যান্ডের রঙে মিলিয়ে নেওয়া যায়। কৌশলটি তিন ধাপের: (১) ছবিকে grayscale করুন, (২) একটি হালকা রঙের পটভূমির ওপর multiply করুন — সাদা অংশ সেই হালকা রং নেয়, কালো কালোই থাকে, (৩) ওপরে একটি গাঢ় রঙের স্তর lighten দিয়ে বসান — কালো অংশ গাঢ় রংটি নেয়। পাশে একটি ব্যানারে background-blend-mode দিয়ে ছবিকে রঙিন আভা দিয়ে লেখার পটভূমি বানানো হয়েছে:

.duo {
  position: relative; margin: 0 0 14px; width: 320px;
  background: #f4c83c;            /* উজ্জ্বল অংশের রং */
  isolation: isolate;
}
.duo img {
  display: block; width: 100%;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
}
.duo::after {
  content: ""; position: absolute; inset: 0;
  background: #003c28;            /* অন্ধকার অংশের রং */
  mix-blend-mode: lighten;
}

.banner {
  padding: 40px 16px 14px; color: white; font-family: sans-serif;
  background: url("../image/bangladesh-startup-revolution.jpg") center / cover,
              #1f3a93;
  background-blend-mode: multiply;
}
.banner h2, .banner p { margin: 0; }

isolation — মেশানো কোথায় থামবে (পর্ব ২৪-এর স্মৃতি)

mix-blend-mode element-কে তার নিচের সবকিছুর সাথে মেশায় — যতক্ষণ না একটি stacking context-এর সীমায় পৌঁছায়। উপরের duotone-এ .duo-তে isolation: isolate দিয়েছি যাতে ছবি শুধু হলুদ পটভূমির সাথে মেশে, পাতার বাকি অংশের সাথে নয়। পর্ব ২৪-এ isolation-কে z-index আটকে রাখার হাতিয়ার হিসেবে দেখেছিলেন; কিন্তু এটি আসলে এসেছিল Compositing and Blending spec থেকে, ঠিক এই “মেশানোর গণ্ডি” টানার জন্য।

.stripes {
  padding: 12px; font-family: sans-serif;
  background: linear-gradient(90deg, #111 50%, #fff 50%);
}
.diff {
  margin: 0 0 12px; font-size: 34px; color: white;
  mix-blend-mode: difference;
}
.card  { margin: 8px 0; padding: 10px; color: #999;
         border: 2px solid #888; }
.stamp { padding: 4px 8px; background: #f4b400;
         mix-blend-mode: multiply; }
.iso   { isolation: isolate; }

৬ · clip-path — কাঁচি দিয়ে আকৃতি কাটা

clip-path একটি রেখা টানে: রেখার ভেতরে element পুরো দেখা যায়, বাইরে একেবারেই না। আকৃতি দেওয়া হয় কয়েকটি basic shape ফাংশন দিয়ে, যাদের মাপ সাধারণত element-এর border-box ধরে হিসাব হয়:

সবচেয়ে নমনীয় polygon(). এর বিন্দুগুলো element-এর ওপর-বাঁ কোণ থেকে মাপা হয় — 0 0 ওপর-বাঁ, 100% 0 ওপর-ডান, 100% 100% নিচ-ডান। এবার একটি “দামের ট্যাগ” বা তীর-আকৃতির ব্যাজ বিন্দু ধরে ধরে বানাই। ড্যাশ দেওয়া রেখাটি element-এর আসল বাক্স:

clip-path: none;

clip-path: polygon(0 0, 75% 0, 0 100%);

clip-path: polygon(0 0, 75% 0, 100% 50%, 0 100%);

clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%);

clip-path: polygon(0 0, 75% 100%, 100% 50%, 75% 0, 0 100%);

এবার আসল ছবিতে চারটি আকৃতি। শেষ ছবিটির সাথে একটি গুরুত্বপূর্ণ কৌশলও দেখুন — কাটা আকৃতিতে ছায়া:

body { background: #eef3f8; }
.s {
  width: 140px; aspect-ratio: 1; object-fit: cover;
  margin: 8px; vertical-align: middle;
}
.c1 { clip-path: circle(50%); }
.c2 { clip-path: ellipse(48% 32% at 50% 50%); }
.c3 { clip-path: inset(8% round 24px); }

/* ষড়ভুজ — ছায়া দিতে হলে filter বাবার ওপর */
.c4 { clip-path: polygon(50% 0, 100% 25%, 100% 75%,
                         50% 100%, 0 75%, 0 25%); }
.shadow-wrap {
  display: inline-block;
  filter: drop-shadow(4px 6px 4px rgb(0 0 0 / .45));
}

কাটা অংশে ক্লিক পড়ে না, আর shape() নিয়ে একটি কথা

clip-path শুধু চোখের ব্যাপার নয়: কাটা অংশে মাউস বা আঙুল রাখলে সেটি element-এর ওপর পড়েছে বলে গণ্য হয় না — ব্রাউজারের hit testing কাটা আকৃতিই মানে। তাই বৃত্তাকার বোতামের কোণে ক্লিক করলে বোতাম চাপা পড়ে না। খুব সরু আকৃতির বোতাম তাই আঙুল দিয়ে চাপা কঠিন হয়ে যায় (WCAG 2.2-এর target size নিয়ম, পর্ব ৪৫)।

circle(), ellipse(), inset() আর polygon() দিয়ে clip-path Baseline Widely available; পুরোনো -webkit-clip-path উপসর্গ এখন আর লাগে না। path()-এর সমস্যা হলো মাপ পিক্সেলে বাঁধা, তাই রেসপন্সিভ হয় না। সেই সমস্যা মেটাতে নতুন shape() ফাংশন এসেছে, যেখানে বাঁকা রেখাও শতাংশে লেখা যায়। তবে এটি খুবই নতুন — কিছু ব্রাউজারে এসেছে, কিন্তু এই লেখার সময় সব প্রধান ব্রাউজারে নিশ্চিতভাবে নয় (Baseline নয়)। ব্যবহারের আগে Can I use দেখুন আর একটি সাধারণ polygon বা গোল কোণ fallback রাখুন। আর পুরোনো clip: rect(…) property দেখলে চিনে রাখুন — এটি পরিত্যক্ত (deprecated), শুধু absolute বাক্সে চলত।

clip-path animation — ধীরে ধীরে উন্মোচন

দুটি clip-path-এর মাঝে ব্রাউজার মসৃণভাবে বদলাতে পারে, যদি দুটি একই ধরনের আকৃতি হয় — circle থেকে circle, inset থেকে inset, বা সমান সংখ্যক বিন্দুর polygon থেকে polygon. ধরন না মিললে animation মসৃণ হয় না, হঠাৎ লাফ দেয়। পর্দা সরানোর মতো “reveal”, বা hover-এ ছোট বৃত্ত থেকে পুরো ছবি — দুটোই খুব জনপ্রিয় (transition আর @keyframes-এর বিস্তারিত পর্ব ৩৮ আর ৩৯-এ):

<style>
  img { display: block; width: 300px; margin-bottom: 12px; }
  .wipe { animation: wipe 1.4s ease-out both; }
  @keyframes wipe {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }
  .spot { clip-path: circle(20% at 50% 50%);
          transition: clip-path .5s ease; }
  .spot:hover, .spot:focus-visible { clip-path: circle(75% at 50% 50%); }

  @media (prefers-reduced-motion: reduce) {
    .wipe { animation: none; }
    .spot { transition: none; }
  }
</style>
<img class="wipe" src="../image/bangladesh-startup-revolution.jpg" alt="সভাকক্ষে উপস্থাপনার দৃশ্য">
<img class="spot" tabindex="0" src="../image/bangladesh-startup-revolution.jpg" alt="একই দৃশ্য, মাউস রাখলে পুরোটা দেখা যায়">

৭ · mask — gradient আর ছবি দিয়ে নরম কিনারা

clip-path-এর রেখা ধারালো: প্রতিটি পিক্সেল হয় ভেতরে, নয় বাইরে। কিন্তু নকশায় প্রায়ই চাই কিনারা ধীরে ধীরে মিলিয়ে যাক — লম্বা লেখার শেষে “আরও পড়ুন”-এর আগে আবছা হয়ে যাওয়া, ছবির চারপাশ নরমভাবে মিশে যাওয়া। এর জন্য mask. mask-এর জন্য একটি ছবি দিতে হয় — আসল ছবির ফাইল, SVG বা gradient — আর সেই ছবির প্রতিটি পিক্সেলের স্বচ্ছতা (alpha) বলে দেয় element-এর সেই জায়গা কতটা দেখা যাবে:

mask-এর রং কোনো ব্যাপার নয় — black, red বা #006a4e, অস্বচ্ছ হলে সবই এক। (ডিফল্ট mask-mode হলো ছবির alpha দেখা; চাইলে mask-mode: luminance দিয়ে উজ্জ্বলতা দেখতে বলা যায়, তখন সাদা = দেখা যায়, কালো = লুকায় — SVG-র পুরোনো mask এভাবেই কাজ করত।) mask-এর বাকি property-গুলো পর্ব ২২-এর background-এর যমজ: mask-size, mask-position, mask-repeat, আর shorthand mask. নিচে তিনটি প্রচলিত ব্যবহার:

body { font-family: sans-serif; }

/* ১. লেখার শেষ আবছা হয়ে মিলিয়ে যায় */
.fade {
  width: 320px; height: 90px; overflow: hidden; line-height: 1.6;
  mask-image: linear-gradient(to bottom, black 40%, transparent);
}

/* ২. ছবির চারপাশ নরম — radial gradient mask */
.soft {
  display: block; width: 300px; margin: 10px 0;
  mask-image: radial-gradient(ellipse, black 45%, transparent 72%);
}

/* ৩. SVG আকৃতিকে mask — ছবি তারার ভেতরে */
.star {
  width: 150px; aspect-ratio: 1;
  background: url("../image/bangladesh-startup-revolution.jpg") center / cover;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3 62 37h36L69 59l11 36-30-22-30 22 11-36L2 37h36z'/%3E%3C/svg%3E") center / contain no-repeat;
}

সাপোর্টের ইতিহাস: -webkit-mask থেকে Baseline

CSS mask প্রথম আনে WebKit, ২০০৮ সালের দিকে, -webkit-mask-image নামে — spec তৈরির অনেক আগে। Chrome ছিল WebKit-ভিত্তিক, তাই সেখানেও বহু বছর শুধু উপসর্গওয়ালা রূপ চলত, আর Firefox চালাত spec-এর উপসর্গ-ছাড়া রূপ। ফলে একসময় একই কথা দুবার লেখা নিয়ম হয়ে দাঁড়ায়। ২০২৩ সালের শেষ দিকে Chrome ও Edge উপসর্গ ছাড়া পূর্ণ mask চালু করলে এটি সব প্রধান ব্রাউজারে আসে — Baseline 2023. আজ নতুন কোডে উপসর্গ ছাড়া mask-image লিখুন। পুরোনো ব্রাউজার (বিশেষত কয়েক বছর আপডেট না হওয়া ফোন) নিয়ে চিন্তা থাকলে উপসর্গওয়ালা লাইনটি পাশে রাখতে পারেন। আর মনে রাখুন, mask না চললে element পুরো দেখা যায় — তাই mask এমন জায়গায় দিন, যেখানে না চললেও পাতা ভাঙে না।

৮ · ইফেক্টের দাম — অ্যাক্সেসিবিলিটি আর কম দামি ফোনের পারফরম্যান্স

অ্যাক্সেসিবিলিটি: সাজ যেন অর্থ না হয়ে দাঁড়ায়

• ছবির ওপর লেখার contrast: blend mode, ঘষা কাচ বা হালকা overlay — যা-ই দিন, লেখার পেছনের সবচেয়ে খারাপ জায়গায় contrast মাপুন। স্বয়ংক্রিয় টুল প্রায়ই ছবির ওপর contrast মাপতে পারে না; চোখ আর DevTools-এর রং-বাছাই প্যানেলই ভরসা।
• অর্থ ইফেক্টে লুকাবেন না: “স্টক শেষ” পণ্য শুধু grayscale করে দেখালে বর্ণান্ধ পাঠক বা screen reader ব্যবহারকারী বুঝবেন না — পাশে লেখায় “স্টক শেষ” লিখুন। clip-path দিয়ে লুকানো অংশ কিন্তু screen reader ঠিকই পড়ে — কারণ চোখের আড়াল মানে অ্যাক্সেসিবিলিটি থেকে আড়াল নয়। এই বৈশিষ্ট্যটিই আধুনিক visually-hidden ক্লাসের ভিত্তি: clip-path: inset(50%) দিয়ে লেখা চোখ থেকে লুকিয়ে screen reader-এর জন্য রাখা হয় (পুরোনো কোডে একই কাজ করত পরিত্যক্ত clip: rect(0 0 0 0)).
• Forced colors: Windows-এর contrast থিমের মতো forced colors মোডে ব্রাউজার লেখা আর পটভূমির রং নিজের ছোট তালিকা থেকে বসায়, ছায়া বাদ দেয়। blend mode বা duotone দিয়ে বানানো “রঙিন” লেখা সেখানে অপ্রত্যাশিত দেখাতে পারে। DevTools-এর Rendering প্যানেলে forced-colors emulate করে দেখুন; দরকার হলে @media (forced-colors: active)-এ ইফেক্টটি বন্ধ করুন।
• স্বচ্ছতা কমানোর পছন্দ: iPhone, Mac আর Windows-এ “Reduce transparency” জাতীয় সেটিং আছে — অনেকের জন্য ঘষা কাচ পড়া কঠিন বা মাথাব্যথার কারণ। CSS-এ prefers-reduced-transparency media feature এসেছে, কিন্তু এখনো সব প্রধান ব্রাউজারে নেই (Baseline নয়) — তাই এর ওপর নির্ভর না করে কাচকে শুরু থেকেই যথেষ্ট অস্বচ্ছ রাখুন।
• ঝলকানি নয়: hue-rotate বা invert দ্রুত animate করলে পর্দা ঝলকায়। WCAG 2.2 সেকেন্ডে তিনবারের বেশি ঝলকানি এড়াতে বলে, কারণ তা কারও কারও খিঁচুনি (seizure) ঘটাতে পারে। reveal animation-এ prefers-reduced-motion মানুন।

পারফরম্যান্স: ঢাকার ল্যাপটপে মসৃণ, গ্রামের ফোনে?

বাংলাদেশে অনেক পাঠক সাধারণ বা কম দামি Android ফোনে ওয়েব দেখেন — কম শক্তির প্রসেসর, কম শক্তির GPU, অল্প মেমরি। আপনার ডেভেলপমেন্ট ল্যাপটপে যা মাখনের মতো চলে, সেখানে তা স্পষ্টভাবে ঝাঁকুনি দিতে পারে। ইফেক্টগুলোর খরচ মোটামুটি এভাবে ভাবুন:

• স্থির ইফেক্ট বনাম animate করা ইফেক্ট: একবার আঁকা স্থির blur সাধারণত সমস্যা নয়। প্রতিটি ফ্রেমে বদলানো blur-এর মান (blur(0) থেকে blur(20px)) বা স্ক্রলের সাথে চলা কাচ — সেখানেই খরচ। animation-এ যতটা পারেন opacity আর transform বদলান (পর্ব ৩৮, ৪০)।
• বিকল্প ভাবুন: ব্যাকগ্রাউন্ডের ছবি যদি স্থির হয়, তবে ছবিটিই আগে থেকে ঝাপসা করে সেভ করুন — CSS-এ blur-এর দরকারই নেই।
• মেপে দেখুন: DevTools-এর Performance প্যানেলে CPU throttling (৪ বা ৬ গুণ ধীর) চালু করে স্ক্রল রেকর্ড করুন; Rendering প্যানেলে “Frame Rendering Stats” আর “Paint flashing” দেখুন (পর্ব ৪৭, ৪৯)। সবচেয়ে ভালো পরীক্ষা: হাতের কাছের একটি সাধারণ দামের ফোনে নিজের পাতাটি খুলে স্ক্রল করা।

৯ · AI-এর যুগে — চোখ ধাঁধানো ইফেক্ট, কিন্তু যাচাই করা

“একটা glassmorphism কার্ড বানিয়ে দাও” বললে AI কয়েক সেকেন্ডে সুন্দর কোড দেয়। কিন্তু এই বিষয়ে AI-এর কিছু ভুল বারবার দেখা যায় — কারণ সে বহু বছরের পুরোনো টিউটোরিয়াল আর CodePen পড়ে শিখেছে, যেখানে সৌন্দর্য ছিল মূল লক্ষ্য, পাঠযোগ্যতা আর গতি নয়:

AI-এর লেখা ইফেক্টের CSS হাতে পেলে — যাচাইয়ের চেকলিস্ট

• DevTools-এ backdrop-filter আর filter-এর লাইন বন্ধ করে দেখেছি — ইফেক্ট ছাড়াও লেখা পড়া যায় আর পাতা ভাঙে না
• ছবির সবচেয়ে উজ্জ্বল আর সবচেয়ে গাঢ় জায়গায় লেখার contrast DevTools-এর রং-বাছাই প্যানেলে মেপেছি
• Performance প্যানেলে CPU throttling চালু করে স্ক্রল রেকর্ড করেছি, আর একটি সাধারণ Android ফোনে নিজে দেখেছি
• Rendering প্যানেলে forced-colors আর prefers-reduced-motion emulate করে দেখেছি
• নতুন কিছু (shape(), prefers-reduced-transparency) থাকলে MDN আর Can I use-এ Baseline অবস্থা দেখেছি এবং fallback রেখেছি
• HTML validator.w3.org-এ পরীক্ষা করেছি আর Lighthouse-এর Accessibility রিপোর্ট চালিয়েছি — অর্থবহ ছবিতে alt আছে, অর্থ শুধু ইফেক্টে নেই