ব্যাকগ্রাউন্ড, gradient, বর্ডার আর ছায়া

১ · বাক্সের পেছনের দেয়াল — background কী

পর্ব ১৯-এর box model-এ দেখেছেন, পাতার প্রতিটি element আসলে একটি আয়তাকার বাক্স — ভেতরে content, তার চারপাশে padding, তারপর border, সবার বাইরে margin. এই পর্বে আমরা সেই বাক্সকে সাজাব। প্রশ্ন তিনটি: বাক্সের পেছনে কী থাকবে, তার কিনারা দেখতে কেমন হবে, আর বাক্সটি পাতা থেকে কতটা উঁচু মনে হবে।

সবচেয়ে সহজ জিনিস দিয়ে শুরু করি: background-color. পর্ব ২০-এর যেকোনো রঙের লেখা এখানে চলে — #006a4e, rgb(0 106 78), oklch(45% 0.1 160). ডিফল্ট মান transparent, অর্থাৎ স্বচ্ছ — তাই কিছু না লিখলে নিচের element-এর রং দেখা যায়। background কোনো inheritance-এর মাধ্যমে আসে না; ভেতরের element-কে “রঙিন” দেখায় কারণ সে নিজে স্বচ্ছ, আর তার পেছনে বাইরের (parent) element-এর রং দেখা যাচ্ছে।

ব্যাকগ্রাউন্ড কতদূর পর্যন্ত আঁকা হয়? ডিফল্টে border-এর বাইরের কিনারা পর্যন্ত — content, padding, এমনকি border-এর নিচেও। ড্যাশ দেওয়া বা আধা-স্বচ্ছ border দিলে নিচে রংটা উঁকি দেয়, তখন এটা চোখে পড়ে। margin-এর জায়গায় কখনো ব্যাকগ্রাউন্ড আঁকা হয় না — margin বাক্সের বাইরের ফাঁকা জায়গা।

২ · ছবি দিয়ে ব্যাকগ্রাউন্ড — repeat, position, size আর attachment

background-image: url("photo.jpg") লিখলে ছবিটি বাক্সের পেছনে বসে। কিন্তু বাক্স আর ছবির মাপ প্রায় কখনো মেলে না। তখন ব্রাউজারকে চারটি প্রশ্নের উত্তর দিতে হয়, আর প্রতিটির জন্য আলাদা property আছে:

সবচেয়ে বেশি ব্যবহার হয় background-size-এর দুটি শব্দ, আর সবচেয়ে বেশি গোলমালও এখানেই। cover মানে “ছবির অনুপাত ঠিক রেখে এতটা বড় করা, যাতে পুরো বাক্স ঢাকা পড়ে” — বাক্স আর ছবির অনুপাত না মিললে ছবির কিছু অংশ বাইরে চলে যায়। contain মানে “অনুপাত ঠিক রেখে এতটা বড় করা, যাতে পুরো ছবি বাক্সের ভেতরে আঁটে” — তখন কোনো এক দিকে ফাঁকা থাকে। দুটোতেই ছবি কখনো চ্যাপ্টা বা লম্বাটে হয় না।

নিচের তিনটি বাক্সে একই ছবি — এই সাইটের একটি কভার ছবি, যার অনুপাত প্রায় ১৯:১০। CSS বদলে দেখুন কী হয়:

.box {
  height: 140px;
  margin-bottom: 12px;
  border: 2px solid #334;
  background-color: #e8f0fe;
  background-image: url("../image/computer-fundamentals-cover.jpg");
}
.box span {
  background: white;
  font: bold 14px sans-serif;
  padding: 2px 6px;
}
.cover   { background-size: cover; background-position: center; }
.contain { background-size: contain; background-repeat: no-repeat;
           background-position: center; }
.tile    { background-size: 80px auto; }

position-এর হিসাব, আর attachment-এর তিন রূপ

background-position: 20% 80%-এর মানে একটু মজার। এটা “বাঁ দিক থেকে ২০ শতাংশ দূরে” নয়; বরং ছবির ২০ শতাংশ বিন্দুটি বাক্সের ২০ শতাংশ বিন্দুর ওপর বসে। তাই 0% মানে ছবির বাঁ কিনারা বাক্সের বাঁ কিনারায়, 100% মানে ডান কিনারা ডান কিনারায়, আর 50% মানে ঠিক মাঝখানে — center-এর সমান। নির্দিষ্ট কোনো কোণা থেকে মাপতে চাইলে চার-শব্দের রূপ লিখুন: right 16px bottom 8px.

• scroll (ডিফল্ট) — ব্যাকগ্রাউন্ড element-এর সাথে বাঁধা; পাতা স্ক্রল করলে element-এর সাথেই সরে।
• fixed — ব্যাকগ্রাউন্ড ব্রাউজারের জানালার (viewport) সাথে বাঁধা; লেখা সরে, ছবি দাঁড়িয়ে থাকে। একসময় “parallax” চেহারার জন্য খুব জনপ্রিয় ছিল। কিন্তু অনেক মোবাইল ব্রাউজার, বিশেষত iPhone-এর Safari, এটি উপেক্ষা করে, আর ডেস্কটপেও প্রতিটি স্ক্রলে নতুন করে আঁকার খরচ বাড়ায়।
• local — নিজস্ব স্ক্রলবার আছে এমন বাক্সের (overflow: auto) ভেতরের content-এর সাথে ব্যাকগ্রাউন্ড সরে। স্ক্রল-তালিকায় “আরও আছে” ছায়া দেখাতে কাজে লাগে।

৩ · ছবি কোথা থেকে শুরু, কোথায় কাটা — origin, clip আর রঙিন লেখা

বাক্সের তিনটি সীমারেখা আছে: border-এর বাইরের কিনারা (border-box), padding-এর কিনারা (padding-box), আর content-এর কিনারা (content-box). ব্যাকগ্রাউন্ডের দুটি আলাদা প্রশ্নে এই তিনটি ব্যবহার হয়:

background-clip-এর একটি চতুর্থ মান আছে, যা সবচেয়ে জনপ্রিয়: text. এতে ব্যাকগ্রাউন্ড শুধু লেখার অক্ষরগুলোর আকারে কাটা হয়। লেখার নিজের রং স্বচ্ছ করে দিলে মনে হয় অক্ষরগুলোই gradient দিয়ে রং করা। অনেক বছর এটি শুধু -webkit- উপসর্গ দিয়ে চলত; এখন উপসর্গ ছাড়া রূপটি সব প্রধান ব্রাউজারে চলে (Baseline).

.demo {
  padding: 16px;
  margin-bottom: 10px;
  border: 10px dashed rgb(0 0 0 / .5);
  background: linear-gradient(90deg, #006a4e, #f4b400);
  font: 14px monospace;
}
.b1 { background-clip: border-box; }
.b2 { background-clip: padding-box; }
.b3 { background-clip: content-box; }

.title {
  font: 800 36px sans-serif;
  color: #b3122e;                  /* fallback */
}
@supports (background-clip: text) {
  .title {
    background: linear-gradient(90deg, #006a4e, #f42a41);
    background-clip: text;
    color: transparent;
  }
}

৪ · shorthand আর একাধিক স্তর — ছবির ওপর পড়ার মতো লেখা

আটটি আলাদা property লেখা ক্লান্তিকর। তাই আছে shorthand — একটি background লিখেই সব বলা যায়:

/* image  position / size  repeat  attachment  origin clip  color */
.hero {
  background: url("dhaka.jpg") center / cover no-repeat #1b2a4a;
}

দুটি নিয়ম মনে রাখুন। এক: position আর size-এর মাঝে স্ল্যাশ / লাগে, আর size কখনো position ছাড়া একা বসে না — center / cover ঠিক, শুধু cover লিখলে পুরো লাইনটাই বাতিল। দুই: shorthand যে অংশ লেখেননি সেটিকে ডিফল্টে ফিরিয়ে দেয়। আগে background-color: red লিখে পরে background: url(a.png) লিখলে লাল রং মুছে যায় — নতুনদের সবচেয়ে প্রচলিত বিভ্রান্তি এটাই (কেন পরেরটা জেতে, তা পর্ব ১৮-এর cascade-এর হিসাব)।

এবার আসল শক্তি: কমা দিয়ে একাধিক স্তর। প্রতিটি স্তরের নিজস্ব ছবি, position, size থাকতে পারে। নিয়মটা ওপর থেকে গোনা পত্রিকার স্তূপের মতো — প্রথমে লেখা স্তরটি সবার ওপরে, শেষে লেখাটি নিচে। আর রং থাকতে পারে শুধু শেষ স্তরে, কারণ রং সবসময় সবার নিচে। ধাপে ধাপে দেখুন:

background: #1b2a4a;

background:
  url("cover.jpg") center / cover no-repeat,
  #1b2a4a;

background:
  linear-gradient(to top, rgb(0 0 0 / .8), transparent 75%),
  url("cover.jpg") center / cover no-repeat,
  #1b2a4a;

background:
  url("cover.jpg") center / cover no-repeat,
  linear-gradient(to top, …),   /* লুকিয়ে গেল */
  #1b2a4a;

এবার নিজে বানান। নিচের ব্যানারে স্তরগুলো নিয়ে খেলুন:

.hero {
  padding: 110px 20px 16px;
  border-radius: 12px;
  color: white;
  font-family: sans-serif;
  background:
    linear-gradient(to top, rgb(0 0 0 / .8), rgb(0 0 0 / 0) 75%),
    url("../image/computer-fundamentals-cover.jpg") center / cover no-repeat,
    #1b2a4a;
}
.hero h2 { margin: 0 0 4px; }
.hero p  { margin: 0; }

৫ · Gradient — রঙের ঢাল: linear, radial, conic আর repeating

Gradient মানে এক রং থেকে আরেক রঙে ধীরে ধীরে বদলে যাওয়া — সন্ধ্যার আকাশে কমলা থেকে বেগুনি যেমন। CSS-এ gradient কোনো রং নয়, এটি একটি ছবি: ব্রাউজার নিজেই হিসাব করে আঁকে। তাই এটি বসে background-image-এ (বা shorthand background-এ), background-color-এ নয়। কোনো ফাইল ডাউনলোড লাগে না, আর যত বড় পর্দাই হোক, কখনো ঝাপসা হয় না।

linear-gradient — সরলরেখায় ঢাল

সবচেয়ে সাধারণ রূপ: linear-gradient(দিক, রং১, রং২, …). দিক না দিলে ওপর থেকে নিচে (to bottom). দিক দুইভাবে লেখা যায় — শব্দে (to right, to top left) বা কোণে। কোণের নিয়ম ঘড়ির কাঁটার মতো: 0deg মানে নিচ থেকে ওপরের দিকে, 90deg মানে ডানে, 180deg নিচে। প্রতিটি রঙের পাশে একটি অবস্থান দেওয়া যায় — একে বলে color stop. আর দুটি রঙের stop এক জায়গায় বসালে মাঝের ঢাল উধাও হয়ে একটি ধারালো সীমা তৈরি হয় — একে বলে hard stop. ডোরাকাটা নকশা, পতাকা, প্রগ্রেস বার — সব এই কৌশলে। ধাপে ধাপে দেখুন:

linear-gradient(90deg, #006a4e, #f4b400)
/* = #006a4e 0%, #f4b400 100% */

linear-gradient(90deg, #006a4e 40%, #f4b400 60%)

linear-gradient(90deg, #006a4e 50%, #f4b400 50%)

linear-gradient(90deg,
  #1f3a93 0 33.3%, #fbf3e4 33.3% 66.6%, #c0392b 66.6% 100%)

repeating-linear-gradient(45deg, #fbf3e4 0 12px, #c0392b 12px 18px)

radial আর conic — বৃত্তে আর ঘূর্ণনে

radial-gradient() একটি কেন্দ্র থেকে চারদিকে ছড়ায় — পুকুরে ঢিল ছুড়লে যেমন ঢেউ। আকৃতি circle বা ellipse (ডিফল্ট), আর কেন্দ্র বদলাতে at 30% 40%. বোতামে আলোর ঝলক, ছবির কিনারা অন্ধকার করা (vignette), বা একটি নিখুঁত বৃত্ত আঁকা — সবই radial.

conic-gradient() কেন্দ্রের চারপাশে ঘুরে ঘুরে রং বদলায় — ঘড়ির কাঁটা যেমন ১২টা থেকে ঘুরে আবার ১২টায় আসে। শুরু ওপর থেকে, ঘড়ির কাঁটার দিকে। hard stop-এর সাথে মেলালে এটা একটি পাই চার্ট: conic-gradient(#006a4e 0 40%, #f42a41 0 65%, …) মানে প্রথম ৪০ শতাংশ ঘূর্ণন সবুজ, তারপর ৬৫ পর্যন্ত লাল। আর repeating-radial-gradient(), repeating-conic-gradient() দিয়ে লক্ষ্যভেদের বৃত্ত বা সূর্যরশ্মির মতো নকশা হয়।

.g { height: 56px; margin: 6px 0; padding: 6px;
     border-radius: 8px; font: 13px monospace; }
.g1 { background: linear-gradient(135deg, #006a4e, #f4b400); }
.g2 { background: radial-gradient(circle at 30% 50%,
        #fff 0 8%, #f4b400 30%, #c0392b); }
.g3 { background: repeating-linear-gradient(45deg,
        #fbf3e4 0 10px, #c0392b 10px 14px); }
.g4 { background: linear-gradient(90deg, #1f3a93, #f4b400); }
.g5 { background: linear-gradient(90deg in oklch, #1f3a93, #f4b400); }

.pie {
  width: 140px; aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#006a4e 0 40%, #f42a41 0 65%,
                             #f4b400 0 85%, #1f3a93 0);
}

in oklch অংশটির নাম color interpolation method — দুটি রঙের মাঝের রংগুলো কোন রঙ-জগতে হিসাব হবে (পর্ব ২০-এর oklch মনে করুন)। hex বা rgb() রঙের বেলায় ডিফল্ট sRGB-তে দুটি বিপরীতধর্মী রঙের মাঝে প্রায়ই একটি ধূসর “মরা অঞ্চল” তৈরি হয়; oklch মানুষের চোখের অনুভূতি অনুযায়ী মেশায়। এটি Baseline Newly available (২০২৪ সালে সব প্রধান ব্রাউজারে এসেছে)। পুরোনো ব্রাউজারের জন্য আগে একটি সাধারণ gradient লিখে পরের লাইনে in oklch রূপটি লিখুন — না বুঝলে পুরোনো ব্রাউজার দ্বিতীয় লাইনটি বাদ দেবে, প্রথমটি থাকবে।

৬ · বর্ডার — রেখা, গোল কোণ, border-image আর outline

পর্ব ১৯-এ border-কে box model-এর একটি স্তর হিসেবে দেখেছেন। এবার তার চেহারা। প্রতিটি border-এর তিনটি অংশ: প্রস্থ (border-width), ধরন (border-style: solid, dashed, dotted, double, groove, ridge, inset, outset, none) আর রং (border-color, না দিলে লেখার রং — currentColor). shorthand: border: 2px solid #006a4e.

সবচেয়ে প্রচলিত ভুল: শুধু border: 2px বা border-color: red লিখে ভাবা কেন দেখা যাচ্ছে না। কারণ border-style-এর ডিফল্ট none — ধরন না দিলে কোনো রেখাই আঁকা হয় না। প্রতিটি দিক আলাদাও করা যায়: border-left: 6px solid দিয়ে নোটিশ-বক্সের বাঁ পাশে রঙিন দাগ, বা border-bottom দিয়ে শিরোনামের নিচে দাগ। নতুন কোডে border-inline-start-এর মতো logical property-ও দেখবেন, যা আরবি-উর্দুর মতো ডান-থেকে-বাঁ লেখায় নিজে থেকে দিক বদলায় (পর্ব ৩৫)।

border-radius — কোণ গোল করা

border-radius: 12px চারটি কোণাকে ১২ পিক্সেল ব্যাসার্ধের বৃত্তের চাপ দিয়ে গোল করে। চারটি মান দিলে ঘড়ির কাঁটার দিকে — ওপর-বাঁ, ওপর-ডান, নিচ-ডান, নিচ-বাঁ। তিনটি জাদুর ব্যবহার:

• বৃত্ত: বর্গাকার বাক্সে border-radius: 50%. প্রোফাইল ছবি, আইকনের পটভূমি।
• পিল (ক্যাপসুল): border-radius: 999px-এর মতো বিশাল মান। ব্রাউজার ব্যাসার্ধকে ছোট দিকের অর্ধেকে নামিয়ে আনে, তাই বাক্স যত চওড়াই হোক, দুই মাথা পুরো গোল। বোতাম আর ট্যাগে খুব চলে।
• উপবৃত্তাকার কোণ: স্ল্যাশ দিয়ে দুটি মান — border-radius: 40px / 20px মানে আড়াআড়ি ৪০, খাড়া ২০ পিক্সেলের ব্যাসার্ধ। ডিম, পাতা বা ঢেউয়ের আকৃতি এভাবে।

গোল কোণা শুধু border নয় — ব্যাকগ্রাউন্ড, ছায়া আর overflow: hidden দিলে ভেতরের ছবিও সেই বাঁক মেনে কাটা পড়ে। ব্যতিক্রম একটিই: border-image.

border-image — ছবি বা gradient দিয়ে ফ্রেম

border-image একটি ছবিকে নয়টি ভাগে কেটে (চার কোণা, চার পাশ, মাঝ) border-এর জায়গায় বসায়। ছবির জায়গায় gradient দিলে রঙিন বা নকশাদার ফ্রেম হয়। শর্ত দুটি: একটি border-style থাকতে হবে (না হলে প্রস্থ শূন্য), আর border-image থাকলে border-radius কোণা গোল করে না। প্রয়োজন কম পড়ে, কিন্তু কাঁথার পাড়ের মতো ফ্রেমে এটি দারুণ।

div, button { margin: 10px 0; font-family: sans-serif; }
.notice {
  padding: 10px 14px;
  background: #f3f8f5;
  border-left: 6px solid #006a4e;
  border-bottom: 1px dashed #999;
}
.circle {
  width: 64px; aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid #f42a41;
  background: #fde8ea;
  text-align: center; line-height: 64px; font-size: 22px;
}
.pill  { padding: 8px 22px; border: 0; border-radius: 999px;
         background: #1f3a93; color: white; font-size: 16px; }
.egg   { width: 160px; padding: 20px 0; text-align: center;
         background: #f4b400; border-radius: 40px / 20px; }
.frame { padding: 14px; border: 12px solid;
         border-image: repeating-linear-gradient(45deg,
           #c0392b 0 8px, #fbf3e4 8px 12px, #1f3a93 12px 20px) 12; }

outline — border-এর মতো দেখতে, কিন্তু আলাদা জিনিস

outline দেখতে border-এর মতো, কিন্তু box model-এর অংশ নয় — কোনো জায়গা নেয় না, পাশের element সরায় না, আর outline-offset দিয়ে বাক্সের বাইরে-ভেতরে সরানো যায়। আধুনিক ব্রাউজারে outline border-radius-এর বাঁকও মেনে চলে। এর আসল কাজ keyboard focus দেখানো: Tab চেপে চলা মানুষ এটি দেখেই বোঝেন তিনি কোথায় আছেন। তাই outline: none লিখে বিকল্প না দেওয়া একটি গুরুতর অ্যাক্সেসিবিলিটি ভুল (:focus-visible নিয়ে বিস্তারিত পর্ব ৩৪ আর ৪৫-এ)।

৭ · ছায়া — box-shadow, text-shadow আর drop-shadow

পর্দা সমতল, তবু কিছু কার্ড “উঁচু” মনে হয়, কিছু বোতাম “চাপা” মনে হয়। এই বিভ্রম তৈরি করে ছায়া। box-shadow-এর পূর্ণ গঠন:

box-shadow: [inset] x-offset y-offset [blur] [spread] [color];
box-shadow: 0 4px 12px 0 rgb(0 0 0 / .25);

শুধু প্রথম দুটি (আড়াআড়ি আর খাড়া সরণ) বাধ্যতামূলক। দুটি মৌলিক সত্য মনে রাখুন। এক: ছায়া কোনো জায়গা নেয় না — layout-এ একটুও প্রভাব ফেলে না, পাশের element সরে না; ছায়া পাশের জিনিসের ওপর বা নিচে শুধু আঁকা হয়। দুই: ছায়া বাক্সের আকার, border-radius-সহ, অনুসরণ করে — ভেতরের লেখা বা ছবির আকৃতি নয়। প্রতিটি মান ধাপে ধাপে যোগ করে দেখুন:

text-shadow আর drop-shadow — অন্য দুই ছায়া

text-shadow লেখার প্রতিটি অক্ষরের ছায়া (টাইপোগ্রাফির অংশ, পর্ব ২১)। গঠন প্রায় এক — x y blur color — কিন্তু spread আর inset নেই। ছবির ওপরের লেখায় হালকা text-shadow পড়তে সাহায্য করে, কিন্তু সেটিকে contrast-এর একমাত্র ভরসা বানাবেন না।

filter: drop-shadow() সম্পূর্ণ ভিন্ন জিনিস। এটি element-এর আঁকা আসল রূপ ধরে — স্বচ্ছ অংশ বাদ দিয়ে। তারকা-আকৃতির SVG, স্বচ্ছ পটভূমির PNG লোগো, বা clip-path দিয়ে কাটা আকৃতিতে box-shadow একটি আয়তাকার ছায়া দেয়, কিন্তু drop-shadow আকৃতিটির কিনারা ধরে ছায়া ফেলে। এর spread বা inset নেই। filter-এর পুরো জগৎ (blur, brightness, blend mode) আসবে পর্ব ৪১-এ।

body { background: #eef1f5; font-family: sans-serif; }
.card { margin: 18px 8px; padding: 16px;
        background: white; border-radius: 12px; }
.one  { box-shadow: 0 10px 20px black; }
.layered {
  box-shadow: 0 1px 2px rgb(0 0 0 / .12),
              0 4px 8px rgb(0 0 0 / .10),
              0 16px 32px rgb(0 0 0 / .12);
}
.well { background: #e9ecf1;
        box-shadow: inset 0 2px 6px rgb(0 0 0 / .3); }

svg { width: 90px; margin: 10px; }
.bs { box-shadow: 6px 6px 6px rgb(0 0 0 / .5); }
.ds { filter: drop-shadow(6px 6px 4px rgb(0 0 0 / .5)); }

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

পর্ব ০১-এ দেখেছেন, ব্রাউজার পাতা দেখাতে কয়েকটি ধাপ পার হয় — layout (কোথায় কী বসবে), paint (পিক্সেলে রং বসানো), তারপর compositing (স্তরগুলো জোড়া দেওয়া)। ব্যাকগ্রাউন্ড, বর্ডার আর ছায়া সবই paint-এর কাজ। সাধারণ অবস্থায় এগুলো খুব দ্রুত। সমস্যা হয় যখন অনেক বড় জায়গা বারবার নতুন করে আঁকতে হয়:

• বিশাল blur-এর ছায়া: blur যত বড়, প্রতিটি পিক্সেলের জন্য তত বেশি আশেপাশের পিক্সেল মেশাতে হয়। একটি কার্ডে 0 30px 80px সমস্যা নয়; কিন্তু একশো কার্ডের দীর্ঘ তালিকায়, কম দামি ফোনে, প্রতিবার আঁকা লাগলে স্ক্রল ঝাঁকুনি দিতে পারে।
• ছায়া animate করা: hover-এ box-shadow-এর মান বদলাতে transition দিলে প্রতিটি ফ্রেমে নতুন করে paint হয়। প্রচলিত সমাধান: বড় ছায়াটি একটি ::after pseudo-element-এ আগেই এঁকে রাখা, আর hover-এ শুধু তার opacity বদলানো — opacity বদল সাধারণত compositing ধাপেই সামলানো যায় (পর্ব ৩৮)।
• background-attachment: fixed: প্রতিটি স্ক্রলে পুরো ব্যাকগ্রাউন্ড নতুন করে আঁকার কারণ হতে পারে, আর মোবাইলে প্রায়ই কাজই করে না। আধুনিক scroll-driven animation (পর্ব ৪২) এই ধরনের ইফেক্টের ভালো বিকল্প।
• বিশাল ব্যাকগ্রাউন্ড ছবি: hero-র জন্য ৫ মেগাবাইটের ছবি পাতাকে ধীর করে, আর CSS ব্যাকগ্রাউন্ডের ছবি ব্রাউজার একটু দেরিতে খুঁজে পায় (CSS পড়ার পরে)। পাতার মূল ছবি হলে সেটি <img>-এ রাখা প্রায়ই ভালো (পর্ব ৩২ আর ৪৯)।

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

• ছায়া একা সীমানা নয়: Windows-এর contrast থিমের মতো forced colors মোডে ব্রাউজার box-shadow আর text-shadow বাদ দেয়, আর ব্যাকগ্রাউন্ডের রং নিজের রঙে বদলে দেয়। যে বোতাম বা কার্ডের কিনারা শুধু ছায়া দিয়ে বোঝা যেত, তা মিলিয়ে যায়। সমাধান সহজ: একটি স্বচ্ছ border রাখুন — border: 1px solid transparent — forced colors মোডে ব্রাউজার সেটিকে দৃশ্যমান রঙে আঁকে।
• UI-এর সীমানার contrast: WCAG 2.2-এর একটি শর্ত (1.4.11) বলে, ইনপুট ঘর বা বোতামের সীমানার মতো জরুরি অংশে আশপাশের সাথে অন্তত 3:1 contrast লাগে। খুব হালকা ছায়া বা হালকা ধূসর border দেওয়া ইনপুট ঘর অনেকে খুঁজেই পান না।
• ছবির ওপর লেখা: সবসময় overlay gradient বা গাঢ় পটভূমি রাখুন, আর ছবির নিচে একটি রং রাখুন যাতে ছবি না এলেও পড়া যায়।
• রং ছাড়া তথ্য: পাই চার্ট বা লাল-সবুজ ব্যাজে শুধু রঙে অর্থ দেবেন না; লেখা বা আইকনও দিন।

৯ · প্রজেক্ট — নকশিকাঁথা-অনুপ্রাণিত একটি কার্ড

এবার সব একসাথে। নকশিকাঁথার কথা ভাবুন — ঘিয়ে রঙের পুরোনো কাপড়, তার ওপর লাল-নীল সুতোর ছোট ছোট চলমান ফোঁড় (running stitch), মাঝে পদ্ম বা সূর্যের মতো গোল নকশা, চারপাশে পাড়। প্রতিটি অংশ CSS-এর কোনো একটি কৌশল দিয়ে আঁকা যায়, একটিও ছবির ফাইল ছাড়া:

• ফোঁড়ের দাগ → repeating-linear-gradient (রং, ফাঁক, রং, ফাঁক)
• পদ্ম বা সূর্য মোটিফ → repeating-conic-gradient-এর পাপড়ির ওপরে radial-gradient-এর কেন্দ্র, border-radius: 50%
• বুটির নকশা → ছোট radial-gradient বিন্দু, background-size দিয়ে টালির মতো
• পাড় → border-image-এ তেরছা ডোরা; পাতা থেকে উঁচু ভাব → স্তরে স্তরে box-shadow

<style>
  body { background: #efe6d6; font-family: sans-serif; }
  .kantha { max-width: 320px; margin: 24px auto; background: #fbf3e4; color: #3b1f0e;
    border: 10px solid; border-image: repeating-linear-gradient(45deg,
      #c0392b 0 6px, #fbf3e4 6px 10px, #1f3a93 10px 16px, #fbf3e4 16px 20px) 10;
    box-shadow: 0 2px 4px rgb(0 0 0 / .12), 0 12px 28px rgb(0 0 0 / .15); }
  .band { padding: 22px 0;
    background: radial-gradient(circle, #c0392b 2px, transparent 2.5px) 0 0 / 16px 16px, #f6e7cc; }
  .motif { width: 84px; aspect-ratio: 1; margin: auto; border-radius: 50%;
    background: radial-gradient(circle, #f4b400 0 22%, #fbf3e4 23% 30%, transparent 31%),
      repeating-conic-gradient(#c0392b 0 15deg, #1f3a93 15deg 30deg); }
  .stitch { height: 3px; margin: 0 16px;
    background: repeating-linear-gradient(90deg, #1f3a93 0 10px, transparent 10px 16px); }
  .body { padding: 14px 18px 18px; }
  h2 { margin: 0 0 6px; }
  .price { display: inline-block; margin-top: 8px; padding: 4px 14px;
    border-radius: 999px; background: #1f3a93; color: white; }
</style>
<article class="kantha">
  <div class="band"><div class="motif"></div></div>
  <div class="stitch"></div>
  <div class="body">
    <h2>হাতে সেলাই নকশিকাঁথা</h2>
    <p>যশোরের কারিগরের তৈরি, পুরোনো সুতি কাপড়ে লাল-নীল সুতোর ফোঁড়।</p>
    <span class="price">৳ ৩,২০০</span>
  </div>
</article>

১০ · AI-এর যুগে — সুন্দর CSS, কিন্তু যাচাই করা

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

AI-এর লেখা ব্যাকগ্রাউন্ড-ছায়ার CSS হাতে পেলে — যাচাইয়ের চেকলিস্ট

• DevTools-এর Elements প্যানেলে প্রতিটি রঙের পাশের ছোট বর্গে চেপে contrast অনুপাত দেখেছি — লেখার জন্য 4.5:1-এর বেশি
• ছবির URL ইচ্ছা করে ভুল করে দেখেছি — ছবি না এলেও লেখা পড়া যায়
• DevTools-এর Rendering প্যানেলে forced colors আর “Paint flashing” চালু করে দেখেছি — সীমানা থাকে, স্ক্রলে অকারণে বিশাল এলাকা জ্বলে ওঠে না
• কোডে অপ্রয়োজনীয় -webkit-/-moz- উপসর্গ নেই; নতুন কিছু (যেমন in oklch) থাকলে MDN আর Can I use-এ সাপোর্ট দেখেছি এবং fallback রেখেছি
• Lighthouse-এর Accessibility রিপোর্ট চালিয়েছি, আর HTML validator.w3.org-এ পরীক্ষা করেছি — তথ্যপূর্ণ ছবি <img alt>-এ আছে, CSS-এ নয়
• Tab চেপে পুরো পাতা ঘুরেছি — প্রতিটি বোতাম আর লিংকে focus দেখা যায়