🎨 CSS Basics — সম্পূর্ণ নোট
এই সেকশনে CSS-এর মূল ধারণা, কীভাবে স্টাইল করতে হয় এবং এর গুরুত্বপূর্ণ প্রপার্টিগুলো সহজ ভাষায় বোঝানো হয়েছে।
🔷 CSS কী?
CSS (Cascading Style Sheets) হলো এমন একটি ভাষা যা দিয়ে HTML পেজের চেহারা ও ডিজাইন নিয়ন্ত্রণ করা হয় — রঙ, আকার, ফন্ট, স্থান, লেআউট সব কিছু।
সহজ ভাষায় বলতে গেলে — HTML হলো একটা বাড়ির কাঠামো (skeleton), আর CSS হলো সেই বাড়ির রঙ, সাজসজ্জা এবং সৌন্দর্য।
⚠️ HTML ≠ CSS:
HTML শুধু বলে "এখানে একটা বোতাম আছে"। CSS বলে "বোতামটা নীল রঙের, গোলাকার কোণার, এবং মাঝখানে থাকবে।"
দুটো আলাদা ভাষা — একসাথে ব্যবহার হয়।
🔷 CSS Syntax — কীভাবে লিখতে হয়?
CSS-এর প্রতিটি নিয়ম তিনটি অংশ নিয়ে তৈরি:
অংশ ১ — Selector Selector
Selector দিয়ে বলা হয় কোন HTML এলিমেন্টটাকে স্টাইল করতে চাও।
যেমন h1 লিখলে পেজের সব h1 ট্যাগ বেছে নেওয়া হয়।
অংশ ২ — Property ও Value Property & Value
Property বলে কী পরিবর্তন করবে (যেমন রঙ, আকার), আর Value বলে কতটুকু বা কী
করবে।
প্রতিটি লাইনের শেষে ; সেমিকোলন দিতে হয়।
/* CSS এর মূল গড়ন */
selector {
property: value;
}
/* বাস্তব উদাহরণ */
h1 {
color: red; /* লেখার রঙ লাল */
font-size: 32px; /* ফন্টের আকার ৩২ পিক্সেল */
}
✅ মনে রাখার উপায়: CSS লেখা মানে — "কাকে (Selector) → কী করবে (Property) → কতটুকু
করবে
(Value)" — এই তিনটা বললেই হলো।
🔷 CSS যুক্ত করার ৩টি উপায়
১. Inline CSS সরাসরি ট্যাগে
HTML ট্যাগের ভেতরে সরাসরি style="" লিখে স্টাইল দেওয়া হয়।
ছোট ও দ্রুত কাজের জন্য ঠিক আছে, কিন্তু বড় প্রজেক্টে ব্যবহার করা ঠিক না।
<h1 style="color: blue; font-size: 24px;">আমি নীল রঙের</h1>
২. Internal CSS head-এর ভেতরে
HTML ফাইলের <head> অংশে <style> ট্যাগ ব্যবহার করে CSS লেখা হয়।
একটি নির্দিষ্ট পেজের জন্য কাজ করে।
<head>
<style>
h1 {
color: green;
font-size: 28px;
}
</style>
</head>
৩. External CSS আলাদা ফাইলে
আলাদা .css ফাইল বানিয়ে HTML-এ <link> ট্যাগ দিয়ে যুক্ত করা হয়।
এটাই সবচেয়ে পেশাদার এবং সঠিক পদ্ধতি।
/* style.css ফাইলে */
h1 {
color: purple;
}
/* HTML ফাইলে <head>-এর ভেতরে */
<link rel="stylesheet" href="style.css">
⚠️ কোনটা ব্যবহার করবে? সবসময় External CSS ব্যবহারের চেষ্টা করো।
Inline CSS শুধু জরুরি ক্ষেত্রে, Internal CSS শুধু ছোট প্রজেক্টে।
🔷 গুরুত্বপূর্ণ CSS Selectors
CSS দিয়ে HTML এলিমেন্ট বেছে নেওয়ার কয়েকটি উপায় আছে:
| Selector | লেখার নিয়ম | কাকে ধরে? | উদাহরণ |
|---|---|---|---|
| Element | p { } |
সব <p> ট্যাগ |
h1, p, div |
| Class | .box { } |
class="box" আছে এমন সব এলিমেন্ট |
.card, .btn |
| ID | #header { } |
শুধু id="header" এলিমেন্ট |
#nav, #footer |
| Universal | * { } |
পেজের সব এলিমেন্ট | * { margin: 0; } |
/* Element Selector */
p { color: gray; }
/* Class Selector — একাধিক এলিমেন্টে ব্যবহার করা যায় */
.highlight { background-color: yellow; }
/* ID Selector — শুধু একটিমাত্র এলিমেন্টে */
#main-title { font-size: 40px; }
✅ Class vs ID: Class (
.) একাধিক এলিমেন্টে দেওয়া যায় — যেমন একই ডিজাইনের
অনেক
কার্ড।
ID (#) শুধু একটি এলিমেন্টে — যেমন পেজের একমাত্র হেডার।
🔷 গুরুত্বপূর্ণ CSS Properties
1. Text ও Font সংক্রান্ত Typography
p {
color: #333333; /* লেখার রঙ */
font-size: 16px; /* ফন্ট সাইজ */
font-weight: bold; /* মোটা লেখা */
text-align: center; /* মাঝখানে */
font-family: Arial, sans-serif; /* ফন্ট পরিবার */
line-height: 1.6; /* লাইনের মাঝে ফাঁকা */
text-decoration: underline; /* নিচে দাগ */
}
2. Background ও Color Background
div {
background-color: #f0f4f8; /* ব্যাকগ্রাউন্ড রঙ */
background-image: url("bg.jpg"); /* ছবি */
color: #1a202c; /* লেখার রঙ */
opacity: 0.8; /* স্বচ্ছতা (০-১) */
}
3. আকার ও Border Sizing
.card {
width: 300px; /* প্রস্থ */
height: 200px; /* উচ্চতা */
border: 2px solid #ccc; /* রেখা: পুরুত্ব, ধরন, রঙ */
border-radius: 8px; /* কোণ গোলাকার */
}
4. Display Property Display
div { display: block; } /* পুরো লাইন জুড়ে */
span { display: inline; } /* পাশাপাশি, আকার নেই */
.btn { display: inline-block; } /* পাশাপাশি, আকার আছে */
.nav { display: flex; } /* আধুনিক লেআউট */
.hide { display: none; } /* লুকিয়ে ফেলো */
🔷 CSS Box Model — সবচেয়ে গুরুত্বপূর্ণ ধারণা
CSS-এ প্রতিটি এলিমেন্ট একটি বাক্স-এর মতো। সেই বাক্সের চারটি স্তর আছে — ভেতর থেকে বাইরের দিকে:
| স্তর | Property | কাজ | উদাহরণ |
|---|---|---|---|
| Content | width, height |
আসল লেখা বা ছবির জায়গা | 200px × 100px |
| Padding | padding |
Content ও Border-এর মাঝের ভেতরের ফাঁক | padding: 16px; |
| Border | border |
বাক্সের চারদিকের রেখা | border: 2px solid; |
| Margin | margin |
বাক্সের বাইরের ফাঁক — অন্য এলিমেন্ট থেকে দূরত্ব | margin: 24px; |
.box {
/* Content */
width: 200px;
height: 100px;
/* Padding: ভেতরের ফাঁক */
padding: 16px; /* চারদিকে সমান */
padding: 10px 20px; /* উপর-নিচ ১০px, বাম-ডান ২০px */
/* Border */
border: 2px solid #333;
/* Margin: বাইরের ফাঁক */
margin: 24px; /* চারদিকে সমান */
margin: 0 auto; /* বাম-ডান auto = মাঝখানে */
}
✅ Padding vs Margin মনে রাখার উপায়:
Padding = জামার ভেতরে বাড়তি কাপড় (বাক্সের ভেতর),
Margin = দুইজন মানুষের মাঝের দূরত্ব (বাক্সের বাইরে)।
🔷 CSS-এ রঙ লেখার উপায়
CSS-এ রঙ চারটি উপায়ে লেখা যায়:
/* ১. নাম দিয়ে */
color: red;
color: blue;
color: tomato;
/* ২. Hex Code দিয়ে (সবচেয়ে বেশি ব্যবহৃত) */
color: #ff0000; /* লাল */
color: #1a73e8; /* নীল */
color: #333333; /* গাঢ় ধূসর */
/* ৩. RGB দিয়ে */
color: rgb(255, 0, 0); /* লাল */
color: rgb(26, 115, 232); /* নীল */
/* ৪. RGBA — শেষের সংখ্যা স্বচ্ছতা (০ = স্বচ্ছ, ১ = অপাক) */
color: rgba(0, 0, 0, 0.5); /* ৫০% স্বচ্ছ কালো */
✅ পরামর্শ: রঙ বাছাই করতে Google-এ "color picker" লিখে সার্চ করো —
সরাসরি Hex Code পেয়ে যাবে।
🔷 দ্রুত রেফারেন্স — গুরুত্বপূর্ণ CSS Property সমূহ
| Property | কাজ | উদাহরণ |
|---|---|---|
| color | লেখার রঙ | color: #333; |
| background-color | ব্যাকগ্রাউন্ড রঙ | background-color: #fff; |
| font-size | ফন্টের আকার | font-size: 18px; |
| font-weight | ফন্টের ওজন (মোটা/পাতলা) | font-weight: bold; |
| font-family | ফন্ট পরিবার | font-family: Arial; |
| text-align | লেখার অবস্থান | text-align: center; |
| width / height | প্রস্থ ও উচ্চতা | width: 100%; height: 200px; |
| padding | ভেতরের ফাঁক | padding: 16px; |
| margin | বাইরের ফাঁক | margin: 0 auto; |
| border | চারদিকের রেখা | border: 1px solid #ccc; |
| border-radius | কোণ গোলাকার করা | border-radius: 8px; |
| display | এলিমেন্ট কীভাবে থাকবে | display: flex; |
| opacity | স্বচ্ছতা (০ থেকে ১) | opacity: 0.7; |
| cursor | মাউসের ধরন | cursor: pointer; |
🌊 Cascading Order — সম্পূর্ণ নোট
CSS-এর "C" মানেই Cascading। এই সেকশনে বোঝানো হয়েছে — একই এলিমেন্টে একাধিক CSS নিয়ম থাকলে ব্রাউজার কোনটা মানে এবং কেন।
🔷 Cascading Order কী?
CSS-এর পুরো নামে "Cascading" শব্দটা আছে কারণ — একই এলিমেন্টকে একাধিক জায়গা থেকে স্টাইল দেওয়া যায়। তখন ব্রাউজারকে সিদ্ধান্ত নিতে হয় — কোন নিয়মটা জিতবে?
সহজ ভাষায় — Cascading Order হলো CSS-এর বিচারক। দুটো নিয়মের মধ্যে দ্বন্দ্ব হলে কে জিতবে তা এই নিয়মই ঠিক করে।
⚠️ কেন জানা দরকার?
তুমি লিখেছো
color: red; কিন্তু পেজে নীল দেখাচ্ছে — এর কারণ হলো
অন্য কোনো নিয়ম জিতে গেছে। Cascading Order না জানলে এই সমস্যা ধরা যাবে না।
🔷 ব্রাউজার কোন ক্রমে সিদ্ধান্ত নেয়?
ব্রাউজার একটি নির্দিষ্ট ক্রমে চিন্তা করে — উপর থেকে নিচে:
| ধাপ | নিয়ম | সহজ মানে | অগ্রাধিকার |
|---|---|---|---|
| ১ | Importance | !important দিয়ে জোর করা |
🥇 সর্বোচ্চ |
| ২ | Specificity | কত নির্দিষ্ট Selector ব্যবহার হয়েছে | 🥈 দ্বিতীয় |
| ৩ | Source Order | কোডে কোনটা পরে লেখা | 🥉 তৃতীয় |
| ৪ | Inheritance | বাবা-মা এলিমেন্ট থেকে পাওয়া | সর্বশেষ |
✅ মনে রাখার উপায়: I S S I —
Importance → Specificity → Source Order →
Inheritance।
উপরেরটা জিতলে নিচেরটা দেখার দরকার নেই।
🔷 ১. Source Order — কোডে কোনটা পরে?
দুটো CSS নিয়ম সমান শক্তির হলে — যেটা কোডে পরে লেখা সেটা জেতে। উপরের নিয়ম নিচের নিয়ম দিয়ে ওভাররাইট হয়ে যায়।
p {
color: red; /* আগে লেখা */
}
p {
color: blue; /* পরে লেখা — এটাই জিতবে */
}
/* ফলাফল: লেখা নীল হবে */
✅ বাস্তব উদাহরণ: তুমি যদি আগে একটি CSS লাইব্রেরি (যেমন Bootstrap)
লিঙ্ক করো এবং তারপর নিজের CSS ফাইল লিঙ্ক করো — তোমার CSS জিতবে, কারণ এটা পরে লেখা।
/* HTML-এ লিঙ্কের ক্রম গুরুত্বপূর্ণ */
<link rel="stylesheet" href="bootstrap.css"> /* আগে */
<link rel="stylesheet" href="style.css"> /* পরে — তোমারটা জিতবে */
🔷 ২. Specificity — কে বেশি নির্দিষ্ট?
Specificity মানে Selector কতটা নির্দিষ্ট — যত নির্দিষ্ট, তত বেশি শক্তিশালী। ব্রাউজার প্রতিটি Selector-এর একটি পয়েন্ট স্কোর হিসাব করে।
Specificity পয়েন্ট চার্ট Point System
| Selector ধরন | উদাহরণ | পয়েন্ট | শক্তি |
|---|---|---|---|
| Inline Style | style="color: red" |
1000 | 💪💪💪💪 |
| ID Selector | #header |
100 | 💪💪💪 |
| Class Selector | .card |
10 | 💪💪 |
| Element Selector | p, h1 |
1 | 💪 |
| Universal Selector | * |
0 | — |
বাস্তব উদাহরণ — পয়েন্ট গণনা Example
/* পয়েন্ট গণনা */
p → 1 পয়েন্ট (শুধু Element)
.card → 10 পয়েন্ট (শুধু Class)
#header → 100 পয়েন্ট (শুধু ID)
/* মিশ্র Selector — পয়েন্ট যোগ হয় */
div p → 1 + 1 = 2 পয়েন্ট
.card p → 10 + 1 = 11 পয়েন্ট
#header .card → 100 + 10 = 110 পয়েন্ট
/* কে জিতবে? */
p { color: red; } /* 1 পয়েন্ট */
.text { color: green; } /* 10 পয়েন্ট */
#title { color: blue; } /* 100 পয়েন্ট */
/* HTML: <p id="title" class="text">আমি</p> */
/* ফলাফল: নীল — কারণ #title সবচেয়ে বেশি পয়েন্ট পেয়েছে */
⚠️ সতর্কতা: ১০টা Class মিলিয়েও (১০০ পয়েন্ট) একটি ID (১০০ পয়েন্ট) এর
সমান হয়, কিন্তু একটি ID কখনো হারে না — কারণ গণনা আলাদা কলামে হয়।
সহজে বলতে গেলে: ID > Class > Element সবসময়।
🔷 ৩. !important — সর্বোচ্চ অগ্রাধিকার
কোনো CSS নিয়মের শেষে !important লিখলে সেটা
সমস্ত Specificity ও Source Order কে হারিয়ে দেয় — এটাই সর্বোচ্চ ক্ষমতা।
#title {
color: blue; /* 100 পয়েন্ট */
}
p {
color: red !important; /* মাত্র 1 পয়েন্ট, কিন্তু !important আছে */
}
/* ফলাফল: লাল — !important সব নিয়ম ভেঙে দেয় */
⚠️ !important কখন ব্যবহার করবে?
যতটা সম্ভব এড়িয়ে চলো। শুধু তখনই ব্যবহার করো যখন অন্য কোনো উপায় নেই — যেমন তৃতীয় পক্ষের লাইব্রেরির স্টাইল ওভাররাইড করতে হলে। বেশি
যতটা সম্ভব এড়িয়ে চলো। শুধু তখনই ব্যবহার করো যখন অন্য কোনো উপায় নেই — যেমন তৃতীয় পক্ষের লাইব্রেরির স্টাইল ওভাররাইড করতে হলে। বেশি
!important মানে কোড বোঝা ও ঠিক করা কঠিন হয়ে যায়।
✅ !important vs !important: দুটো নিয়মেই !important থাকলে?
তখন আবার Specificity দেখা হয় — বেশি পয়েন্টের !important জেতে।
🔷 ৪. Inheritance — বাবা-মা থেকে পাওয়া স্টাইল
কিছু CSS প্রপার্টি বাবা-মা এলিমেন্ট থেকে সন্তান এলিমেন্টে স্বয়ংক্রিয়ভাবে চলে আসে — এটাই Inheritance। সব প্রপার্টি inherit হয় না, শুধু নির্দিষ্ট কিছু।
কোন Property inherit হয়, কোনটা হয় না? Inheritance
| inherit হয় ✅ | inherit হয় না ❌ |
|---|---|
color |
margin |
font-family |
padding |
font-size |
border |
font-weight |
width / height |
line-height |
background-color |
text-align |
display |
/* Inheritance উদাহরণ */
body {
font-family: Arial, sans-serif; /* সব সন্তান এই ফন্ট পাবে */
color: #333; /* সব সন্তানের লেখার রঙ */
}
/* <body> এর ভেতরের সব <p>, <h1>, <span> — */
/* আলাদা না লিখলেও একই ফন্ট ও রঙ পাবে */
✅ Inheritance-এর সুবিধা:
body-তে একবার font-family লিখলে
পুরো পেজের সব এলিমেন্টে একই ফন্ট হয় — বারবার লিখতে হয় না।
🔷 ৫. inherit ও initial — বিশেষ কীওয়ার্ড
CSS-এ যেকোনো Property-র Value হিসেবে কিছু বিশেষ কীওয়ার্ড ব্যবহার করা যায়।
এর মধ্যে inherit ও initial সবচেয়ে বেশি কাজে লাগে —
এগুলো দিয়ে inheritance নিয়ন্ত্রণ করা হয়।
inherit — বাবা-মার মান জোর করে নাও
inherit
inherit লিখলে সেই Property-র মান বাবা-মা এলিমেন্ট থেকে জোর করে নিয়ে আসা
হয়।
এমনকি যে Property সাধারণত inherit হয় না (যেমন border, padding)
সেটাকেও inherit করানো সম্ভব।
/* বাবা এলিমেন্ট */
.parent {
color: darkblue;
border: 2px solid gray;
}
/* সন্তান এলিমেন্ট */
.child {
color: inherit; /* বাবার color নেবে → darkblue */
border: inherit; /* border সাধারণত inherit হয় না, কিন্তু এখন নেবে → 2px solid gray */
}
/* বাস্তব ব্যবহার — লিংকে বাবার রঙ আনা */
p {
color: #333;
}
p a {
color: inherit; /* ব্রাউজারের ডিফল্ট নীল না হয়ে বাবার #333 হবে */
text-decoration: none;
}
✅ কখন inherit ব্যবহার করবে?
যখন কোনো এলিমেন্ট বাবা-মার মান স্বয়ংক্রিয়ভাবে পাচ্ছে না, কিন্তু পাওয়া দরকার। সবচেয়ে বেশি কাজে লাগে: লিংকের রঙ, ফর্ম ইনপুটের ফন্ট বাবা থেকে নিতে।
যখন কোনো এলিমেন্ট বাবা-মার মান স্বয়ংক্রিয়ভাবে পাচ্ছে না, কিন্তু পাওয়া দরকার। সবচেয়ে বেশি কাজে লাগে: লিংকের রঙ, ফর্ম ইনপুটের ফন্ট বাবা থেকে নিতে।
initial — ব্রাউজারের ডিফল্টে ফিরে যাও
initial
initial লিখলে সেই Property-র মান ব্রাউজারের নিজস্ব ডিফল্টে ফিরে যায়।
বাবা-মার মান বা CSS ফাইলের মান — কোনোটাই থাকে না।
একদম শূন্য থেকে শুরু হয়।
/* বাবা-মা লাল রঙ দিয়েছে */
.parent {
color: red;
}
/* সন্তান সেটা বাতিল করে ব্রাউজারের ডিফল্টে ফিরবে */
.child {
color: initial; /* ব্রাউজারের ডিফল্ট → সাধারণত কালো */
}
/* বাস্তব উদাহরণ — font-weight রিসেট */
.bold-section {
font-weight: bold;
}
.bold-section .normal-text {
font-weight: initial; /* ব্রাউজারের ডিফল্ট → normal (400) */
}
⚠️ initial মানে "বাবা-মার ডিফল্ট" নয়:
initial সবসময় ব্রাউজারের ডিফল্ট দেয় — বাবা-মার মান নয়।
যেমন color: initial মানে কালো (ব্রাউজারের ডিফল্ট),
বাবা-মার color যাই হোক না কেন।
inherit বনাম initial — পার্থক্য
তুলনা
| বিষয় | inherit |
initial |
|---|---|---|
| মান কোথা থেকে আসে? | বাবা-মা এলিমেন্ট থেকে | ব্রাউজারের নিজস্ব ডিফল্ট থেকে |
| বাবা-মার স্টাইল? | হ্যাঁ — বাবা-মার মান নেয় | না — বাবা-মার মান উপেক্ষা করে |
| CSS ফাইলের স্টাইল? | উপেক্ষা করে, বাবার মান নেয় | উপেক্ষা করে, ব্রাউজারের মান নেয় |
| কাজে লাগে কখন? | বাবার স্টাইল সন্তানে আনতে | পুরানো স্টাইল সম্পূর্ণ বাতিল করতে |
উদাহরণ (color) |
বাবার রঙ যা-ই হোক, সেটা নেয় | সাধারণত কালো (ব্রাউজার ডিফল্ট) |
উদাহরণ (display) |
বাবার display নেয় | inline (ব্রাউজার ডিফল্ট) |
/* পার্থক্য একসাথে দেখা */
.parent {
color: purple;
font-size: 24px;
}
.child-a {
color: inherit; /* purple — বাবার রঙ নেবে */
font-size: inherit; /* 24px — বাবার আকার নেবে */
}
.child-b {
color: initial; /* কালো — ব্রাউজারের ডিফল্ট */
font-size: initial; /* 16px — ব্রাউজারের ডিফল্ট */
}
বোনাস: unset — দুটোর মিশ্রণ
unset
unset হলো একটি স্মার্ট কীওয়ার্ড — যে Property স্বাভাবিকভাবে
inherit হয় সেটায় inherit-এর মতো কাজ করে, আর যেটা হয় না সেটায়
initial-এর মতো কাজ করে।
.element {
color: unset; /* color inherit হয় → বাবার color নেবে (inherit-এর মতো) */
border: unset; /* border inherit হয় না → ব্রাউজার ডিফল্ট (initial-এর মতো) */
}
✅ তিনটি সহজে মনে রাখো:
inherit = "বাবার কাছ থেকে নাও" |
initial = "ব্রাউজারের ডিফল্টে ফিরে যাও" |
unset = "যা স্বাভাবিক তাই হোক"
🔷 সব একসাথে — বাস্তব উদাহরণ (ধাপে ধাপে বিশ্লেষণ)
/* CSS */
p { color: gray; } /* 1 পয়েন্ট */
.highlight { color: green; } /* 10 পয়েন্ট */
#intro { color: blue; } /* 100 পয়েন্ট */
p { color: purple; } /* 1 পয়েন্ট, কিন্তু পরে লেখা */
/* HTML */
<p id="intro" class="highlight">আমার রঙ কী?</p>
/* বিশ্লেষণ:
- p (gray) → 1 পয়েন্ট
- p (purple) → 1 পয়েন্ট, কিন্তু পরে লেখা তাই gray কে হারায়
- .highlight → 10 পয়েন্ট, purple কে হারায়
- #intro → 100 পয়েন্ট, সবাইকে হারায়
✅ ফলাফল: নীল (blue) */
/* এখন !important যোগ করলে: */
p { color: purple !important; } /* 1 পয়েন্ট, কিন্তু !important */
#intro { color: blue; } /* 100 পয়েন্ট */
/* ফলাফল: বেগুনি (purple) — !important সব নিয়ম ভেঙে জেতে */
🔷 দ্রুত রেফারেন্স — Cascading Order সারসংক্ষেপ
| ধারণা | মানে | উদাহরণ | অগ্রাধিকার |
|---|---|---|---|
| !important | জোর করে সর্বোচ্চ ক্ষমতা দেওয়া | color: red !important; |
🥇 সর্বোচ্চ |
| Inline Style | ট্যাগের ভেতরে সরাসরি স্টাইল | style="color:red" = 1000 পয়েন্ট |
🥈 |
| ID Selector | #id দিয়ে নির্দিষ্ট করা |
#header = 100 পয়েন্ট |
🥉 |
| Class Selector | .class দিয়ে নির্দিষ্ট করা |
.card = 10 পয়েন্ট |
চতুর্থ |
| Element Selector | ট্যাগের নাম দিয়ে নির্দিষ্ট করা | p = 1 পয়েন্ট |
পঞ্চম |
| Source Order | সমান পয়েন্টে পরে লেখাটা জেতে | নিচের নিয়ম উপরেরটা ওভাররাইট করে | ষষ্ঠ |
| Inheritance | বাবা-মা থেকে স্বয়ংক্রিয়ভাবে পাওয়া | body-র font-family সবাই পায় |
সর্বশেষ |
✅ সহজ মনে রাখার সূত্র:
!important > Inline > ID > Class > Element > Source Order > Inheritance
দ্বন্দ্ব হলে বাম দিকেরটা সবসময় জেতে।
!important > Inline > ID > Class > Element > Source Order > Inheritance
দ্বন্দ্ব হলে বাম দিকেরটা সবসময় জেতে।
📝 CSS Rules ও Comments — সম্পূর্ণ নোট
এই সেকশনে CSS Rule কীভাবে গঠিত হয়, Rule-এর প্রতিটি অংশ কী করে এবং Comments কীভাবে লিখতে হয় তা সহজ ভাষায় বোঝানো হয়েছে।
🔷 CSS Rule কী?
CSS-এ প্রতিটি স্টাইল নির্দেশনাকে CSS Rule বলে। একটি Rule মানে — "কোন এলিমেন্টকে (Selector), কীভাবে দেখাবে (Declaration)"।
সহজ ভাষায় — CSS Rule হলো একটি আদেশ।
যেমন: "সব h1 লেখা লাল রঙের এবং ৩২ পিক্সেল বড় হবে।"
⚠️ মনে রাখো: একটি ভুল সিনট্যাক্স (যেমন সেমিকোলন না দেওয়া বা
ব্র্যাকেট না বন্ধ করা) পুরো Rule-টি কাজ করা বন্ধ করে দিতে পারে।
ব্রাউজার ভুল Rule চুপচাপ এড়িয়ে যায় — কোনো এরর দেখায় না।
🔷 CSS Rule-এর গঠন — অংশগুলো কী কী?
/* ↓ Selector ↓ Declaration Block শুরু */
h1 {
color: red; /* ← Declaration (Property: Value) */
font-size: 32px;
}
/* ↑ Declaration Block শেষ */
Rule-এর প্রতিটি অংশ Anatomy
| অংশ | উদাহরণ | কাজ |
|---|---|---|
| Selector | h1 |
কোন HTML এলিমেন্টকে স্টাইল করবে তা বেছে নেয় |
| Declaration Block | { ... } |
সব Declaration ধারণ করে — curly brackets দিয়ে ঘেরা |
| Declaration | color: red; |
একটি Property ও তার Value মিলিয়ে একটি নির্দেশনা |
| Property | color |
কী পরিবর্তন করতে চাও — রঙ, আকার, ফন্ট ইত্যাদি |
| Value | red |
Property-র মান — কতটুকু বা কী হবে |
| Semicolon ( ; ) | color: red; |
প্রতিটি Declaration-এর শেষে দিতে হয় — পরেরটা শুরুর সংকেত |
| Colon ( : ) | color: red |
Property ও Value-এর মাঝখানে বিভাজক |
🔷 Declaration Block-এর নিয়মাবলী
একটি Rule-এ একাধিক Declaration Multiple
একটি Selector-এর জন্য একসাথে অনেকগুলো Declaration লেখা যায়। প্রতিটি Declaration আলাদা লাইনে লেখা ভালো অভ্যাস — পড়তে সহজ হয়।
h1 {
color: navy; /* রঙ */
font-size: 36px; /* আকার */
font-weight: bold; /* মোটা */
text-align: center; /* মাঝখানে */
letter-spacing: 2px; /* অক্ষরের মাঝে ফাঁক */
text-transform: uppercase; /* বড় হাতে */
}
একটি Rule-এ একাধিক Selector Grouping
একাধিক এলিমেন্টে একই স্টাইল দিতে হলে কমা ( , ) দিয়ে আলাদা করে একসাথে লেখো — এটাকে Selector Grouping বলে।
/* এভাবে আলাদা আলাদা লেখার দরকার নেই */
h1 { color: darkblue; }
h2 { color: darkblue; }
h3 { color: darkblue; }
/* এভাবে একসাথে লেখো — ফলাফল একই */
h1, h2, h3 {
color: darkblue;
}
✅ Grouping-এর সুবিধা: কোড ছোট থাকে, পরিবর্তন করতে হলে
একটি জায়গায় করলেই সব বদলে যায় — তিনটা জায়গায় না।
এক লাইনে বনাম একাধিক লাইনে Formatting
CSS Rule এক লাইনে বা একাধিক লাইনে — দুভাবেই লেখা যায়। ব্রাউজারের কাছে কোনো পার্থক্য নেই, তবে মানুষের পড়ার জন্য আলাদা লাইন ভালো।
/* এক লাইনে — ছোট Rule-এ ঠিক আছে */
p { color: gray; font-size: 16px; }
/* একাধিক লাইনে — বড় Rule-এ পড়তে সহজ ✅ */
p {
color: gray;
font-size: 16px;
line-height: 1.6;
}
🔷 Whitespace ও Indentation
CSS-এ অতিরিক্ত space, tab বা নতুন লাইন ব্রাউজার সম্পূর্ণ উপেক্ষা করে। তাই ইন্ডেন্টেশন দিয়ে কোড সাজালে পড়তে সহজ হয় — CSS-এর কোনো ক্ষতি নেই।
/* তিনটি লেখাই ব্রাউজারের কাছে একই */
/* ১. ঘন */
h1{color:red;font-size:32px;}
/* ২. স্বাভাবিক */
h1 { color: red; font-size: 32px; }
/* ৩. বিস্তারিত — সবচেয়ে পঠনযোগ্য ✅ */
h1 {
color: red;
font-size: 32px;
}
✅ পরামর্শ: Declaration-এর আগে সবসময় ২ বা ৪ স্পেস
ইন্ডেন্ট দাও। এটা পেশাদার কোড লেখার অভ্যাস।
🔷 CSS Comments কী?
Comment হলো কোডের ভেতরে লেখা ব্যাখ্যামূলক নোট। ব্রাউজার এটা সম্পূর্ণ উপেক্ষা করে — পেজের ডিজাইনে কোনো প্রভাব পড়ে না।
সহজ ভাষায় — Comment হলো তোমার নিজের জন্য চিরকুট। পরে কোড দেখলে বুঝতে পারবে কেন কী লিখেছিলে।
/* এটি একটি CSS Comment — ব্রাউজার দেখবে না */
h1 {
color: red; /* লেখা লাল রঙের */
}
🔷 CSS Comment লেখার নিয়ম ও ধরন
বা JavaScript-এর // ব্যবহার করলে কাজ করবে না। -->১. এক লাইনের Comment Single Line
/* হেডার সেকশনের স্টাইল */
header {
background-color: #1a1a2e;
padding: 20px; /* উপর-নিচে ২০ পিক্সেল ফাঁকা */
}
২. একাধিক লাইনের Comment Multi Line
/*
এই অংশে নেভিগেশন বারের সব স্টাইল আছে।
রঙ: গাঢ় নীল।
তৈরি: ফারিদ — ২০২৫ সালে।
*/
nav {
display: flex;
justify-content: space-between;
background-color: #16213e;
}
৩. Inline Comment — লাইনের পাশে Inline
.card {
width: 300px; /* কার্ডের প্রস্থ */
height: auto; /* উচ্চতা কন্টেন্ট অনুযায়ী */
border-radius: 12px; /* কোণ গোলাকার */
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* হালকা ছায়া */
}
৪. Section Comment — বড় কোডকে ভাগ করতে Section
বড় CSS ফাইলে বিভিন্ন অংশ সহজে খুঁজে পেতে Section Comment ব্যবহার করা হয়।
/* ================================
HEADER
================================ */
header { ... }
/* ================================
NAVIGATION
================================ */
nav { ... }
/* ================================
MAIN CONTENT
================================ */
main { ... }
/* ================================
FOOTER
================================ */
footer { ... }
🔷 Comment দিয়ে কোড সাময়িক বন্ধ করা
কোনো CSS নিয়ম সাময়িকভাবে বন্ধ করতে চাইলে মুছে না ফেলে Comment-এ ঢুকিয়ে দাও — এটাকে "Commenting Out" বলে। পরে আবার সহজে ফিরিয়ে আনা যাবে।
h1 {
color: red;
/* font-size: 48px; */ /* এই লাইন এখন কাজ করছে না */
font-weight: bold;
}
/* পুরো Rule বন্ধ করা */
/*
.old-button {
background-color: orange;
padding: 10px 20px;
border-radius: 4px;
}
*/
✅ কাজে লাগে কখন? কোনো স্টাইল কাজ করছে কিনা পরীক্ষা করতে,
অথবা পুরানো কোড সংরক্ষণ রাখতে — মুছে না ফেলে Comment করে রাখো।
🔷 সাধারণ ভুলগুলো — এড়িয়ে চলো
| ভুল | ভুল কোড ❌ | সঠিক কোড ✅ |
|---|---|---|
| সেমিকোলন না দেওয়া | color: red |
color: red; |
| কোলনের বদলে সমান চিহ্ন | color = red; |
color: red; |
| { } না বন্ধ করা | h1 { color: red; |
h1 { color: red; } |
| HTML Comment CSS-এ লেখা | <!-- এটা ভুল --> |
/* এটা সঠিক */ |
| Property বানান ভুল | font-size: 16px; |
font-size: 16px; |
⚠️ মনে রাখো: CSS-এ ভুল হলে ব্রাউজার কোনো এরর বার্তা দেখায় না।
শুধু সেই নিয়মটা কাজ করে না। তাই ব্রাউজারের DevTools (F12) খুলে
"Elements → Styles" ট্যাবে দেখো — ভুল Rule-এ কাটাকাটি চিহ্ন থাকবে।
🔷 দ্রুত রেফারেন্স — CSS Rule ও Comment
| বিষয় | নিয়ম / সিনট্যাক্স | উদাহরণ |
|---|---|---|
| CSS Rule | selector { property: value; } |
p { color: red; } |
| Declaration | property: value; |
font-size: 16px; |
| Selector Grouping | sel1, sel2 { } |
h1, h2 { color: blue; } |
| Comment | /* এখানে লেখো */ |
/* হেডার স্টাইল */ |
| Commenting Out | /* color: red; */ |
নিয়মটা আছে, কিন্তু কাজ করছে না |
| Section Comment | /* === HEADER === */ |
বড় ফাইলে অংশ চিহ্নিত করতে |
| Inline Comment | value; /* ব্যাখ্যা */ |
padding: 16px; /* উপর-নিচ */ |
✅ সেরা অভ্যাস (Best Practice):
কোড লেখার সময় নিয়মিত Comment লেখো — ভবিষ্যতে তুমি নিজেই ধন্যবাদ দেবে।
এবং সবসময় Declaration-এর শেষে সেমিকোলন দাও, এমনকি শেষটিতেও।
🎯 CSS Selectors — সম্পূর্ণ নোট
এই সেকশনে CSS-এর সব ধরনের Selector বিস্তারিতভাবে বোঝানো হয়েছে — কীভাবে HTML এলিমেন্ট বেছে নিতে হয় এবং কোন পরিস্থিতিতে কোনটা ব্যবহার করতে হয়।
🔷 Selector কী?
Selector হলো CSS Rule-এর প্রথম অংশ — যা দিয়ে বলা হয় "কোন HTML এলিমেন্টকে স্টাইল করতে চাই।" Selector ছাড়া CSS জানবেই না কোথায় স্টাইল লাগাতে হবে।
সহজ ভাষায় — Selector হলো একটি লক্ষ্যবস্তু চিহ্নিতকারী। তীর ছোড়ার আগে যেমন লক্ষ্য ঠিক করতে হয়, CSS দেওয়ার আগে তেমনি Selector দিয়ে এলিমেন্ট ঠিক করতে হয়।
⚠️ কেন ভালো করে জানা দরকার?
ভুল Selector মানে ভুল এলিমেন্টে স্টাইল যাবে — বা আদৌ যাবে না।
CSS কাজ না করলে প্রথমেই Selector ঠিক আছে কিনা যাচাই করো।
🔷 Selector-এর ধরনসমূহ — এক নজরে
| ধরন | উদাহরণ | কাজ |
|---|---|---|
| Basic | p, .card, #nav |
ট্যাগ, ক্লাস বা আইডি দিয়ে বেছে নেওয়া |
| Combinator | div p, ul > li |
এলিমেন্টের সম্পর্ক অনুযায়ী বেছে নেওয়া |
| Pseudo-class | a:hover, li:first-child |
অবস্থা বা অবস্থান অনুযায়ী বেছে নেওয়া |
| Pseudo-element | p::before, p::first-line |
এলিমেন্টের বিশেষ অংশ বেছে নেওয়া |
| Attribute | [type="email"] |
নির্দিষ্ট Attribute আছে এমন এলিমেন্ট |
🔷 ১. Basic Selectors — মূল ধরনগুলো
১.১ Element Selector Element
HTML ট্যাগের নাম সরাসরি লিখলে পেজের সব ঐ ট্যাগ বেছে নেওয়া হয়। এটাই সবচেয়ে সহজ Selector।
/* পেজের সব <p> ট্যাগ */
p {
color: #444;
font-size: 16px;
}
/* পেজের সব <h2> ট্যাগ */
h2 {
color: navy;
font-weight: bold;
}
⚠️ সতর্কতা: Element Selector পেজের সব ঐ ট্যাগে স্টাইল দেয়।
শুধু একটি নির্দিষ্ট
<p>-কে স্টাইল করতে চাইলে Class বা ID Selector ব্যবহার করো।
১.২ Class Selector Class
ডট . দিয়ে শুরু হয়। HTML-এ class="" দেওয়া
যেকোনো ট্যাগকে বেছে নিতে পারে। একই class একাধিক জায়গায় ব্যবহার করা যায়।
/* CSS */
.highlight {
background-color: yellow;
font-weight: bold;
}
/* HTML */
<p class="highlight">এটা হাইলাইটেড</p>
<span class="highlight">এটাও হাইলাইটেড</span>
✅ একটি এলিমেন্টে একাধিক Class: class-এর মান স্পেস দিয়ে আলাদা করো।
<p class="card highlight large"> — এই প্যারায় তিনটি class একসাথে।
১.৩ ID Selector ID
হ্যাশ # দিয়ে শুরু হয়। পেজে শুধুমাত্র একটি নির্দিষ্ট এলিমেন্ট বেছে নেয়।
একটি পেজে একই ID একবারই ব্যবহার করতে হয়।
/* CSS */
#main-header {
background-color: #1a1a2e;
color: white;
padding: 24px;
}
/* HTML */
<header id="main-header">আমার ওয়েবসাইট</header>
১.৪ Universal Selector Universal
তারকা চিহ্ন * দিলে পেজের সমস্ত এলিমেন্ট একসাথে বেছে নেওয়া হয়।
সাধারণত ডিফল্ট margin ও padding মুছতে ব্যবহার হয়।
/* সব এলিমেন্টের margin ও padding শূন্য করা */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* বক্স মডেল ঠিক রাখতে */
}
১.৫ Grouping Selector Grouping
কমা , দিয়ে একাধিক Selector আলাদা করলে একই স্টাইল
সবগুলোতে একসাথে প্রযোজ্য হয়।
/* তিনটি আলাদা Rule না লিখে একসাথে */
h1, h2, h3, h4 {
font-family: Georgia, serif;
color: #1a1a2e;
line-height: 1.3;
}
🔷 ২. Combinator Selectors — সম্পর্ক অনুযায়ী
২.১ Descendant Selector (স্পেস) Descendant
দুটি Selector-এর মাঝে স্পেস দিলে — প্রথম এলিমেন্টের ভেতরে যেকোনো গভীরে থাকা দ্বিতীয় এলিমেন্ট বেছে নেওয়া হয়।
/* div-এর ভেতরে যেকোনো জায়গায় থাকা সব p */
div p {
color: steelblue;
}
/* HTML */
<div>
<p>এটা ধরবে ✅</p> /* সরাসরি সন্তান */
<section>
<p>এটাও ধরবে ✅</p> /* নাতি — তবু ধরবে */
</section>
</div>
<p>এটা ধরবে না ❌</p> /* div-এর বাইরে */
২.২ Child Selector ( > ) Child
> চিহ্ন দিলে — প্রথম এলিমেন্টের সরাসরি সন্তান মাত্র বেছে নেয়।
আরো গভীরে (নাতি, পরনাতি) যায় না।
/* ul-এর সরাসরি li সন্তান */
ul > li {
list-style: none;
color: darkgreen;
}
/* HTML */
<ul>
<li>এটা ধরবে ✅</li> /* সরাসরি সন্তান */
<ol>
<li>এটা ধরবে না ❌</li> /* নাতি — ধরবে না */
</ol>
</ul>
২.৩ Adjacent Sibling Selector ( + ) Adjacent
+ চিহ্ন দিলে — প্রথম এলিমেন্টের ঠিক পরের একটি ভাই এলিমেন্ট বেছে নেয়।
একটির বেশি নয় — শুধু সাথে লাগা পরেরটা।
/* h2-এর ঠিক পরের p */
h2 + p {
font-size: 18px;
font-style: italic;
}
/* HTML */
<h2>শিরোনাম</h2>
<p>এটা ধরবে ✅</p> /* h2-এর ঠিক পরেরটা */
<p>এটা ধরবে না ❌</p> /* দুই নম্বর p — ধরবে না */
২.৪ General Sibling Selector ( ~ ) Sibling
~ চিহ্ন দিলে — প্রথম এলিমেন্টের পরের সব ভাই এলিমেন্ট বেছে নেয়।
শুধু একটি নয় — সব পরবর্তীগুলো।
/* h2-এর পরের সব p */
h2 ~ p {
color: gray;
}
/* HTML */
<h2>শিরোনাম</h2>
<p>এটা ধরবে ✅</p> /* প্রথম p */
<p>এটাও ধরবে ✅</p> /* দ্বিতীয় p */
<p>এটাও ধরবে ✅</p> /* তৃতীয় p — সবাই ধরবে */
✅ Combinator মনে রাখার উপায়:
স্পেস = যেকোনো গভীরে সন্তান |
স্পেস = যেকোনো গভীরে সন্তান |
> = সরাসরি সন্তান |
+ = পাশের একজন ভাই |
~ = পরের সব ভাই
🔷 ৩. Pseudo-class Selectors — অবস্থা অনুযায়ী
একটি কোলন : দিয়ে লেখা হয়। এলিমেন্টের
বিশেষ অবস্থা (যেমন hover, focus) বা
অবস্থান (যেমন প্রথম সন্তান) অনুযায়ী বেছে নেয়।
৩.১ ব্যবহারকারীর কাজ অনুযায়ী User Action
/* মাউস উপরে গেলে */
button:hover {
background-color: darkblue;
cursor: pointer;
}
/* ক্লিক করার মুহূর্তে */
button:active {
transform: scale(0.97);
}
/* ইনপুটে কার্সর গেলে */
input:focus {
border-color: blue;
outline: none;
}
/* লিংক ভিজিট করা না হলে */
a:link { color: blue; }
/* লিংক আগে ভিজিট করা হলে */
a:visited { color: purple; }
৩.২ অবস্থান অনুযায়ী Structural
/* প্রথম সন্তান */
li:first-child {
font-weight: bold;
color: navy;
}
/* শেষ সন্তান */
li:last-child {
border-bottom: none;
}
/* তৃতীয় সন্তান */
li:nth-child(3) {
background-color: #f0f4ff;
}
/* জোড় সংখ্যার সন্তান (2, 4, 6...) — টেবিলের ডোরাকাটা */
tr:nth-child(even) {
background-color: #f9f9f9;
}
/* বিজোড় সংখ্যার সন্তান (1, 3, 5...) */
tr:nth-child(odd) {
background-color: #ffffff;
}
/* .active বাদ দিয়ে বাকি সব বোতাম */
button:not(.active) {
opacity: 0.6;
}
✅ :nth-child() ফর্মুলা:
:nth-child(2n) = প্রতিটি জোড় সংখ্যা |
:nth-child(2n+1) = প্রতিটি বিজোড় |
:nth-child(3n) = প্রতিটি তৃতীয়টি
🔷 ৪. Pseudo-element Selectors — বিশেষ অংশ
দুটো কোলন :: দিয়ে লেখা হয়। এলিমেন্টের
একটি বিশেষ অংশকে আলাদা করে স্টাইল দেওয়া যায়।
৪.১ ::before ও ::after before / after
এলিমেন্টের আগে বা পরে HTML না বদলেই কিছু যোগ করা যায়।
content প্রপার্টি দিতে হবে — খালি হলেও।
/* h2-এর আগে একটি নীল দাগ যোগ */
h2::before {
content: ""; /* content ছাড়া কাজ করে না */
display: inline-block;
width: 4px;
height: 20px;
background-color: blue;
margin-right: 8px;
}
/* প্রতিটি লিংকের পরে তীর চিহ্ন */
a::after {
content: " →";
color: gray;
}
৪.২ ::first-line ও ::first-letter Typography
/* প্রথম লাইন মোটা */
p::first-line {
font-weight: bold;
color: navy;
}
/* প্রথম অক্ষর বড় — পত্রিকার ড্রপ ক্যাপ */
p::first-letter {
font-size: 3em;
font-weight: bold;
float: left;
line-height: 1;
margin-right: 4px;
color: darkred;
}
৪.৩ ::selection Selection
/* লেখা সিলেক্ট করলে কাস্টম রঙ */
::selection {
background-color: #1a73e8;
color: white;
}
🔷 ৫. Attribute Selectors — Attribute অনুযায়ী
বর্গ ব্র্যাকেট [ ] দিয়ে লেখা হয়। HTML এলিমেন্টের
Attribute দেখে বেছে নেওয়া যায়।
| Selector | মানে | উদাহরণ |
|---|---|---|
[href] |
href attribute আছে এমন সব এলিমেন্ট | সব লিংক |
[type="text"] |
type ঠিক "text" এমন | টেক্সট ইনপুট |
[href^="https"] |
href "https" দিয়ে শুরু | সিকিউর লিংক |
[href$=".pdf"] |
href ".pdf" দিয়ে শেষ | PDF লিংক |
[class*="btn"] |
class-এ "btn" আছে | .btn, .btn-primary, .btn-large |
/* সব টেক্সট ইনপুট */
input[type="text"] {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px;
}
/* https দিয়ে শুরু লিংকে তালা আইকন */
a[href^="https"]::before {
content: "🔒 ";
}
/* PDF লিংকে আইকন */
a[href$=".pdf"]::after {
content: " (PDF)";
font-size: 12px;
color: red;
}
🔷 দ্রুত রেফারেন্স — সব Selector এক জায়গায়
| Selector | উদাহরণ | কাজ | Specificity |
|---|---|---|---|
| Element | p |
সব <p> ট্যাগ | 1 পয়েন্ট |
| Class | .card |
class="card" আছে এমন সব | 10 পয়েন্ট |
| ID | #header |
id="header" শুধু একটি | 100 পয়েন্ট |
| Universal | * |
সব এলিমেন্ট | 0 পয়েন্ট |
| Grouping | h1, h2 |
h1 ও h2 উভয় | আলাদা আলাদা |
| Descendant | div p |
div-এর ভেতরের সব p | যোগ হয় |
| Child | ul > li |
ul-এর সরাসরি li সন্তান | যোগ হয় |
| Adjacent | h2 + p |
h2-এর ঠিক পরের একটি p | যোগ হয় |
| Sibling | h2 ~ p |
h2-এর পরের সব p | যোগ হয় |
| Pseudo-class | a:hover |
hover অবস্থায় a | 10 পয়েন্ট |
| Pseudo-element | p::before |
p-এর আগের অংশ | 1 পয়েন্ট |
| Attribute | [type="email"] |
type="email" আছে এমন | 10 পয়েন্ট |
✅ কোনটা কখন ব্যবহার করবে:
সব একই ধরনের এলিমেন্ট → Element Selector |
একাধিক এলিমেন্টে একই স্টাইল → Class Selector |
পেজের একটিমাত্র এলিমেন্ট → ID Selector |
ব্যবহারকারীর ইন্টারঅ্যাকশন → Pseudo-class
✍️ CSS Text Styling — সম্পূর্ণ নোট
এই সেকশনে CSS দিয়ে লেখার রঙ, আকার, ফন্ট, সারিবদ্ধতা, সজ্জা এবং ফাঁকাজায়গা — সব ধরনের টেক্সট স্টাইলিং সহজ ভাষায় বোঝানো হয়েছে।
🔷 Text Styling কী?
Text Styling মানে CSS দিয়ে পেজের লেখার চেহারা নিয়ন্ত্রণ করা — রঙ, আকার, ফন্ট পরিবার, মোটা-পাতলা, সারিবদ্ধতা, সজ্জা এবং ফাঁকা জায়গা সব কিছু।
সহজ ভাষায় — একটি ওয়েবসাইটের লেখা পত্রিকার মতো সুন্দর বা বইয়ের মতো পাঠযোগ্য করতে যা যা লাগে, সব Text Styling-এর মধ্যে পড়ে।
⚠️ মনে রাখো: ভালো Text Styling শুধু সৌন্দর্যের জন্য নয় —
সঠিক
font-size, line-height ও color ছাড়া
লেখা পড়তে কষ্ট হয়। ব্যবহারযোগ্যতা (readability) Text Styling-এর মূল লক্ষ্য।
🔷 ১. color — লেখার রঙ
color Property দিয়ে লেখার রঙ নিয়ন্ত্রণ করা হয়।
ব্যাকগ্রাউন্ডের রঙ নয় — শুধু টেক্সটের রঙ।
p {
color: red; /* নাম দিয়ে */
color: #e63946; /* Hex Code — সবচেয়ে বেশি ব্যবহৃত */
color: rgb(230, 57, 70); /* RGB */
color: rgba(230, 57, 70, 0.8); /* RGBA — ৮০% অপাক */
color: hsl(356, 78%, 56%); /* HSL */
}
✅ পরামর্শ: পেজের মূল লেখার রঙ সাধারণত বিশুদ্ধ কালো (
#000) না দিয়ে
একটু নরম গাঢ় (#1a1a1a বা #333) দেওয়া ভালো —
চোখে আরামদায়ক লাগে।
🔷 ২. font-family — ফন্ট পরিবার
font-family দিয়ে কোন ফন্ট ব্যবহার হবে তা ঠিক করা হয়।
একাধিক ফন্ট কমা দিয়ে লেখা যায় — প্রথমটা ব্যবহারকারীর ডিভাইসে না থাকলে
পরেরটা চেষ্টা করে। এটাকে Font Stack বলে।
body {
/* Font Stack: প্রথমটা না থাকলে পরেরটা, তারপর generic */
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
font-family: Georgia, "Times New Roman", serif;
}
code {
font-family: "Courier New", Courier, monospace;
}
Generic Font Family — শেষ নিরাপত্তা Generic
| Generic Family | ধরন | কখন ব্যবহার করবে | উদাহরণ ফন্ট |
|---|---|---|---|
sans-serif |
সরল রেখার ফন্ট | সাধারণ লেখা, UI — সবচেয়ে বেশি ব্যবহৃত | Arial, Helvetica |
serif |
পা-যুক্ত ফন্ট | দীর্ঘ লেখা, ক্লাসিক চেহারা | Georgia, Times New Roman |
monospace |
সমান প্রস্থের ফন্ট | কোড বা টার্মিনাল দেখাতে | Courier New, Consolas |
cursive |
হাতের লেখার মতো | সাজসজ্জামূলক শিরোনাম | Brush Script MT |
fantasy |
সজ্জামূলক ফন্ট | বিশেষ সাজসজ্জা | Impact, Papyrus |
Google Fonts — বিনামূল্যে যেকোনো ফন্ট Google Fonts
ব্যবহারকারীর ডিভাইসে নেই এমন ফন্ট ব্যবহার করতে Google Fonts ব্যবহার করো।
fonts.google.com থেকে পছন্দের ফন্ট বেছে HTML-এ যুক্ত করো।
/* ১. HTML <head>-এ লিংক যোগ করো */
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet">
/* ২. CSS-এ ব্যবহার করো */
body {
font-family: "Roboto", sans-serif;
}
🔷 ৩. font-size — ফন্টের আকার
font-size দিয়ে লেখার আকার নিয়ন্ত্রণ করা হয়।
বিভিন্ন একক ব্যবহার করা যায় — প্রতিটির আলাদা ব্যবহার আছে।
| একক | মানে | উদাহরণ | কখন ব্যবহার করবে |
|---|---|---|---|
px |
নির্দিষ্ট পিক্সেল — সবসময় একই | 16px |
নির্দিষ্ট আকার দরকার হলে |
em |
বাবা এলিমেন্টের আকারের গুণিতক | 1.5em = বাবার ১.৫ গুণ |
বাবার উপর নির্ভরশীল আকারে |
rem |
root (html) এলিমেন্টের গুণিতক |
1rem = সাধারণত ১৬px |
পুরো পেজে সামঞ্জস্যপূর্ণ আকারে ✅ |
% |
বাবার font-size-এর শতাংশ | 120% = বাবার ১.২ গুণ |
আপেক্ষিক আকারে |
vw |
ভিউপোর্ট (স্ক্রিন) প্রস্থের শতাংশ | 5vw |
স্ক্রিন অনুযায়ী বদলাবে এমন |
html { font-size: 16px; } /* root: 1rem = 16px */
body { font-size: 1rem; } /* 16px */
h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; } /* 32px */
h3 { font-size: 1.5rem; } /* 24px */
p { font-size: 1rem; } /* 16px */
small{ font-size: 0.875rem;}/* 14px */
✅ rem ব্যবহার করো:
rem সবচেয়ে নির্ভরযোগ্য একক।
html { font-size: 16px; } সেট করলে বাকি সব rem-এ লিখলে
পুরো পেজের ফন্ট আকার একটি জায়গা থেকে নিয়ন্ত্রণ করা যায়।
🔷 ৪. font-weight ও font-style — মোটা ও কাত
font-weight — মোটা বা পাতলা Weight
font-weight দিয়ে ফন্ট কতটা মোটা বা পাতলা হবে তা ঠিক করা হয়।
কীওয়ার্ড বা সংখ্যা — দুভাবেই লেখা যায়।
p { font-weight: normal; } /* ডিফল্ট — সংখ্যায় 400 */
p { font-weight: bold; } /* মোটা — সংখ্যায় 700 */
p { font-weight: lighter; } /* বাবার চেয়ে পাতলা */
p { font-weight: bolder; } /* বাবার চেয়ে মোটা */
/* সংখ্যায় — ১০০ থেকে ৯০০ (১০০-এর গুণিতক) */
p { font-weight: 100; } /* সবচেয়ে পাতলা */
p { font-weight: 400; } /* normal */
p { font-weight: 700; } /* bold */
p { font-weight: 900; } /* সবচেয়ে মোটা */
font-style — কাত (Italic) Style
p { font-style: normal; } /* স্বাভাবিক */
p { font-style: italic; } /* কাত — সবচেয়ে বেশি ব্যবহৃত */
p { font-style: oblique; } /* জোর করে কাত */
✅ italic কখন ব্যবহার করবে? বই বা নিবন্ধের নাম, বিদেশি শব্দ,
উদ্ধৃতি বা বিশেষ জোর দিতে italic ব্যবহার করা হয়।
🔷 ৫. text-align — লেখার সারিবদ্ধতা
text-align দিয়ে লেখা বাম, ডান, মাঝ বা দুই পাশে সমান
করা হয়। এটি Block এলিমেন্টে কাজ করে।
.left { text-align: left; } /* বামে — ডিফল্ট */
.center { text-align: center; } /* মাঝখানে */
.right { text-align: right; } /* ডানে */
.justify { text-align: justify; } /* দুই পাশে সমান — পত্রিকার মতো */
| মান | লেখার অবস্থান | কখন ব্যবহার করবে |
|---|---|---|
left |
বাম দিকে সারিবদ্ধ | সাধারণ লেখা — ডিফল্ট ✅ |
center |
মাঝখানে সারিবদ্ধ | শিরোনাম, বোতাম, হিরো সেকশন |
right |
ডান দিকে সারিবদ্ধ | তারিখ, মূল্য, ডান-থেকে-বাম ভাষা |
justify |
দুই পাশে সমান | পত্রিকা বা বইয়ের মতো দীর্ঘ অনুচ্ছেদ |
🔷 ৬. text-decoration — সজ্জারেখা
text-decoration দিয়ে লেখার নিচে, উপরে বা মাঝখানে রেখা
দেওয়া বা সরানো যায়। লিংকের underline বাতিল করতে সবচেয়ে বেশি ব্যবহৃত।
a { text-decoration: none; } /* রেখা নেই — লিংকের underline সরাতে */
p { text-decoration: underline; } /* নিচে রেখা */
p { text-decoration: overline; } /* উপরে রেখা */
p { text-decoration: line-through; } /* মাঝখানে রেখা — কাটা দাগ */
Shorthand — রেখার রঙ ও ধরন Shorthand
/* text-decoration: রেখার-ধরন স্টাইল রঙ পুরুত্ব */
a {
text-decoration: underline dotted red 2px;
}
p {
text-decoration: underline wavy #e63946;
}
/* আলাদা আলাদাভাবেও লেখা যায় */
a {
text-decoration-line: underline;
text-decoration-style: dashed; /* solid, dashed, dotted, wavy, double */
text-decoration-color: blue;
text-decoration-thickness: 2px;
}
🔷 ৭. text-transform — বড়-ছোট হাতে রূপান্তর
text-transform দিয়ে HTML না বদলেই লেখা বড় বা ছোট হাতে
দেখানো যায়। নেভিগেশন বা বোতামের লেখা বড় হাতে দেখাতে খুব কাজে লাগে।
.upper { text-transform: uppercase; } /* সব বড় → HELLO WORLD */
.lower { text-transform: lowercase; } /* সব ছোট → hello world */
.cap { text-transform: capitalize; } /* প্রথম অক্ষর বড় → Hello World */
.none { text-transform: none; } /* যেমন আছে তেমন — ডিফল্ট */
✅ বাস্তব ব্যবহার: নেভিগেশন লিংক, বোতাম বা ট্যাগলাইনে
text-transform: uppercase দিলে ডিজাইন আরো পরিষ্কার দেখায় —
HTML-এ সব বড় হাতে লেখার দরকার নেই।
🔷 ৮. line-height ও letter-spacing — ফাঁকা জায়গা
line-height — লাইনের মাঝের উচ্চতা Line Height
line-height দিয়ে দুটি লাইনের মাঝের উচ্চতা নিয়ন্ত্রণ করা হয়।
ইউনিট ছাড়া শুধু সংখ্যা দেওয়া সবচেয়ে ভালো পদ্ধতি।
/* ইউনিট ছাড়া — font-size-এর গুণিতক (সবচেয়ে ভালো ✅) */
p { line-height: 1.6; } /* font-size যাই হোক, তার ১.৬ গুণ উচ্চতা */
/* px এবং em দিয়েও লেখা যায় */
p { line-height: 28px; }
p { line-height: 1.8em; }
/* সাধারণ নির্দেশিকা */
body h1 { line-height: 1.2; } /* শিরোনাম — একটু টাইট */
body p { line-height: 1.6; } /* অনুচ্ছেদ — পড়তে আরামদায়ক */
letter-spacing — অক্ষরের মাঝের ফাঁক Letter Spacing
letter-spacing দিয়ে প্রতিটি অক্ষরের মাঝের ফাঁক বাড়ানো বা কমানো যায়।
ধনাত্মক মানে ফাঁক বাড়ে, ঋণাত্মক মানে কমে।
h1 { letter-spacing: 3px; } /* অক্ষর দূরে দূরে — মার্জিত দেখায় */
p { letter-spacing: 0.5px; } /* হালকা বাড়ানো */
p { letter-spacing: -1px; } /* অক্ষর কাছাকাছি */
p { letter-spacing: normal; } /* ডিফল্ট */
word-spacing — শব্দের মাঝের ফাঁক Word Spacing
p { word-spacing: 4px; } /* শব্দের মাঝে বাড়তি ফাঁক */
p { word-spacing: -2px; } /* শব্দের মাঝে কম ফাঁক */
p { word-spacing: normal; } /* ডিফল্ট */
🔷 ৯. text-indent ও text-shadow
text-indent — প্রথম লাইনে ইন্ডেন্ট Indent
text-indent দিয়ে অনুচ্ছেদের প্রথম লাইনকে ভেতরে নেওয়া যায় —
বইয়ের মতো চেহারার জন্য।
p { text-indent: 2em; } /* প্রথম লাইন ২em ভেতরে */
p { text-indent: 40px; } /* নির্দিষ্ট পিক্সেলে */
p { text-indent: -20px; } /* Hanging Indent — প্রথম লাইন বামে */
text-shadow — লেখায় ছায়া Shadow
text-shadow দিয়ে লেখার পেছনে ছায়া দেওয়া যায়।
চারটি মান: x-অফসেট y-অফসেট blur রঙ।
/* text-shadow: x-offset y-offset blur color */
h1 { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } /* হালকা ছায়া */
h1 { text-shadow: 0 0 10px #1a73e8; } /* Glow effect */
h1 { text-shadow: 3px 3px 0 navy; } /* Hard shadow */
/* একাধিক ছায়া — কমা দিয়ে আলাদা করো */
h1 {
text-shadow:
1px 1px 0 navy,
2px 2px 0 darkblue,
3px 3px 0 #1a73e8;
}
✅ text-shadow মানে রাখার উপায়:
"ডানে যাও → নিচে যাও → ঝাপসা হও → রঙ নাও" —
এই ক্রমেই চারটি মান লেখো।
🔷 ১০. direction — লেখার দিক (বাম থেকে ডান / ডান থেকে বাম)
direction Property দিয়ে লেখা কোন দিক থেকে শুরু হবে তা ঠিক করা হয়।
বাংলা ও ইংরেজি বাম থেকে ডানে (ltr), আর আরবি ও হিব্রু ডান থেকে বামে (rtl) লেখা
হয়।
ltr ও rtl — দুটি মান Direction
| মান | পুরো নাম | লেখার দিক | কোন ভাষায় |
|---|---|---|---|
ltr |
Left to Right | বাম → ডান | বাংলা, ইংরেজি, হিন্দি — ডিফল্ট ✅ |
rtl |
Right to Left | ডান → বাম | আরবি, হিব্রু, উর্দু, ফার্সি |
/* ডিফল্ট — বাম থেকে ডান */
p {
direction: ltr;
}
/* আরবি বা উর্দু কন্টেন্টের জন্য */
.arabic-text {
direction: rtl;
font-family: "Amiri", serif;
}
/* পুরো পেজ RTL করতে */
html {
direction: rtl;
}
direction বনাম text-align — পার্থক্য তুলনা
direction ও text-align দুটো আলাদা কাজ করে —
একসাথে ব্যবহার করলে সতর্ক থাকতে হবে।
| Property | কী নিয়ন্ত্রণ করে | উদাহরণ |
|---|---|---|
direction |
লেখার প্রবাহ — কন্টেন্ট কোথা থেকে শুরু, স্ক্রলবার কোথায় | direction: rtl → পুরো layout উল্টে যায় |
text-align |
শুধু লেখার অবস্থান — বাম, ডান বা মাঝে | text-align: right → লেখা ডানে, layout একই |
/* direction: rtl → লেখা ডান থেকে শুরু, layout উল্টায় */
.rtl-block {
direction: rtl;
}
/* text-align: right → শুধু লেখা ডানে, layout একই */
.right-text {
text-align: right;
}
/* আরবি কন্টেন্টের জন্য সম্পূর্ণ সঠিক পদ্ধতি */
.arabic-section {
direction: rtl;
text-align: right; /* rtl-এ start মানেই ডান */
}
⚠️ direction শুধু CSS-এ নয়: বহুভাষিক পেজে
সঠিক পদ্ধতি:
direction
HTML-এর dir attribute-এর সাথে মিলিয়ে ব্যবহার করো।
শুধু CSS দিলে Screen Reader ও Accessibility সঠিকভাবে কাজ নাও করতে পারে।সঠিক পদ্ধতি:
<p dir="rtl"> HTML-এ + direction: rtl; CSS-এ।
unicode-bidi — মিশ্র ভাষার লেখায় unicode-bidi
একই লাইনে বাংলা ও আরবি মিশিয়ে লিখলে ব্রাউজার নিজে থেকে দিক বোঝার চেষ্টা করে।
unicode-bidi দিয়ে সেই আচরণ নিয়ন্ত্রণ করা যায়।
/* একটি span-কে rtl কন্টেন্ট হিসেবে আলাদা করা */
.arabic-word {
direction: rtl;
unicode-bidi: embed; /* নিজস্ব দিকে চলবে, বাইরে প্রভাব নেই */
}
/* জোর করে দিক দেওয়া — সব ক্যারেক্টার ঐ দিকে যাবে */
.force-rtl {
direction: rtl;
unicode-bidi: bidi-override;
}
/* বাইরের দিক থেকে সম্পূর্ণ আলাদা */
.isolated {
unicode-bidi: isolate;
}
✅ বাংলাদেশের প্রেক্ষাপটে: বাংলা পেজে আরবি দোয়া বা উর্দু উদ্ধৃতি
দেখাতে হলে ঐ নির্দিষ্ট
<span> বা <p>-তে
direction: rtl ও unicode-bidi: embed দাও —
পুরো পেজের layout নষ্ট হবে না।
🔷 ১১. white-space — ফাঁকা জায়গার নিয়ম
white-space দিয়ে ব্রাউজার অতিরিক্ত স্পেস ও লাইন ব্রেক
কীভাবে সামলাবে তা নিয়ন্ত্রণ করা হয়।
| মান | কাজ | কখন ব্যবহার করবে |
|---|---|---|
normal |
অতিরিক্ত স্পেস মুছে, প্রয়োজনে ভাঙে | ডিফল্ট — সাধারণ লেখায় |
nowrap |
লেখা এক লাইনে রাখে, ভাঙে না | বোতামের লেখা, নেভিগেশন লিংক |
pre |
সব স্পেস ও নতুন লাইন হুবহু রাখে | কোড বা ফরম্যাটেড টেক্সট দেখাতে |
pre-wrap |
স্পেস রাখে, প্রয়োজনে ভাঙে | চ্যাটের মেসেজ বা কমেন্ট বক্স |
pre-line |
নতুন লাইন রাখে, অতিরিক্ত স্পেস মুছে | কবিতা বা মাল্টিলাইন লেখা |
/* বোতামের লেখা এক লাইনে রাখো */
.btn {
white-space: nowrap;
}
/* কোড ব্লক */
pre {
white-space: pre;
font-family: monospace;
}
🔷 দ্রুত রেফারেন্স — সব Text Styling Property এক জায়গায়
| Property | কাজ | সাধারণ মান / উদাহরণ |
|---|---|---|
| color | লেখার রঙ | #333, rgb(0,0,0) |
| font-family | ফন্ট পরিবার | "Segoe UI", sans-serif |
| font-size | ফন্টের আকার | 1rem, 16px |
| font-weight | মোটা বা পাতলা | normal, bold, 700 |
| font-style | কাত (italic) | normal, italic |
| text-align | লেখার সারিবদ্ধতা | left, center, justify |
| text-decoration | রেখা (আন্ডারলাইন, কাটা) | none, underline, line-through |
| text-transform | বড়-ছোট হাতে রূপান্তর | uppercase, capitalize |
| line-height | লাইনের উচ্চতা | 1.6, 1.8 |
| letter-spacing | অক্ষরের ফাঁক | 1px, 0.05em |
| word-spacing | শব্দের ফাঁক | 4px, normal |
| text-indent | প্রথম লাইনের ইন্ডেন্ট | 2em, 40px |
| text-shadow | লেখায় ছায়া | 2px 2px 4px rgba(0,0,0,0.3) |
| direction | লেখার দিক (বাম/ডান থেকে) | ltr, rtl |
| unicode-bidi | মিশ্র ভাষার দিক নিয়ন্ত্রণ | embed, bidi-override, isolate |
| white-space | স্পেস ও লাইন ব্রেকের নিয়ম | normal, nowrap, pre |
✅ পঠনযোগ্য লেখার সূত্র:
font-size: 1rem +
line-height: 1.6 +
color: #333 +
font-family: sans-serif —
এই চারটি দিলেই লেখা চোখে আরামদায়ক হয়।
🔤 CSS Fonts — সম্পূর্ণ নোট
এই সেকশনে CSS-এর সব Font সংক্রান্ত Property, Generic Family, Web Safe Fonts, Google Fonts, @font-face এবং Font Shorthand বিস্তারিত ব্যাখ্যা সহ বোঝানো হয়েছে।
🔷 CSS Fonts কী?
Font হলো লেখার নকশা বা চেহারা — অক্ষরগুলো কেমন দেখাবে তা। CSS-এ Font সংক্রান্ত বিভিন্ন Property দিয়ে লেখার পরিবার, আকার, মোটা-পাতলা, কাত, প্রসারণ — সব কিছু নিয়ন্ত্রণ করা যায়।
সহজ ভাষায় — ফন্ট হলো একটি ওয়েবসাইটের হাতের লেখা। সঠিক ফন্ট বেছে না নিলে পেজ পড়তে কষ্ট হয়, সুন্দর দেখায় না।
⚠️ মনে রাখো: ব্যবহারকারীর ডিভাইসে ফন্টটা থাকতে হবে — না থাকলে
ব্রাউজার পরের ফন্ট বা Generic Family ব্যবহার করবে। তাই সবসময়
Font Stack দাও এবং শেষে একটি Generic Family রাখো।
🔷 ১. font-family — ফন্ট পরিবার
font-family Property দিয়ে কোন ফন্ট ব্যবহার হবে তা ঠিক করা হয়।
কমা দিয়ে একাধিক ফন্ট লেখা যায় — ব্রাউজার উপর থেকে একে একে চেষ্টা করে,
যেটা পাবে সেটাই ব্যবহার করবে।
/* একটি ফন্ট */
body {
font-family: Arial;
}
/* Font Stack — একাধিক ফন্ট, শেষে Generic */
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
/* ফন্টের নামে স্পেস থাকলে উদ্ধৃতি চিহ্ন দিতে হয় */
h1 {
font-family: "Times New Roman", Georgia, serif;
}
/* কোড বা terminal-এর জন্য */
code {
font-family: "Courier New", Courier, "Lucida Console", monospace;
}
Font Stack কীভাবে কাজ করে? Font Stack
ব্রাউজার Font Stack এভাবে পড়ে:
font-family: "Segoe UI", Tahoma, sans-serif;
/*
ধাপ ১: "Segoe UI" আছে? → হ্যাঁ (Windows-এ) → ব্যবহার করো ✅
না থাকলে ↓
ধাপ ২: "Tahoma" আছে? → হ্যাঁ → ব্যবহার করো ✅
না থাকলে ↓
ধাপ ৩: sans-serif → ব্রাউজার নিজে একটি বেছে নেয় ✅ (সবসময় পাওয়া যায়)
*/
✅ Font Stack-এর নিয়ম:
প্রথমে → তোমার পছন্দের ফন্ট | মাঝে → মিলের কাছাকাছি ফন্ট | শেষে → Generic Family (অবশ্যই দিতে হবে)
প্রথমে → তোমার পছন্দের ফন্ট | মাঝে → মিলের কাছাকাছি ফন্ট | শেষে → Generic Family (অবশ্যই দিতে হবে)
🔷 ২. Generic Font Families — পাঁচটি বড় ভাগ
CSS-এ পাঁচটি Generic Font Family আছে। ব্রাউজার এই শ্রেণীর মধ্যে থেকে নিজে একটা উপযুক্ত ফন্ট বেছে নেয় — তাই সবসময় পাওয়া যায়।
১. sans-serif — পা ছাড়া ফন্ট sans-serif
অক্ষরের শেষে কোনো সজ্জার রেখা নেই — পরিষ্কার ও আধুনিক চেহারা। স্ক্রিনে পড়তে সবচেয়ে সহজ — ওয়েবে সর্বাধিক ব্যবহৃত।
body { font-family: Arial, Helvetica, sans-serif; }
/* পরিচিত sans-serif ফন্ট */
/* Arial, Helvetica, Verdana, Tahoma, Trebuchet MS,
Segoe UI, Geneva, Calibri, Gill Sans */
২. serif — পা-যুক্ত ফন্ট serif
প্রতিটি অক্ষরের শেষে ছোট সজ্জার রেখা (serif) আছে। ক্লাসিক ও ঐতিহ্যবাহী চেহারা — বই, পত্রিকা বা আনুষ্ঠানিক পেজে ব্যবহার হয়।
h1 { font-family: Georgia, "Times New Roman", serif; }
/* পরিচিত serif ফন্ট */
/* Georgia, "Times New Roman", "Palatino Linotype",
Garamond, Baskerville, "Book Antiqua" */
৩. monospace — সমান প্রস্থের ফন্ট monospace
প্রতিটি অক্ষর সমান প্রস্থ নেয় — "i" এবং "w" একই জায়গায় থাকে। কোড, terminal বা কারিগরি লেখায় ব্যবহার হয়।
code { font-family: "Courier New", Courier, monospace; }
/* পরিচিত monospace ফন্ট */
/* "Courier New", Courier, Consolas, "Lucida Console",
Monaco, "Andale Mono" */
৪. cursive — হাতের লেখার মতো cursive
হাতের লেখার মতো প্রবাহমান ফন্ট। সাজসজ্জামূলক শিরোনাম বা বিশেষ সেকশনে ব্যবহার হয় — দীর্ঘ লেখায় পড়তে কঠিন।
.signature { font-family: "Brush Script MT", cursive; }
/* পরিচিত cursive ফন্ট */
/* "Brush Script MT", "Comic Sans MS", Pacifico (Google) */
৫. fantasy — সজ্জামূলক ফন্ট fantasy
অলংকারিক ও সজ্জামূলক ফন্ট। ব্রাউজারভেদে ভিন্ন দেখায় — সাধারণত এড়িয়ে চলো।
.special { font-family: Impact, fantasy; }
Generic Family তুলনা সারণি তুলনা
| Generic Family | চেহারা | সেরা ব্যবহার | পরিচিত ফন্ট |
|---|---|---|---|
sans-serif |
পরিষ্কার, সরল রেখা | মূল লেখা, UI — সবচেয়ে বেশি ✅ | Arial, Helvetica, Verdana |
serif |
পা-যুক্ত, ক্লাসিক | শিরোনাম, আনুষ্ঠানিক পেজ | Georgia, Times New Roman |
monospace |
সমান প্রস্থ | কোড, terminal লেখা | Courier New, Consolas |
cursive |
হাতের লেখার মতো | সাজসজ্জামূলক শিরোনাম | Brush Script MT |
fantasy |
অলংকারিক | বিশেষ সজ্জা (এড়িয়ে চলো) | Impact |
🔷 ৩. Web Safe Fonts — নিরাপদ ফন্ট
Web Safe Fonts হলো এমন ফন্ট যেগুলো প্রায় সব ডিভাইস ও অপারেটিং সিস্টেমে আগে থেকেই ইন্সটল থাকে। এগুলো ব্যবহার করলে বাড়তি লোডিং ছাড়াই সব ডিভাইসে একই দেখাবে।
| ফন্টের নাম | Generic | চেহারা | Windows | macOS |
|---|---|---|---|---|
| Arial | sans-serif | পরিষ্কার, সর্বজনীন | ✅ | ✅ (Helvetica) |
| Helvetica | sans-serif | পরিষ্কার, সর্বজনীন | ❌ (Arial দেখায়) | ✅ |
| Verdana | sans-serif | বিস্তৃত, ছোটতেও পরিষ্কার | ✅ | ✅ |
| Tahoma | sans-serif | Arial-এর মতো, একটু সরু | ✅ | ✅ |
| Trebuchet MS | sans-serif | আধুনিক, পরিষ্কার | ✅ | ✅ |
| Georgia | serif | স্ক্রিনে পড়তে ভালো serif | ✅ | ✅ |
| Times New Roman | serif | পুরানো, ক্লাসিক | ✅ | ✅ (Times) |
| Courier New | monospace | টাইপরাইটারের মতো | ✅ | ✅ |
| Impact | fantasy | মোটা, চওড়া — ব্যানারে | ✅ | ✅ |
✅ সেরা Web Safe Font Stack:
sans-serif →
serif →
monospace →
sans-serif →
"Segoe UI", Tahoma, Verdana, Arial, sans-serifserif →
Georgia, "Times New Roman", Times, serifmonospace →
Consolas, "Courier New", Courier, monospace
🔷 ৪. font-size — ফন্টের আকার
font-size দিয়ে লেখার আকার নিয়ন্ত্রণ করা হয়।
একক দুই ভাগে ভাগ: Absolute (সবসময় একই) ও
Relative (পরিস্থিতি অনুযায়ী বদলায়)।
Absolute Units — সবসময় একই আকার Absolute
| একক | মানে | উদাহরণ | কখন ব্যবহার করবে |
|---|---|---|---|
px |
পিক্সেল — ১ স্ক্রিন বিন্দু | 16px |
ওয়েবে সাধারণ ব্যবহার |
pt |
পয়েন্ট — ১pt = ১.৩৩px | 12pt |
প্রিন্ট স্টাইলশিটে |
cm |
সেন্টিমিটার | 1cm |
প্রিন্টে, স্ক্রিনে না |
mm |
মিলিমিটার | 10mm |
প্রিন্টে, স্ক্রিনে না |
Relative Units — পরিস্থিতি অনুযায়ী বদলায় Relative
| একক | মানে | উদাহরণ | সমতুল্য (root 16px হলে) |
|---|---|---|---|
em |
বাবার font-size এর গুণিতক | 1.5em |
বাবা 16px হলে → 24px |
rem |
root (html)-এর font-size এর গুণিতক ✅ | 1.5rem |
সবসময় → 24px |
% |
বাবার font-size এর শতাংশ | 150% |
বাবা 16px হলে → 24px |
vw |
viewport প্রস্থের শতাংশ | 4vw |
1200px স্ক্রিনে → 48px |
vh |
viewport উচ্চতার শতাংশ | 3vh |
800px উচ্চতায় → 24px |
em বনাম rem — কোনটা ব্যবহার করবে? em vs rem
/* em-এর সমস্যা — nested হলে গুণিতক জমে */
html { font-size: 16px; }
.parent { font-size: 1.5em; } /* 16 × 1.5 = 24px */
.child { font-size: 1.5em; } /* 24 × 1.5 = 36px ← আশা করিনি! */
/* rem-এর সুবিধা — সবসময় html থেকে গণনা */
.parent { font-size: 1.5rem; } /* 16 × 1.5 = 24px */
.child { font-size: 1.5rem; } /* 16 × 1.5 = 24px ← সবসময় একই ✅ */
Keyword Values — নামে আকার Keywords
p { font-size: small; } /* ছোট */
p { font-size: medium; } /* মাঝারি — ব্রাউজার ডিফল্ট (≈16px) */
p { font-size: large; } /* বড় */
p { font-size: x-large; } /* আরো বড় */
p { font-size: xx-large; } /* সবচেয়ে বড় */
p { font-size: larger; } /* বাবার চেয়ে একধাপ বড় */
p { font-size: smaller; } /* বাবার চেয়ে একধাপ ছোট */
প্রমাণিত Font Size স্কেল — Type Scale Type Scale
পেশাদার পেজে একটি সামঞ্জস্যপূর্ণ আকারের ক্রম ব্যবহার করা হয়:
html { font-size: 16px; } /* Base = 1rem */
/* Perfect Fourth স্কেল (×1.333) */
small { font-size: 0.75rem; } /* 12px */
p { font-size: 1rem; } /* 16px */
h6 { font-size: 1rem; } /* 16px */
h5 { font-size: 1.125rem; } /* 18px */
h4 { font-size: 1.333rem; } /* 21px */
h3 { font-size: 1.777rem; } /* 28px */
h2 { font-size: 2.369rem; } /* 38px */
h1 { font-size: 3.157rem; } /* 51px */
✅ Type Scale tool:
typescale.com ওয়েবসাইটে গেলে
বিভিন্ন স্কেল ভিজ্যুয়ালি দেখতে ও কোড কপি করতে পারবে।
🔷 ৫. font-weight — ফন্টের ওজন (মোটা ও পাতলা)
font-weight দিয়ে ফন্ট কতটা মোটা বা পাতলা হবে তা ঠিক করা হয়।
কীওয়ার্ড বা ১০০ থেকে ৯০০ পর্যন্ত সংখ্যা দুভাবেই লেখা যায়।
| মান | সংখ্যা | চেহারা | কখন ব্যবহার করবে |
|---|---|---|---|
100 |
100 | Thin / Hairline — সবচেয়ে পাতলা | বড় হেডিং লো কনট্রাস্টে |
200 |
200 | Extra Light | সাবটাইটেল, ক্যাপশন |
300 / lighter |
300 | Light — পাতলা কিন্তু পাঠযোগ্য | সাধারণ body লেখায় |
400 / normal |
400 | Regular — ডিফল্ট ✅ | সাধারণ সব লেখায় |
500 |
500 | Medium | একটু জোর দিতে |
600 |
600 | Semi Bold | নেভিগেশন, লেবেল |
700 / bold |
700 | Bold — মোটা ✅ | শিরোনাম, জোর দেওয়া |
800 |
800 | Extra Bold | বড় হেডিং |
900 / bolder |
900 | Black / Heavy — সবচেয়ে মোটা | হিরো শিরোনাম, ডিসপ্লে |
/* কীওয়ার্ড */
p { font-weight: normal; } /* = 400 */
p { font-weight: bold; } /* = 700 */
p { font-weight: lighter; } /* বাবার চেয়ে একধাপ পাতলা */
p { font-weight: bolder; } /* বাবার চেয়ে একধাপ মোটা */
/* সংখ্যা — আরো নিয়ন্ত্রণ */
h1 { font-weight: 800; }
p { font-weight: 400; }
.label { font-weight: 600; }
⚠️ সতর্কতা: সব ফন্ট সব weight সমর্থন করে না।
সাধারণ Web Safe Font (যেমন Arial) শুধু
400 ও 700 সমর্থন করে।
Google Fonts থেকে ফন্ট আনলে কোন কোন weight চাও তা নির্দিষ্টভাবে লিংকে উল্লেখ করতে হবে।
🔷 ৬. font-style ও font-variant
font-style — কাত করা Style
font-style দিয়ে ফন্ট কাত (italic) করা হয়।
italic ও oblique-এর মধ্যে পার্থক্য আছে।
| মান | কাজ | পার্থক্য |
|---|---|---|
normal |
সোজা — ডিফল্ট | — |
italic |
ফন্টের নিজস্ব italic ভেরিয়েন্ট ব্যবহার করে | ফন্ট ডিজাইনারের তৈরি — সুন্দর দেখায় ✅ |
oblique |
ব্রাউজার জোর করে কাত করে | italic না থাকলে fallback হিসেবে |
oblique 30deg |
নির্দিষ্ট ডিগ্রিতে কাত | Variable Font-এ কাজ করে |
em { font-style: italic; } /* ডিফল্টে italic */
cite { font-style: italic; } /* উদ্ধৃতির উৎস */
.quote { font-style: italic; } /* উদ্ধৃতি */
.reset { font-style: normal; } /* italic বাতিল করো */
font-variant — Small Caps Variant
font-variant: small-caps দিলে ছোট হাতের অক্ষরগুলো
ছোট আকারের বড় হাতে দেখায় — পেশাদার চেহারার জন্য।
/* normal → সাধারণ */
.normal { font-variant: normal; }
/* small-caps → ছোট আকারের বড় হাতে */
.caps { font-variant: small-caps; }
/* "hello world" → দেখাবে "HELLO WORLD" ছোট আকারে */
/* আধুনিক CSS-এ আরো নিয়ন্ত্রণ */
.advanced {
font-variant-numeric: oldstyle-nums; /* পুরানো ধাঁচের সংখ্যা */
font-variant-ligatures: common-ligatures; /* fi, fl একসাথে */
}
🔷 ৭. font-stretch — ফন্ট সরু বা চওড়া
font-stretch দিয়ে ফন্ট সরু বা চওড়া করা যায়।
তবে শুধু সেই ফন্টে কাজ করে যেখানে condensed বা expanded ভেরিয়েন্ট আছে।
/* কীওয়ার্ড — সরু থেকে চওড়া */
.ultra-condensed { font-stretch: ultra-condensed; } /* সবচেয়ে সরু */
.condensed { font-stretch: condensed; }
.semi-condensed { font-stretch: semi-condensed; }
.normal { font-stretch: normal; } /* ডিফল্ট */
.semi-expanded { font-stretch: semi-expanded; }
.expanded { font-stretch: expanded; }
.ultra-expanded { font-stretch: ultra-expanded; } /* সবচেয়ে চওড়া */
/* শতাংশে (50% থেকে 200%) */
.condensed { font-stretch: 75%; }
.expanded { font-stretch: 125%; }
⚠️ সীমাবদ্ধতা: Arial, Georgia-র মতো Web Safe Font-এ
font-stretch কাজ করে না — এগুলোতে condensed/expanded ভেরিয়েন্ট নেই।
Barlow Condensed বা Roboto Condensed (Google Fonts) ব্যবহার করো।
🔷 ৮. line-height — লাইনের উচ্চতা
line-height দিয়ে দুটি লাইনের মাঝের উচ্চতা (leading)
নিয়ন্ত্রণ করা হয়। পাঠযোগ্যতার জন্য এটি সবচেয়ে গুরুত্বপূর্ণ Font Property।
/* ইউনিট ছাড়া — সবচেয়ে ভালো পদ্ধতি ✅ */
p { line-height: 1.6; } /* font-size যাই হোক, তার ১.৬ গুণ */
/* px দিয়ে — নির্দিষ্ট কিন্তু নমনীয় নয় */
p { line-height: 28px; }
/* em দিয়ে */
p { line-height: 1.6em; }
/* normal — ব্রাউজারের ডিফল্ট (≈1.2) */
p { line-height: normal; }
| মান | পরিস্থিতি | কখন ব্যবহার করবে |
|---|---|---|
1 – 1.2 |
টাইট — লাইন কাছাকাছি | বড় শিরোনাম (h1, h2) |
1.4 – 1.6 |
স্বাভাবিক — আরামদায়ক ✅ | সাধারণ body লেখা |
1.7 – 1.8 |
বিস্তৃত — বাতাসময় | দীর্ঘ পড়ার লেখা, ব্লগ |
2 বা বেশি |
অনেক বেশি ফাঁকা | বিশেষ ডিজাইনে, সাধারণত না |
✅ WCAG নির্দেশিকা: Web Content Accessibility Guidelines অনুযায়ী
body লেখার
line-height কমপক্ষে 1.5 হওয়া উচিত —
পড়তে সমস্যা আছে এমন মানুষদের জন্য।
🔷 ৯. font Shorthand — সব একসাথে
font Shorthand দিয়ে font-সংক্রান্ত সব Property
এক লাইনে লেখা যায়।
font-size ও font-family দেওয়া বাধ্যতামূলক।
/* font: style variant weight size/line-height family; */
/* সম্পূর্ণ উদাহরণ */
p {
font: italic small-caps bold 16px/1.6 "Segoe UI", sans-serif;
}
/* শুধু বাধ্যতামূলক অংশ */
p {
font: 16px Arial, sans-serif;
}
/* আলাদা আলাদা লেখার সমতুল্য */
p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 16px;
line-height: 1.6;
font-family: "Segoe UI", sans-serif;
}
⚠️ Shorthand-এর বিপদ:
font shorthand ব্যবহার করলে
যে মান উল্লেখ করোনি সেগুলো ডিফল্টে রিসেট হয়ে যায়।
তাই Shorthand ব্যবহার করলে সব প্রয়োজনীয় মান উল্লেখ করো।
System Font Keywords System
/* অপারেটিং সিস্টেমের ডিফল্ট UI ফন্ট */
button { font: caption; } /* বোতামের ডিফল্ট ফন্ট */
select { font: menu; } /* মেনুর ডিফল্ট ফন্ট */
input { font: message-box; } /* মেসেজ বক্সের ফন্ট */
/* আধুনিক পদ্ধতি — সিস্টেম ফন্ট স্ট্যাক */
body {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen, Ubuntu,
Cantarell, sans-serif;
}
🔷 ১০. Google Fonts — বিনামূল্যে হাজারো ফন্ট
Google Fonts (fonts.google.com) হলো বিনামূল্যের ওয়েব ফন্ট সার্ভিস।
১,৫০০-এর বেশি ফন্ট পাওয়া যায় — HTML বা CSS-এ কয়েক লাইন যোগ করলেই ব্যবহার করা যায়।
কীভাবে যুক্ত করবে — ধাপে ধাপে ধাপ
/* ধাপ ১: fonts.google.com-এ যাও */
/* ধাপ ২: পছন্দের ফন্ট বেছে নাও (যেমন: Roboto) */
/* ধাপ ৩: প্রয়োজনীয় weight বেছে নাও (400, 700 ইত্যাদি) */
/* ধাপ ৪: দেওয়া <link> কোড HTML <head>-এ বসাও */
<!-- HTML <head>-এ -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap"
rel="stylesheet">
/* ধাপ ৫: CSS-এ ব্যবহার করো */
body {
font-family: "Roboto", sans-serif;
}
h1 { font-weight: 700; }
p { font-weight: 400; }
@import পদ্ধতি — CSS ফাইলে সরাসরি @import
/* CSS ফাইলের একদম শুরুতে */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
body {
font-family: "Poppins", sans-serif;
}
একাধিক ফন্ট একসাথে আনা Multiple
/* একটি লিংকে একাধিক ফন্ট — family= এর পর & দিয়ে আলাদা করো */
<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@400;700
&family=Playfair+Display:wght@700
&display=swap" rel="stylesheet">
/* CSS-এ ব্যবহার */
body { font-family: "Roboto", sans-serif; } /* body লেখায় */
h1 { font-family: "Playfair Display", serif; } /* শিরোনামে */
জনপ্রিয় Google Fonts সুপারিশ জনপ্রিয়
| ফন্ট | Generic | চেহারা | সেরা ব্যবহার |
|---|---|---|---|
| Roboto | sans-serif | পরিষ্কার, আধুনিক | সাধারণ সব কাজ, Android ডিফল্ট |
| Open Sans | sans-serif | নিরপেক্ষ, পাঠযোগ্য | body লেখা, UI |
| Lato | sans-serif | উষ্ণ, পেশাদার | ব্যবসায়িক পেজ |
| Poppins | sans-serif | গোলাকার, বন্ধুত্বপূর্ণ | আধুনিক ওয়েবসাইট, স্টার্টআপ |
| Montserrat | sans-serif | জ্যামিতিক, সাহসী | শিরোনাম, লোগো |
| Playfair Display | serif | মার্জিত, সাহিত্যিক | ব্লগ শিরোনাম, ম্যাগাজিন |
| Merriweather | serif | পাঠযোগ্য serif | দীর্ঘ পড়ার লেখা |
| Fira Code | monospace | ligature সহ কোড ফন্ট | কোড এডিটর, কোড ব্লক |
✅ পারফরম্যান্স টিপ: Google Fonts থেকে শুধু প্রয়োজনীয় weight আনো।
সব weight (100–900) আনলে পেজ ধীরে লোড হবে।
সাধারণত
400 (regular) ও 700 (bold) — এই দুটোই যথেষ্ট।
🔷 ১১. @font-face — নিজের ফন্ট যুক্ত করা
@font-face দিয়ে নিজের সার্ভারে রাখা কাস্টম ফন্ট
লোড করা হয়। Google Fonts ব্যবহার না করে নিজের ফন্ট ফাইল থাকলে এভাবে যুক্ত করতে হয়।
ফন্ট ফাইলের ফরম্যাট Format
| ফরম্যাট | বিস্তার | সাইজ | সমর্থন |
|---|---|---|---|
.woff2 |
Web Open Font Format 2 | সবচেয়ে ছোট ✅ | সব আধুনিক ব্রাউজার |
.woff |
Web Open Font Format | ছোট | প্রায় সব ব্রাউজার |
.ttf |
TrueType Font | মাঝারি | সব ব্রাউজার |
.otf |
OpenType Font | মাঝারি | সব ব্রাউজার |
.eot |
Embedded OpenType | বড় | শুধু পুরানো IE — এড়িয়ে চলো |
@font-face কীভাবে লিখবে Syntax
/* CSS ফাইলের শুরুতে @font-face লেখো */
@font-face {
font-family: "MyFont"; /* নাম দাও — যা খুশি */
src: url("fonts/myfont.woff2") format("woff2"), /* প্রথমে woff2 */
url("fonts/myfont.woff") format("woff"), /* তারপর woff */
url("fonts/myfont.ttf") format("truetype"); /* fallback */
font-weight: normal; /* এই ফাইল কোন weight-এর */
font-style: normal; /* এই ফাইল কোন style-এর */
font-display: swap; /* লোড হওয়ার আগে fallback দেখাবে */
}
/* এখন CSS-এ ব্যবহার করো */
body {
font-family: "MyFont", sans-serif;
}
Bold ও Italic আলাদাভাবে যুক্ত করা Variants
/* Regular */
@font-face {
font-family: "MyFont";
src: url("fonts/myfont-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Bold */
@font-face {
font-family: "MyFont";
src: url("fonts/myfont-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Italic */
@font-face {
font-family: "MyFont";
src: url("fonts/myfont-italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* এখন CSS-এ স্বাভাবিকভাবে ব্যবহার করো */
body { font-family: "MyFont", sans-serif; font-weight: 400; }
h1 { font-family: "MyFont", sans-serif; font-weight: 700; }
em { font-family: "MyFont", sans-serif; font-style: italic; }
font-display — লোডিংয়ের সময় কী দেখাবে font-display
| মান | আচরণ | কখন ব্যবহার করবে |
|---|---|---|
swap |
আগে fallback, লোড হলে বদলায় | সাধারণ ব্যবহার — সবচেয়ে ভালো ✅ |
block |
লোড না হওয়া পর্যন্ত অদৃশ্য | গুরুত্বপূর্ণ আইকন ফন্টে |
fallback |
ছোট বিরতি, তারপর চিরতরে fallback | দ্রুত লোড চাইলে |
optional |
সংযোগ ভালো হলে লোড | বাড়তি সজ্জামূলক ফন্টে |
auto |
ব্রাউজার নিজে ঠিক করে | ডিফল্ট — সাধারণত swap-এর মতো |
🔷 ১২. Variable Fonts — একটিতে সব
Variable Font হলো আধুনিক ফন্ট প্রযুক্তি — একটি ফাইলেই সব weight, width, italic সহ অনেক variation থাকে। আলাদা আলাদা ফাইলের বদলে একটি ফাইলে সব — পেজ দ্রুত লোড হয়।
/* Variable Font লোড করা */
@font-face {
font-family: "Inter";
src: url("fonts/inter-variable.woff2") format("woff2-variations");
font-weight: 100 900; /* weight range নির্ধারণ */
font-display: swap;
}
/* সাধারণভাবে ব্যবহার করা যায় */
h1 { font-weight: 750; } /* যেকোনো মান 100-900 */
p { font-weight: 380; } /* এমনকি মাঝামাঝি মানও */
/* font-variation-settings দিয়ে সরাসরি axis নিয়ন্ত্রণ */
h1 {
font-variation-settings:
"wght" 750, /* weight */
"wdth" 90, /* width */
"ital" 0.5; /* italic পরিমাণ */
}
✅ জনপ্রিয় Variable Fonts:
Inter, Roboto Flex, Source Sans 3, Recursive — সবই Google Fonts-এ পাওয়া যায়।
আধুনিক প্রজেক্টে Variable Font ব্যবহার করলে পারফরম্যান্স ও ডিজাইন দুটোই ভালো হয়।
🔷 দ্রুত রেফারেন্স — সব Font Property এক জায়গায়
| Property | কাজ | সাধারণ মান / উদাহরণ | বাধ্যতামূলক? |
|---|---|---|---|
| font-family | ফন্ট পরিবার নির্ধারণ | "Roboto", sans-serif |
✅ হ্যাঁ |
| font-size | ফন্টের আকার | 1rem, 16px, 1.5em |
✅ হ্যাঁ |
| font-weight | মোটা বা পাতলা | normal, bold, 400–900 |
না |
| font-style | কাত (italic) | normal, italic, oblique |
না |
| font-variant | Small Caps ও বিশেষ ভেরিয়েন্ট | normal, small-caps |
না |
| font-stretch | সরু বা চওড়া | condensed, normal, expanded |
না |
| line-height | লাইনের উচ্চতা | 1.6, 1.5, 28px |
না (কিন্তু দেওয়া উচিত) |
| font | Shorthand — সব একসাথে | bold 1rem/1.6 "Roboto", sans-serif |
না |
| @font-face | কাস্টম ফন্ট যুক্ত করা | src: url("font.woff2") |
প্রয়োজনে |
| font-display | ফন্ট লোডিং আচরণ | swap, block, fallback |
@font-face-এ |
| font-variation-settings | Variable Font axis নিয়ন্ত্রণ | "wght" 700, "wdth" 90 |
Variable Font-এ |
✅ সেরা Font সেটআপ — যেকোনো প্রজেক্টের শুরুতে:
/* ১. Google Font লিংক HTML head-এ */
/* ২. CSS-এ base সেট করো */
html { font-size: 16px; }
body {
font-family: "Poppins", sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
color: #333;
}
h1, h2, h3 { font-weight: 700; line-height: 1.2; }
code, pre { font-family: "Fira Code", monospace; }
👁️ CSS Opacity — সম্পূর্ণ নোট
এই সেকশনে CSS-এর opacity Property, RGBA ও HSLA রঙ, visibility, এবং স্বচ্ছতা সংক্রান্ত সব ধারণা বিস্তারিত ব্যাখ্যা সহ বোঝানো হয়েছে।
🔷 Opacity কী?
Opacity মানে একটি এলিমেন্ট কতটা দেখা যাবে —
সম্পূর্ণ অপাক থেকে সম্পূর্ণ স্বচ্ছ পর্যন্ত।
CSS-এ opacity নিয়ন্ত্রণের মূলত তিনটি উপায় আছে:
opacity Property, rgba() রঙ এবং hsla() রঙ।
সহজ ভাষায় — Opacity হলো কাচের দেওয়ালের মতো। কাচ পরিষ্কার হলে সব দেখা যায় (opacity: 1), কাচ ঘোলা হলে অর্ধেক দেখা যায় (opacity: 0.5), কাচ কালো হলে কিছুই দেখা যায় না (opacity: 0)।
⚠️ গুরুত্বপূর্ণ পার্থক্য:
opacity Property ব্যবহার করলে এলিমেন্টের ভেতরের সব কিছু (লেখা, ছবি, সন্তান এলিমেন্ট)
একসাথে স্বচ্ছ হয়।
শুধু ব্যাকগ্রাউন্ড স্বচ্ছ করতে চাইলে rgba() বা hsla() ব্যবহার করো।
🔷 ১. opacity Property
opacity Property দিয়ে পুরো এলিমেন্টের স্বচ্ছতা নিয়ন্ত্রণ করা হয়।
মান 0 থেকে 1 — দশমিক সংখ্যায়।
div { opacity: 0; } /* সম্পূর্ণ স্বচ্ছ — অদৃশ্য */
div { opacity: 0.25; } /* ২৫% অপাক */
div { opacity: 0.5; } /* ৫০% অপাক — আধা স্বচ্ছ */
div { opacity: 0.75; } /* ৭৫% অপাক */
div { opacity: 1; } /* সম্পূর্ণ অপাক — ডিফল্ট */
বাস্তব উদাহরণ — ছবির উপর টেক্সট ওভারলে Overlay
ছবির উপর একটি অর্ধ-স্বচ্ছ স্তর দিয়ে লেখা পড়তে সহজ করা — এটাই Opacity-র সবচেয়ে জনপ্রিয় ব্যবহার।
/* HTML কাঠামো */
<div class="hero">
<div class="overlay"></div>
<h1>আমার ওয়েবসাইট</h1>
</div>
/* CSS */
.hero {
position: relative;
background-image: url("hero.jpg");
background-size: cover;
}
.overlay {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: black;
opacity: 0.5; /* ৫০% কালো আবরণ */
}
h1 {
position: relative; /* overlay-এর উপরে থাকবে */
color: white;
z-index: 1;
}
opacity ও সন্তান এলিমেন্ট — সমস্যা সমস্যা
/* সমস্যা — বাবার opacity সন্তানেও লাগে */
.parent {
background-color: navy;
opacity: 0.5; /* ব্যাকগ্রাউন্ড ও লেখা দুটোই ৫০% স্বচ্ছ */
}
.parent p {
opacity: 1; /* কাজ করবে না — বাবার প্রভাব কাটানো যায় না */
color: white; /* লেখাও ৫০% স্বচ্ছ থেকে যাবে */
}
/* ✅ সমাধান — rgba() দিয়ে শুধু ব্যাকগ্রাউন্ড স্বচ্ছ করো */
.parent {
background-color: rgba(0, 0, 128, 0.5); /* শুধু ব্যাকগ্রাউন্ড ৫০% স্বচ্ছ */
}
.parent p {
color: white; /* লেখা সম্পূর্ণ অপাক থাকবে ✅ */
}
✅ নিয়ম: শুধু ব্যাকগ্রাউন্ড স্বচ্ছ করতে →
rgba() ব্যবহার করো।
পুরো এলিমেন্ট (লেখাসহ) স্বচ্ছ করতে → opacity ব্যবহার করো।
🔷 ২. rgba() — রঙের সাথে স্বচ্ছতা
rgba() মানে Red, Green, Blue, Alpha।
চতুর্থ মানটি (A) হলো স্বচ্ছতা — 0 থেকে 1।
opacity Property-র মতো নয় — শুধু ঐ নির্দিষ্ট রঙটাই স্বচ্ছ হয়,
সন্তান এলিমেন্ট প্রভাবিত হয় না।
/* rgba(লাল, সবুজ, নীল, স্বচ্ছতা) */
/* প্রতিটি রঙের মান: 0–255 */
/* স্বচ্ছতার মান: 0 (স্বচ্ছ) – 1 (অপাক) */
.box { background-color: rgba(255, 0, 0, 1); } /* সম্পূর্ণ লাল */
.box { background-color: rgba(255, 0, 0, 0.7); } /* ৭০% অপাক লাল */
.box { background-color: rgba(255, 0, 0, 0.5); } /* ৫০% স্বচ্ছ লাল */
.box { background-color: rgba(255, 0, 0, 0.2); } /* ২০% অপাক লাল */
.box { background-color: rgba(255, 0, 0, 0); } /* সম্পূর্ণ স্বচ্ছ */
rgba()-এর বাস্তব ব্যবহার ব্যবহার
/* ১. আধা-স্বচ্ছ কার্ড — glassmorphism */
.card {
background-color: rgba(255, 255, 255, 0.2); /* সাদা ২০% */
backdrop-filter: blur(10px); /* পেছন ঝাপসা */
border: 1px solid rgba(255, 255, 255, 0.3);
}
/* ২. ছায়া — box-shadow-এ */
.box {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* হালকা কালো ছায়া */
}
/* ৩. Text-এ আধা-স্বচ্ছ */
.subtitle {
color: rgba(0, 0, 0, 0.6); /* ৬০% অপাক কালো — নরম ধূসর মতো */
}
/* ৪. Border-এ */
.divider {
border-top: 1px solid rgba(0, 0, 0, 0.1); /* হালকা বিভাজক রেখা */
}
/* ৫. Overlay */
.overlay {
background-color: rgba(0, 0, 0, 0.5); /* ৫০% কালো আবরণ */
}
✅ Common rgba() মান মনে রাখো:
rgba(0,0,0, 0.1) = হালকা ছায়া |
rgba(0,0,0, 0.5) = মাঝারি আবরণ |
rgba(255,255,255, 0.2) = হালকা সাদা কাচ |
rgba(0,0,0, 0.8) = গাঢ় আবরণ
🔷 ৩. hsla() — HSL-এ স্বচ্ছতা
hsla() মানে Hue (রঙের কোণ), Saturation (তীব্রতা), Lightness (উজ্জ্বলতা),
Alpha।
rgba()-এর মতোই কাজ করে — শুধু রঙ লেখার পদ্ধতি আলাদা।
HSL — রঙ বোঝার সহজ পদ্ধতি HSL
| অংশ | মানে | পরিসর | উদাহরণ |
|---|---|---|---|
| H (Hue) | রঙচক্রে কোণ | 0–360 ডিগ্রি | 0°=লাল, 120°=সবুজ, 240°=নীল |
| S (Saturation) | রঙের তীব্রতা | 0%–100% | 0%=ধূসর, 100%=সম্পূর্ণ রঙিন |
| L (Lightness) | উজ্জ্বলতা | 0%–100% | 0%=কালো, 50%=স্বাভাবিক, 100%=সাদা |
| A (Alpha) | স্বচ্ছতা | 0–1 | 0=স্বচ্ছ, 0.5=আধা, 1=অপাক |
/* hsla(কোণ, তীব্রতা, উজ্জ্বলতা, স্বচ্ছতা) */
.red { background-color: hsla(0, 100%, 50%, 1); } /* লাল */
.green { background-color: hsla(120, 100%, 50%, 1); } /* সবুজ */
.blue { background-color: hsla(240, 100%, 50%, 1); } /* নীল */
/* স্বচ্ছতা যোগ করা */
.blue-50 { background-color: hsla(240, 100%, 50%, 0.5); } /* ৫০% স্বচ্ছ নীল */
.blue-20 { background-color: hsla(240, 100%, 50%, 0.2); } /* ২০% অপাক নীল */
/* HSL-এর সুবিধা — একই রঙ হালকা করা সহজ */
.primary { color: hsl(220, 80%, 40%); } /* গাঢ় নীল */
.primary-light { color: hsl(220, 80%, 70%); } /* হালকা নীল — শুধু L বদলালো */
.primary-fade { color: hsla(220, 80%, 40%, 0.3); } /* স্বচ্ছ নীল */
✅ HSL-এর সুবিধা: একই রঙের বিভিন্ন শেড বানাতে সহজ।
Hue একই রেখে শুধু Lightness বা Saturation বদলালেই হালকা, গাঢ় বা নরম রঙ পাওয়া যায়।
Design System বানানোর সময় HSL সবচেয়ে সুবিধাজনক।
🔷 ৪. opacity বনাম rgba() — বিস্তারিত পার্থক্য
| বিষয় | opacity |
rgba() / hsla() |
|---|---|---|
| কোথায় লেখা যায়? | আলাদা Property হিসেবে | color, background-color, border ইত্যাদি মানে |
| কী স্বচ্ছ হয়? | পুরো এলিমেন্ট — ব্যাকগ্রাউন্ড, লেখা, সন্তান সব | শুধু ঐ নির্দিষ্ট রঙটি |
| সন্তান এলিমেন্ট? | সন্তানও স্বচ্ছ হয়ে যায় ❌ | সন্তান প্রভাবিত হয় না ✅ |
| Hover/Transition-এ? | সহজে animate করা যায় | animate করা যায়, একটু জটিল |
| কখন ব্যবহার করবে? | পুরো এলিমেন্ট ফেড করতে, hover effect | শুধু ব্যাকগ্রাউন্ড বা রঙ স্বচ্ছ করতে |
| উদাহরণ | opacity: 0.5 |
background: rgba(0,0,0,0.5) |
/* opacity — পুরো এলিমেন্ট স্বচ্ছ (লেখাসহ) */
.card-opacity {
background-color: navy;
opacity: 0.5;
/* ⚠️ ভেতরের লেখাও ৫০% স্বচ্ছ হবে */
}
/* rgba — শুধু ব্যাকগ্রাউন্ড স্বচ্ছ */
.card-rgba {
background-color: rgba(0, 0, 128, 0.5);
/* ✅ ভেতরের লেখা সম্পূর্ণ অপাক থাকবে */
}
/* তুলনা */
<div class="card-opacity">
<p>এই লেখাও ৫০% স্বচ্ছ ❌</p>
</div>
<div class="card-rgba">
<p>এই লেখা সম্পূর্ণ দেখা যাচ্ছে ✅</p>
</div>
🔷 ৫. visibility — অদৃশ্য কিন্তু জায়গা থাকে
visibility: hidden দিলে এলিমেন্ট অদৃশ্য হয়,
কিন্তু পেজে জায়গা ধরে রাখে।
এটা opacity: 0-এর মতো — দেখা যায় না কিন্তু কাঠামোয় আছে।
/* visibility মানগুলো */
.show { visibility: visible; } /* দেখা যাচ্ছে — ডিফল্ট */
.hide { visibility: hidden; } /* অদৃশ্য কিন্তু জায়গা আছে */
.col { visibility: collapse; } /* শুধু table row/column-এ কাজ করে */
opacity: 0 বনাম visibility: hidden বনাম display: none তুলনা
| পদ্ধতি | দেখা যায়? | জায়গা ধরে? | ক্লিক হয়? | Animate করা যায়? |
|---|---|---|---|---|
opacity: 0 |
❌ না | ✅ হ্যাঁ | ✅ হ্যাঁ | ✅ হ্যাঁ (Transition) |
visibility: hidden |
❌ না | ✅ হ্যাঁ | ❌ না | ⚠️ সীমিত |
display: none |
❌ না | ❌ না | ❌ না | ❌ না |
/* তুলনা */
/* opacity: 0 — জায়গা আছে, ক্লিক হয় */
.ghost { opacity: 0; }
/* visibility: hidden — জায়গা আছে, ক্লিক হয় না */
.invisible { visibility: hidden; }
/* display: none — জায়গাও নেই */
.gone { display: none; }
/* Dropdown Menu-র সঠিক পদ্ধতি */
.dropdown-menu {
opacity: 0;
visibility: hidden; /* ক্লিক আটকানোর জন্য */
transition: opacity 0.3s, visibility 0.3s;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
}
✅ Dropdown বা Tooltip-এর সেরা পদ্ধতি:
opacity ও visibility একসাথে ব্যবহার করো —
opacity দিয়ে মসৃণ Animation, visibility দিয়ে অদৃশ্য থাকা অবস্থায় ক্লিক
আটকানো।
🔷 ৬. Hover-এ Opacity — সুন্দর Effect
opacity-এর সাথে transition যোগ করলে
মসৃণ Fade In/Out effect তৈরি হয় —
ওয়েবসাইটে ইন্টারঅ্যাক্টিভিটি বাড়ানোর সহজতম উপায়।
Fade In / Fade Out — ছবি ও বোতামে Fade
/* বোতামে hover fade */
.btn {
opacity: 1;
transition: opacity 0.3s ease; /* ০.৩ সেকেন্ডে পরিবর্তন */
}
.btn:hover {
opacity: 0.7; /* hover করলে হালকা */
}
/* ছবিতে hover overlay */
.image-card {
position: relative;
overflow: hidden;
}
.image-card img {
display: block;
width: 100%;
transition: opacity 0.4s ease;
}
.image-card:hover img {
opacity: 0.6; /* ছবি ঘোলা হয় */
}
/* ছবির উপর লেখা Fade In */
.image-card .caption {
position: absolute;
bottom: 0; left: 0; right: 0;
background: rgba(0,0,0,0.7);
color: white;
padding: 16px;
opacity: 0; /* শুরুতে লুকানো */
transition: opacity 0.4s ease;
}
.image-card:hover .caption {
opacity: 1; /* hover করলে দেখা যায় */
}
Pulse Animation — Loading Skeleton Loading
/* Skeleton Loading — pulse effect */
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.4; }
100% { opacity: 1; }
}
.skeleton {
background-color: #e0e0e0;
border-radius: 4px;
animation: pulse 1.5s ease-in-out infinite;
}
.skeleton-text { height: 16px; width: 80%; }
.skeleton-title { height: 24px; width: 60%; }
🔷 ৭. আধুনিক ব্যবহার — Glassmorphism
Glassmorphism হলো কাচের মতো স্বচ্ছ, ঝাপসা UI — আধুনিক ওয়েব ডিজাইনে
খুব জনপ্রিয়। rgba() ও backdrop-filter একসাথে ব্যবহার করে তৈরি হয়।
/* Glassmorphism Card */
.glass-card {
background: rgba(255, 255, 255, 0.15); /* ১৫% সাদা */
backdrop-filter: blur(12px); /* পেছনের কন্টেন্ট ঝাপসা */
-webkit-backdrop-filter: blur(12px); /* Safari-এর জন্য */
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
padding: 24px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
/* Dark Glassmorphism */
.dark-glass {
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
color: white;
}
⚠️ Browser সমর্থন:
backdrop-filter সব পুরানো ব্রাউজারে
কাজ করে না। Safari-এর জন্য -webkit-backdrop-filter দিতে হবে।
Glassmorphism effect কাজ না করলে fallback হিসেবে সাধারণ rgba() ব্যাকগ্রাউন্ড দাও।
🔷 দ্রুত রেফারেন্স — Opacity সংক্রান্ত সব পদ্ধতি
| পদ্ধতি | Syntax | কী স্বচ্ছ হয়? | সন্তান? | কখন ব্যবহার করবে |
|---|---|---|---|---|
| opacity | opacity: 0.5 |
পুরো এলিমেন্ট | প্রভাবিত হয় ❌ | Fade In/Out, hover effect |
| rgba() | rgba(0,0,0, 0.5) |
শুধু ঐ রঙ | প্রভাবিত হয় না ✅ | ব্যাকগ্রাউন্ড, ছায়া, border |
| hsla() | hsla(220, 80%, 50%, 0.5) |
শুধু ঐ রঙ | প্রভাবিত হয় না ✅ | Design System, থিম রঙ |
| visibility: hidden | visibility: hidden |
পুরো এলিমেন্ট | সন্তানও লুকায় | জায়গা রেখে লুকাতে |
| display: none | display: none |
পুরো এলিমেন্ট | জায়গাও যায় | সম্পূর্ণ সরিয়ে দিতে |
opacity মানের চার্ট Chart
| opacity মান | শতাংশ | চেহারা | সাধারণ ব্যবহার |
|---|---|---|---|
0 |
0% | সম্পূর্ণ অদৃশ্য | Hidden state, Fade Out শেষ অবস্থা |
0.1 |
10% | প্রায় অদৃশ্য | সূক্ষ্ম ব্যাকগ্রাউন্ড রঙ |
0.25 |
25% | হালকা ছায়া | Watermark, আবছা overlay |
0.5 |
50% | আধা স্বচ্ছ | Disabled বোতাম, Modal overlay |
0.7 |
70% | বেশিরভাগ দেখা যায় | Hover effect, Tooltip |
0.8 |
80% | প্রায় পুরো দেখা যায় | Card overlay, Navbar blur |
1 |
100% | সম্পূর্ণ অপাক | সাধারণ — ডিফল্ট |
✅ সহজ সিদ্ধান্ত গাছ:
পুরো এলিমেন্ট ফেড করতে →
শুধু ব্যাকগ্রাউন্ড স্বচ্ছ করতে →
জায়গা রেখে লুকাতে →
সম্পূর্ণ সরিয়ে দিতে →
মসৃণ Fade Animation →
পুরো এলিমেন্ট ফেড করতে →
opacityশুধু ব্যাকগ্রাউন্ড স্বচ্ছ করতে →
rgba()জায়গা রেখে লুকাতে →
visibility: hiddenসম্পূর্ণ সরিয়ে দিতে →
display: noneমসৃণ Fade Animation →
opacity + transition
🖼️ CSS Background — সম্পূর্ণ নোট
এই সেকশনে CSS-এর সব Background সংক্রান্ত Property — রঙ, ছবি, আকার, অবস্থান, পুনরাবৃত্তি, সংযুক্তি, গ্রেডিয়েন্ট এবং Shorthand বিস্তারিত ব্যাখ্যা সহ বোঝানো হয়েছে।
🔷 CSS Background কী?
CSS Background দিয়ে যেকোনো HTML এলিমেন্টের পেছনের অংশ নিয়ন্ত্রণ করা হয় — রঙ, ছবি, গ্রেডিয়েন্ট, অবস্থান, আকার সব কিছু।
সহজ ভাষায় — Background হলো একটি ক্যানভাসের মতো, যার উপরে লেখা ও অন্যান্য কন্টেন্ট বসে। CSS দিয়ে সেই ক্যানভাসের রঙ, নকশা ও আচরণ নির্ধারণ করা হয়।
Background-এর সব Property — এক নজরে Overview
| Property | কাজ |
|---|---|
background-color |
ব্যাকগ্রাউন্ডের রঙ নির্ধারণ |
background-image |
ব্যাকগ্রাউন্ডে ছবি বা গ্রেডিয়েন্ট |
background-repeat |
ছবি বারবার দেখাবে কিনা |
background-position |
ছবি কোথায় থাকবে |
background-size |
ছবির আকার |
background-attachment |
স্ক্রল করলে ছবি সাথে যাবে কিনা |
background-origin |
ছবি কোথা থেকে শুরু হবে |
background-clip |
ব্যাকগ্রাউন্ড কতটুকু এলাকা জুড়ে থাকবে |
background |
Shorthand — সব একসাথে |
🔷 ১. background-color — ব্যাকগ্রাউন্ডের রঙ
background-color দিয়ে এলিমেন্টের ব্যাকগ্রাউন্ডের রঙ
নির্ধারণ করা হয়। রঙ বিভিন্ন উপায়ে লেখা যায়।
/* রঙের নাম দিয়ে */
body { background-color: white; }
div { background-color: lightblue; }
/* Hex Code — সবচেয়ে বেশি ব্যবহৃত */
body { background-color: #f0f4f8; }
.card { background-color: #ffffff; }
/* RGB */
nav { background-color: rgb(26, 26, 46); }
/* RGBA — স্বচ্ছ ব্যাকগ্রাউন্ড */
.overlay { background-color: rgba(0, 0, 0, 0.5); }
/* HSL */
.primary { background-color: hsl(220, 80%, 50%); }
/* transparent — স্বচ্ছ (ডিফল্ট) */
.no-bg { background-color: transparent; }
Fallback রঙ — ছবি লোড না হলে Fallback
background-color সবসময় background-image-এর নিচে থাকে।
ছবি লোড হওয়ার আগে বা ছবি না থাকলে রঙ দেখা যায় — তাই সবসময় দেওয়া ভালো।
.hero {
background-color: #1a1a2e; /* ছবি না থাকলে এই রঙ দেখাবে */
background-image: url("hero.jpg"); /* ছবি লোড হলে এটা দেখাবে */
}
✅ পরামর্শ:
background-image ব্যবহার করলে
সবসময় একটি background-color দাও —
ছবি ধীরে লোড হলে বা না থাকলে পেজ ভাঙা দেখাবে না।
🔷 ২. background-image — ব্যাকগ্রাউন্ডে ছবি
background-image দিয়ে এলিমেন্টের ব্যাকগ্রাউন্ডে ছবি বা গ্রেডিয়েন্ট
দেওয়া হয়। url() ফাংশনে ছবির ঠিকানা দিতে হয়।
/* একটি ছবি */
.hero {
background-image: url("images/hero.jpg");
}
/* ওয়েব থেকে ছবি */
.section {
background-image: url("https://example.com/bg.png");
}
/* কোনো ছবি নেই */
.plain {
background-image: none;
}
/* একাধিক ছবি — কমা দিয়ে */
.multi {
background-image:
url("pattern.png"), /* উপরে */
url("hero.jpg"); /* নিচে */
}
<img> বনাম background-image — কোনটা কখন? তুলনা
| বিষয় | <img> ট্যাগ |
background-image |
|---|---|---|
| ব্যবহার | কন্টেন্টের অংশ — অর্থবহ ছবি | সজ্জামূলক ছবি, ব্যাকগ্রাউন্ড |
| SEO | alt text দেওয়া যায় — ভালো ✅ | Search Engine দেখে না |
| Accessibility | Screen Reader পড়তে পারে | Screen Reader দেখে না |
| আকার নিয়ন্ত্রণ | width, height দিয়ে | background-size দিয়ে |
| উদাহরণ | পণ্যের ছবি, ব্লগের ছবি | Hero section, Card ব্যাকগ্রাউন্ড |
🔷 ৩. background-repeat — পুনরাবৃত্তি
ছবি এলিমেন্টের চেয়ে ছোট হলে ডিফল্টে বারবার দেখায় (tile করে)।
background-repeat দিয়ে এই আচরণ নিয়ন্ত্রণ করা হয়।
| মান | কাজ | কখন ব্যবহার করবে |
|---|---|---|
repeat |
উভয় দিকে বারবার — ডিফল্ট | টাইলড প্যাটার্ন বা টেক্সচারে |
no-repeat |
একবার মাত্র | Hero ছবি, আইকন — সবচেয়ে বেশি ✅ |
repeat-x |
শুধু বাম-ডানে বারবার | অনুভূমিক ব্যানার বা বর্ডার |
repeat-y |
শুধু উপর-নিচে বারবার | উল্লম্ব ব্যানার বা বর্ডার |
space |
কাটা ছাড়া সমান ফাঁকে সাজানো | সুন্দর টাইল প্যাটার্নে |
round |
ছবি বাড়িয়ে বা কমিয়ে ফিট করা | ছবি কাটা যাবে না এমন ক্ষেত্রে |
.hero { background-repeat: no-repeat; } /* একবার মাত্র */
.pattern { background-repeat: repeat; } /* টাইল */
.stripe { background-repeat: repeat-x; } /* শুধু অনুভূমিক */
.side { background-repeat: repeat-y; } /* শুধু উল্লম্ব */
.spaced { background-repeat: space; } /* সমান ফাঁকে */
/* একাধিক মান — x ও y আলাদা করা */
.custom { background-repeat: repeat no-repeat; }
/* প্রথমটি x-দিক, দ্বিতীয়টি y-দিক */
🔷 ৪. background-position — ছবির অবস্থান
background-position দিয়ে ব্যাকগ্রাউন্ড ছবি কোথায় থাকবে
তা নির্ধারণ করা হয়। দুটি মান — প্রথমটি x (অনুভূমিক), দ্বিতীয়টি y (উল্লম্ব)।
কীওয়ার্ড দিয়ে অবস্থান Keywords
/* একটি কীওয়ার্ড — উভয় দিকে প্রযোজ্য */
.box { background-position: center; } /* মাঝখানে */
.box { background-position: top; } /* উপরে মাঝে */
.box { background-position: bottom; } /* নিচে মাঝে */
/* দুটি কীওয়ার্ড — x এবং y */
.box { background-position: left top; } /* উপর-বাম */
.box { background-position: right top; } /* উপর-ডান */
.box { background-position: center center; } /* মাঝখানে — সবচেয়ে বেশি ✅ */
.box { background-position: left center; } /* বামে মাঝে */
.box { background-position: right bottom; } /* নিচে-ডান */
px ও % দিয়ে অবস্থান px / %
/* % দিয়ে */
.box { background-position: 0% 0%; } /* উপর-বাম — ডিফল্ট */
.box { background-position: 50% 50%; } /* মাঝখানে = center */
.box { background-position: 100% 100%; } /* নিচে-ডান */
.box { background-position: 20% 80%; } /* কাস্টম অবস্থান */
/* px দিয়ে */
.box { background-position: 20px 50px; } /* বাম থেকে ২০px, উপর থেকে ৫০px */
.box { background-position: -10px 0; } /* ছবি বামে ১০px বাইরে */
/* মিশ্র */
.box { background-position: center 20px; } /* অনুভূমিকে মাঝে, উপর থেকে ২০px */
🔷 ৫. background-size — ছবির আকার
background-size দিয়ে ব্যাকগ্রাউন্ড ছবির আকার
নিয়ন্ত্রণ করা হয়। এটি সবচেয়ে গুরুত্বপূর্ণ background property।
cover — সম্পূর্ণ ঢেকে রাখো cover
ছবি পুরো এলিমেন্ট সম্পূর্ণ ঢেকে রাখে — অনুপাত ঠিক থাকে, কিন্তু কিছু অংশ কাটা যেতে পারে। Hero section-এর জন্য সেরা।
.hero {
background-image: url("hero.jpg");
background-size: cover; /* পুরো এলাকা ঢাকবে */
background-position: center; /* মাঝখান থেকে কাটবে */
background-repeat: no-repeat;
}
contain — পুরো ছবি দেখাও contain
পুরো ছবি সম্পূর্ণ দেখা যায় — কিছুই কাটে না। এলিমেন্টের বাকি জায়গায় ব্যাকগ্রাউন্ড রঙ বা পুনরাবৃত্তি দেখায়। লোগো বা আইকনের জন্য ভালো।
.logo-bg {
background-image: url("logo.png");
background-size: contain; /* পুরো ছবি দেখাবে */
background-repeat: no-repeat;
background-position: center;
}
cover বনাম contain — পার্থক্য তুলনা
| বিষয় | cover |
contain |
|---|---|---|
| ছবি কাটে? | হ্যাঁ — প্রয়োজনে কাটে | না — সম্পূর্ণ দেখায় |
| খালি জায়গা? | নেই — সব ঢাকা থাকে | হতে পারে — বাকি জায়গায় রঙ |
| অনুপাত? | ঠিক থাকে ✅ | ঠিক থাকে ✅ |
| কখন ব্যবহার? | Hero section, Card ব্যাকগ্রাউন্ড | লোগো, আইকন, ম্যাপ |
নির্দিষ্ট আকার — px ও % Custom Size
/* নির্দিষ্ট আকার */
.box { background-size: 200px 100px; } /* প্রস্থ ২০০, উচ্চতা ১০০ */
.box { background-size: 100% 100%; } /* এলিমেন্ট সম্পূর্ণ ভরবে (stretch) */
.box { background-size: 50% auto; } /* প্রস্থ ৫০%, উচ্চতা অনুপাত ঠিক */
.box { background-size: auto; } /* ছবির আসল আকার — ডিফল্ট */
🔷 ৬. background-attachment — স্ক্রল আচরণ
background-attachment দিয়ে স্ক্রল করলে ব্যাকগ্রাউন্ড ছবি
কীভাবে আচরণ করবে তা ঠিক করা হয়।
| মান | আচরণ | কখন ব্যবহার করবে |
|---|---|---|
scroll |
ছবি এলিমেন্টের সাথে স্ক্রল করে | সাধারণ ব্যবহার — ডিফল্ট ✅ |
fixed |
ছবি viewport-এ স্থির, কন্টেন্ট সরে | Parallax scrolling effect |
local |
এলিমেন্টের ভেতরে স্ক্রল হলে ছবিও সরে | Scrollable ডিভের ব্যাকগ্রাউন্ডে |
/* scroll — ডিফল্ট আচরণ */
.normal-section {
background-image: url("bg.jpg");
background-attachment: scroll;
}
/* fixed — Parallax Effect */
.parallax-section {
background-image: url("mountain.jpg");
background-attachment: fixed; /* স্ক্রল করলেও ছবি নড়বে না */
background-size: cover;
background-position: center;
min-height: 400px;
}
/* local — scrollable div */
.scrollable-box {
height: 200px;
overflow: auto;
background-image: url("texture.png");
background-attachment: local; /* div স্ক্রল করলে ছবিও সরবে */
}
✅ Parallax-এর বিকল্প:
background-attachment: fixed
মোবাইলে সবসময় ভালো কাজ করে না। মোবাইল ফ্রেন্ডলি Parallax-এর জন্য
JavaScript বা CSS transform ব্যবহার করা ভালো।
🔷 ৭. background-origin ও background-clip
background-origin — ছবি কোথা থেকে শুরু হবে Origin
background-origin দিয়ে ব্যাকগ্রাউন্ড ছবি কোথা থেকে শুরু হবে
তা নির্ধারণ করা হয় — Box Model-এর তিনটি স্তরের যেকোনো একটি থেকে।
| মান | ছবি কোথা থেকে শুরু | সাধারণ ব্যবহার |
|---|---|---|
padding-box |
Padding-এর বাইরের কোণ থেকে | ডিফল্ট — সাধারণ ব্যবহার ✅ |
border-box |
Border-এর বাইরের কোণ থেকে | Border-এর নিচেও ছবি দেখাতে |
content-box |
Content এলাকা থেকে | ছবি Padding ও Border বাদ দিয়ে |
.box {
padding: 20px;
border: 5px dashed red;
background-image: url("pattern.png");
background-repeat: no-repeat;
background-origin: padding-box; /* ডিফল্ট */
background-origin: border-box; /* Border থেকে শুরু */
background-origin: content-box; /* Content থেকে শুরু */
}
background-clip — ব্যাকগ্রাউন্ড কতটুকু দেখাবে Clip
background-clip দিয়ে ব্যাকগ্রাউন্ড কতটুকু এলাকায় দেখাবে
তা কেটে দেওয়া হয়। বিশেষ করে text মানটি দিয়ে সুন্দর গ্রেডিয়েন্ট লেখা তৈরি করা যায়।
.box { background-clip: border-box; } /* Border পর্যন্ত — ডিফল্ট */
.box { background-clip: padding-box; } /* Padding পর্যন্ত */
.box { background-clip: content-box; } /* শুধু Content এলাকায় */
/* ✨ বিশেষ ব্যবহার — গ্রেডিয়েন্ট লেখা! */
.gradient-text {
background-image: linear-gradient(90deg, #e63946, #1d3557);
background-clip: text;
-webkit-background-clip: text; /* Chrome/Safari-এর জন্য */
color: transparent; /* লেখার রঙ স্বচ্ছ — গ্রেডিয়েন্ট দেখাবে */
font-size: 3rem;
font-weight: bold;
}
✅ Gradient Text — আধুনিক ডিজাইনে:
background-clip: text + color: transparent দিলে
লেখার ভেতরে গ্রেডিয়েন্ট রঙ দেখায় — অনেক আধুনিক ওয়েবসাইটে Hero শিরোনামে ব্যবহার হয়।
🔷 ৮. CSS Gradients — রঙের ধাপ
CSS-এ Gradient হলো এক রঙ থেকে আরেক রঙে ধীরে ধীরে পরিবর্তন।
Gradient ছবির মতো কাজ করে — তাই background-image-এ দিতে হয়।
linear-gradient — সরল রেখায় গ্রেডিয়েন্ট Linear
/* দিক + দুটি রঙ */
.box { background-image: linear-gradient(to right, red, blue); }
.box { background-image: linear-gradient(to bottom, #f0f, #0ff); }
.box { background-image: linear-gradient(45deg, navy, skyblue); }
/* একাধিক রঙ */
.box { background-image: linear-gradient(to right, red, yellow, green); }
/* Color Stop — কোথায় কতটুকু */
.box {
background-image: linear-gradient(
to right,
#e63946 0%, /* শুরুতে লাল */
#e63946 30%, /* ৩০% পর্যন্ত লাল */
#1d3557 70%, /* ৭০% থেকে নীল */
#1d3557 100% /* শেষ পর্যন্ত নীল */
);
}
/* জনপ্রিয় gradient সমূহ */
.sunset { background-image: linear-gradient(135deg, #f5a623, #e63946); }
.ocean { background-image: linear-gradient(180deg, #0099f7, #f11712); }
.purple { background-image: linear-gradient(90deg, #7b2ff7, #f107a3); }
radial-gradient — কেন্দ্র থেকে বাইরে Radial
/* কেন্দ্র থেকে বাইরে */
.box { background-image: radial-gradient(circle, red, blue); }
.box { background-image: radial-gradient(ellipse, #fff, #1d3557); }
/* কেন্দ্রের অবস্থান নির্ধারণ */
.box {
background-image: radial-gradient(circle at top left, yellow, orange, red);
}
/* Glow Effect */
.glow {
background-image: radial-gradient(
circle at center,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0) 70%
);
}
conic-gradient — শঙ্কু আকারে Conic
/* শঙ্কু আকারে — Pie Chart এর মতো */
.pie { background-image: conic-gradient(red 0deg, blue 120deg, green 240deg); }
.wheel { background-image: conic-gradient(red, yellow, green, blue, red); }
/* Pie Chart */
.pie-chart {
background-image: conic-gradient(
#e63946 0% 30%, /* ৩০% লাল */
#1d3557 30% 65%, /* ৩৫% নীল */
#2a9d8f 65% 100% /* ৩৫% সবুজ */
);
border-radius: 50%;
width: 200px; height: 200px;
}
repeating-gradient — বারবার গ্রেডিয়েন্ট Repeating
/* ডোরাকাটা প্যাটার্ন */
.stripes {
background-image: repeating-linear-gradient(
45deg,
#e63946,
#e63946 10px,
#fff 10px,
#fff 20px
);
}
/* বৃত্তাকার ডোরা */
.rings {
background-image: repeating-radial-gradient(
circle,
#1d3557 0px,
#1d3557 5px,
#fff 5px,
#fff 10px
);
}
🔷 ৯. একাধিক Background — স্তরে স্তরে
একটি এলিমেন্টে একাধিক background-image কমা দিয়ে আলাদা করে দেওয়া যায়। প্রথমটি সবার উপরে, শেষেরটি সবার নিচে — স্তরে স্তরে সাজানো হয়।
/* একাধিক ছবি — স্তরে স্তরে */
.layered {
background-image:
url("overlay.png"), /* সবার উপরে */
url("pattern.png"), /* মাঝে */
url("hero.jpg"); /* সবার নিচে */
background-repeat:
no-repeat,
repeat,
no-repeat;
background-position:
center,
top left,
center;
background-size:
auto,
50px 50px,
cover;
}
/* গ্রেডিয়েন্ট + ছবি — সবচেয়ে জনপ্রিয় */
.hero {
background-image:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), /* কালো আবরণ */
url("hero.jpg"); /* আসল ছবি */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
✅ সেরা কৌশল: Hero section-এ ছবি ব্যবহার করলে
সরাসরি ছবির উপর লেখা না দিয়ে একটি
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)) স্তর দাও —
লেখা পড়তে সহজ হবে এবং ডিজাইন পেশাদার দেখাবে।
🔷 ১০. background Shorthand — সব একসাথে
background Shorthand দিয়ে সব background property
এক লাইনে লেখা যায়। size লিখতে হলে position-এর পরে
/ দিয়ে লিখতে হয়।
/* background: color image repeat attachment position / size */
/* সম্পূর্ণ উদাহরণ */
.hero {
background: #1a1a2e url("hero.jpg") no-repeat fixed center / cover;
}
/* আলাদা আলাদা লেখার সমতুল্য */
.hero {
background-color: #1a1a2e;
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
/* শুধু রঙ */
body { background: #f5f5f5; }
/* গ্রেডিয়েন্ট + অবস্থান + আকার */
.card {
background: linear-gradient(135deg, #667eea, #764ba2) no-repeat center / cover;
}
/* একাধিক background-এ Shorthand */
.multi {
background:
url("top.png") no-repeat top center / 100% auto,
linear-gradient(#1a1a2e, #16213e);
}
⚠️ Shorthand-এর সতর্কতা:
background Shorthand ব্যবহার করলে
উল্লেখ না করা সব মান ডিফল্টে রিসেট হয়।
তাই বড় প্রজেক্টে প্রতিটি Property আলাদাভাবে লেখা বেশি নিরাপদ।
🔷 ১১. বাস্তব উদাহরণ — সম্পূর্ণ সেটআপ
Hero Section Hero
/* সম্পূর্ণ Hero Section */
.hero {
background-color: #1a1a2e; /* Fallback রঙ */
background-image:
linear-gradient( /* গাঢ় আবরণ */
rgba(0, 0, 0, 0.55),
rgba(0, 0, 0, 0.55)
),
url("hero.jpg"); /* আসল ছবি */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed; /* Parallax */
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.hero h1 {
/* গ্রেডিয়েন্ট লেখা */
background-image: linear-gradient(90deg, #f5a623, #e63946);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: 4rem;
}
Card-এ সূক্ষ্ম Pattern Pattern
/* CSS দিয়েই Pattern — কোনো ছবি নেই */
.grid-card {
background-color: #f8fafc;
background-image:
linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
background-size: 20px 20px;
}
.dot-card {
background-color: #f8fafc;
background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1px);
background-size: 20px 20px;
}
Glassmorphism Card Glass
/* কাচের মতো স্বচ্ছ Card */
.glass-card {
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
🔷 দ্রুত রেফারেন্স — সব Background Property এক জায়গায়
| Property | কাজ | সাধারণ মান / উদাহরণ | ডিফল্ট |
|---|---|---|---|
| background-color | ব্যাকগ্রাউন্ড রঙ | #fff, rgba(0,0,0,0.5) |
transparent |
| background-image | ব্যাকগ্রাউন্ড ছবি বা গ্রেডিয়েন্ট | url("bg.jpg"), linear-gradient(...) |
none |
| background-repeat | পুনরাবৃত্তি | no-repeat, repeat, repeat-x |
repeat |
| background-position | ছবির অবস্থান | center, top left, 50% 50% |
0% 0% |
| background-size | ছবির আকার | cover, contain, 100px 200px |
auto |
| background-attachment | স্ক্রল আচরণ | scroll, fixed, local |
scroll |
| background-origin | ছবি শুরুর বিন্দু | padding-box, border-box, content-box |
padding-box |
| background-clip | ব্যাকগ্রাউন্ড কতটুকু দেখাবে | border-box, padding-box, text |
border-box |
| background | Shorthand — সব একসাথে | #fff url("bg.jpg") no-repeat center / cover |
— |
Gradient সারসংক্ষেপ Gradient
| ধরন | Syntax | আকার | কখন ব্যবহার |
|---|---|---|---|
| linear-gradient | linear-gradient(to right, red, blue) |
সরল রেখায় | Button, Hero, Card |
| radial-gradient | radial-gradient(circle, red, blue) |
কেন্দ্র থেকে বাইরে | Glow effect, Spotlight |
| conic-gradient | conic-gradient(red, blue) |
শঙ্কু আকারে | Pie Chart, Color Wheel |
| repeating-linear | repeating-linear-gradient(...) |
বারবার সরল রেখায় | ডোরাকাটা প্যাটার্ন |
| repeating-radial | repeating-radial-gradient(...) |
বারবার বৃত্তাকারে | রিং প্যাটার্ন |
✅ Hero Section-এর সেরা সূত্র:
background-color (Fallback) +
linear-gradient (আবরণ) +
url() (ছবি) +
background-size: cover +
background-position: center +
background-repeat: no-repeat —
এই ছয়টি দিলেই পেশাদার Hero Section তৈরি হয়।
🎨 CSS Colors — সম্পূর্ণ নোট
এই সেকশনে CSS-এর সব রঙ সংক্রান্ত বিষয় — রঙের ফরম্যাট, নামকরণ, স্বচ্ছতা, কাস্টম প্রপার্টি, রঙ ফাংশন এবং বাস্তব ব্যবহার বিস্তারিত ব্যাখ্যা সহ বোঝানো হয়েছে।
🔷 CSS Color কী?
CSS Color দিয়ে ওয়েবপেজের যেকোনো উপাদানের রঙ নির্ধারণ করা হয় — লেখার রঙ, ব্যাকগ্রাউন্ড, বর্ডার, ছায়া সবকিছুতেই রঙ ব্যবহার হয়।
সহজ ভাষায় — CSS Color হলো ওয়েব ডিজাইনের তুলি ও রঙের বাক্স। একই রঙ বিভিন্ন ফরম্যাটে লেখা যায় — সব একই কাজ করে, কিন্তু প্রতিটির আলাদা সুবিধা আছে।
রঙ ব্যবহার হয় এমন Property — এক নজরে Overview
| Property | কাজ | উদাহরণ |
|---|---|---|
color |
লেখার রঙ | color: #333; |
background-color |
ব্যাকগ্রাউন্ডের রঙ | background-color: #f0f4f8; |
border-color |
বর্ডারের রঙ | border-color: #e2e8f0; |
outline-color |
Outline-এর রঙ | outline-color: blue; |
box-shadow |
ছায়ার রঙ | box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
text-shadow |
লেখার ছায়ার রঙ | text-shadow: 1px 1px 2px #000; |
caret-color |
Input-এর কার্সারের রঙ | caret-color: #3b82f6; |
CSS-এ রঙের সব ফরম্যাট — এক নজরে Format
| ফরম্যাট | উদাহরণ | বৈশিষ্ট্য |
|---|---|---|
| নাম | red, blue, coral |
সহজ, কিন্তু সীমিত (১৪০টি) |
| Hex | #ff0000, #1a1a2e |
সবচেয়ে বেশি ব্যবহৃত ✅ |
| Hex (Short) | #f00, #fff |
সংক্ষিপ্ত Hex |
| Hex (Alpha) | #ff000080 |
স্বচ্ছতা সহ Hex |
| RGB | rgb(255, 0, 0) |
লাল, সবুজ, নীল মিশ্রণ |
| RGBA | rgba(0, 0, 0, 0.5) |
স্বচ্ছতা সহ RGB ✅ |
| HSL | hsl(0, 100%, 50%) |
রঙ নিয়ন্ত্রণ সহজ |
| HSLA | hsla(220, 80%, 50%, 0.8) |
স্বচ্ছতা সহ HSL |
| currentColor | border-color: currentColor; |
বর্তমান color-এর মান নেয় |
| transparent | background-color: transparent; |
সম্পূর্ণ স্বচ্ছ |
🔷 ১. Named Colors — নামে রঙ
CSS-এ সরাসরি ইংরেজি নামে রঙ লেখা যায়।
মোট ১৪০টিরও বেশি নামকৃত রঙ আছে — যেমন red,
blue, coral, tomato, orchid।
/* সাধারণ নামকৃত রঙ */
h1 { color: red; }
p { color: black; }
body { background-color: white; }
nav { background-color: navy; }
/* বিশেষ নামকৃত রঙ */
.transparent-box { background-color: transparent; } /* সম্পূর্ণ স্বচ্ছ */
/* সুন্দর নামকৃত রঙ — ডিজাইনে ব্যবহার */
.card { background-color: ivory; }
.tag { background-color: lavender; }
.alert { background-color: tomato; color: white; }
.badge { background-color: coral; }
.note { background-color: lightgoldenrodyellow; }
জনপ্রিয় Named Colors Popular
| নাম | রঙ | ব্যবহার |
|---|---|---|
white |
#ffffff | ব্যাকগ্রাউন্ড, Card |
black |
#000000 | লেখা, বর্ডার |
red |
#ff0000 | Error, Alert |
tomato |
#ff6347 | Button, Badge |
coral |
#ff7f50 | Highlight, Tag |
navy |
#000080 | Navbar, Header |
teal |
#008080 | Primary color |
gold |
#ffd700 | Star, Premium badge |
transparent |
(স্বচ্ছ) | Button bg, Overlay |
✅ পরামর্শ: Named Color সহজে বোঝা যায়, কিন্তু
ডিজাইন সিস্টেমে
Hex বা HSL ব্যবহার করাই ভালো —
কারণ তখন রঙের সামান্য পরিবর্তনও নিয়ন্ত্রণে রাখা যায়।
🔷 ২. Hex Color — হেক্স কোড
Hex Color হলো ১৬-ভিত্তিক সংখ্যা পদ্ধতিতে রঙ প্রকাশের উপায়।
ফরম্যাট: #RRGGBB — প্রথম দুটি লাল,
মাঝের দুটি সবুজ, শেষের দুটি নীল।
/* ফরম্যাট: #RRGGBB */
p { color: #ff0000; } /* বিশুদ্ধ লাল — R=ff G=00 B=00 */
p { color: #00ff00; } /* বিশুদ্ধ সবুজ — R=00 G=ff B=00 */
p { color: #0000ff; } /* বিশুদ্ধ নীল — R=00 G=00 B=ff */
p { color: #000000; } /* কালো — সব ০ */
p { color: #ffffff; } /* সাদা — সব f */
/* বাস্তব ডিজাইনে ব্যবহৃত Hex */
body { background-color: #f8fafc; } /* হালকা ধূসর ব্যাকগ্রাউন্ড */
h1 { color: #1e293b; } /* গাঢ় লেখার রঙ */
.btn { background-color: #3b82f6; } /* নীল বাটন */
.err { color: #ef4444; } /* লাল Error */
.ok { color: #22c55e; } /* সবুজ Success */
Short Hex — সংক্ষিপ্ত কোড Short
প্রতিটি রঙের জোড়া একই অক্ষরে হলে তিন অক্ষরে লেখা যায়।
যেমন: #ffffff → #fff, #ff0000 → #f00।
/* পূর্ণ Hex → Short Hex */
#ffffff → #fff /* সাদা */
#000000 → #000 /* কালো */
#ff0000 → #f00 /* লাল */
#00ff00 → #0f0 /* সবুজ */
#0000ff → #00f /* নীল */
#aabbcc → #abc /* নীলাভ ধূসর */
#ffcc00 → #fc0 /* হলুদ */
/* ব্যবহার */
p { color: #333; } /* #333333 = গাঢ় ধূসর */
body { background: #f5f5f5; } /* এটি Short করা যাবে না — #f5f5f5 অসমান */
Hex + Alpha — স্বচ্ছতা সহ Hex Alpha
৮ অক্ষরের Hex দিয়ে স্বচ্ছতা নির্ধারণ করা যায় — শেষের দুটি অক্ষর Alpha।
00 = সম্পূর্ণ স্বচ্ছ, ff = সম্পূর্ণ অস্বচ্ছ।
/* ফরম্যাট: #RRGGBBAA */
.overlay { background-color: #00000080; } /* কালো ৫০% স্বচ্ছ */
.modal { background-color: #ffffff99; } /* সাদা ৬০% স্বচ্ছ */
.glass { background-color: #3b82f640; } /* নীল ২৫% স্বচ্ছ */
/* Alpha মানের রেফারেন্স */
/* ff = 100% (অস্বচ্ছ) cc = 80% 99 = 60% 80 = 50% 66 = 40% 33 = 20% 00 = 0% (স্বচ্ছ) */
🔷 ৩. RGB ও RGBA — লাল সবুজ নীলের মিশ্রণ
rgb() ফাংশনে তিনটি মান দিতে হয় — লাল, সবুজ, নীল।
প্রতিটি মান ০ থেকে ২৫৫-এর মধ্যে।
rgba()-তে চতুর্থ মান হলো স্বচ্ছতা (০–১)।
/* rgb(লাল, সবুজ, নীল) */
p { color: rgb(255, 0, 0); } /* বিশুদ্ধ লাল */
p { color: rgb(0, 128, 0); } /* সবুজ */
p { color: rgb(0, 0, 255); } /* বিশুদ্ধ নীল */
p { color: rgb(0, 0, 0); } /* কালো */
p { color: rgb(255, 255, 255); } /* সাদা */
p { color: rgb(128, 128, 128); } /* মাঝারি ধূসর */
/* বাস্তব উদাহরণ */
nav { background-color: rgb(26, 26, 46); } /* গাঢ় নেভি */
.btn { background-color: rgb(59, 130, 246); } /* নীল বাটন */
rgba() — স্বচ্ছতা সহ RGBA
/* rgba(লাল, সবুজ, নীল, স্বচ্ছতা) */
/* স্বচ্ছতা: 0 = সম্পূর্ণ স্বচ্ছ → 1 = সম্পূর্ণ অস্বচ্ছ */
.overlay { background-color: rgba(0, 0, 0, 0.5); } /* কালো ৫০% স্বচ্ছ — Overlay */
.modal { background-color: rgba(0, 0, 0, 0.7); } /* মডালের পেছনের ছায়া */
.glass { background-color: rgba(255, 255, 255, 0.15); } /* Glassmorphism */
.tooltip { background-color: rgba(30, 41, 59, 0.9); } /* ৯০% অস্বচ্ছ Tooltip */
/* shadow-এ rgba */
.card {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* হালকা ছায়া */
}
.btn:hover {
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4); /* নীল glow */
}
আধুনিক rgb() সিনট্যাক্স Modern
আধুনিক CSS-এ rgb() এবং rgba() একীভূত হয়েছে।
কমার বদলে স্পেস এবং Alpha-র জন্য / ব্যবহার করা যায়।
/* পুরনো সিনট্যাক্স */
color: rgba(59, 130, 246, 0.8);
/* নতুন সিনট্যাক্স — CSS Color Level 4 */
color: rgb(59 130 246 / 0.8); /* স্পেস + / */
color: rgb(59 130 246 / 80%); /* % দিয়েও Alpha */
/* উভয়ই একই কাজ করে — নতুন সব ব্রাউজারে সমর্থিত */
🔷 ৪. HSL ও HSLA — রঙ, তীব্রতা, উজ্জ্বলতা
hsl()-এ তিনটি মান — Hue (রঙের অবস্থান),
Saturation (তীব্রতা), Lightness (উজ্জ্বলতা)।
রঙের শেড ও ভ্যারিয়েশন বানাতে এটি সবচেয়ে সুবিধাজনক।
/* hsl(Hue, Saturation%, Lightness%) */
/* Hue = 0-360 ডিগ্রি */
p { color: hsl(0, 100%, 50%); } /* লাল — Hue=0 */
p { color: hsl(120, 100%, 50%); } /* সবুজ — Hue=120 */
p { color: hsl(240, 100%, 50%); } /* নীল — Hue=240 */
p { color: hsl(60, 100%, 50%); } /* হলুদ — Hue=60 */
p { color: hsl(300, 100%, 50%); } /* বেগুনী — Hue=300 */
/* Saturation পরিবর্তন */
p { color: hsl(240, 0%, 50%); } /* ধূসর — Saturation=0% */
p { color: hsl(240, 50%, 50%); } /* মাঝারি নীল */
p { color: hsl(240, 100%, 50%); } /* বিশুদ্ধ নীল */
/* Lightness পরিবর্তন */
p { color: hsl(240, 100%, 10%); } /* খুব গাঢ় নীল */
p { color: hsl(240, 100%, 50%); } /* স্বাভাবিক নীল */
p { color: hsl(240, 100%, 90%); } /* খুব হালকা নীল */
একটি রঙ থেকে শেড — HSL-এর সেরা ব্যবহার Shades
HSL-এর সবচেয়ে বড় সুবিধা হলো একই Hue রেখে Lightness পরিবর্তন করলে একটি রঙের সম্পূর্ণ শেড পরিবার পাওয়া যায়। এভাবেই Tailwind, Bootstrap-এর রঙ পরিবার তৈরি।
/* একই নীল রঙের আলাদা শেড — শুধু Lightness পরিবর্তন */
.blue-50 { color: hsl(220, 90%, 96%); } /* খুব হালকা */
.blue-100 { color: hsl(220, 90%, 90%); }
.blue-200 { color: hsl(220, 90%, 80%); }
.blue-300 { color: hsl(220, 90%, 70%); }
.blue-400 { color: hsl(220, 90%, 60%); }
.blue-500 { color: hsl(220, 90%, 50%); } /* মূল রঙ */
.blue-600 { color: hsl(220, 90%, 40%); }
.blue-700 { color: hsl(220, 90%, 30%); }
.blue-800 { color: hsl(220, 90%, 20%); }
.blue-900 { color: hsl(220, 90%, 10%); } /* খুব গাঢ় */
hsla() — স্বচ্ছতা সহ HSLA
/* hsla(Hue, Saturation%, Lightness%, Alpha) */
.overlay { background-color: hsla(220, 80%, 10%, 0.8); }
.tooltip { background-color: hsla(0, 0%, 0%, 0.75); }
/* আধুনিক সিনট্যাক্স */
.glass { background-color: hsl(220 80% 50% / 0.2); }
HSL বনাম RGB — পার্থক্য তুলনা
| বিষয় | RGB | HSL |
|---|---|---|
| পড়তে সহজ? | না — সংখ্যা মনে রাখা কঠিন | হ্যাঁ — রঙ, তীব্রতা, উজ্জ্বলতা স্পষ্ট ✅ |
| শেড বানানো | কঠিন — তিনটি মানই পরিবর্তন করতে হয় | সহজ — শুধু Lightness পরিবর্তন করো ✅ |
| ডিজাইন টুল | Photoshop, পুরনো টুল | Figma, আধুনিক টুল |
| ব্রাউজার সমর্থন | সব ব্রাউজারে ✅ | সব ব্রাউজারে ✅ |
🔷 ৫. currentColor ও transparent — বিশেষ কীওয়ার্ড
currentColor — বর্তমান লেখার রঙ ব্যবহার currentColor
currentColor কীওয়ার্ড এলিমেন্টের color প্রপার্টির
বর্তমান মান নিয়ে নেয়। একবার রঙ ঠিক করলে বাকি সব জায়গায়
স্বয়ংক্রিয়ভাবে মিলে যায়।
/* currentColor — color প্রপার্টির মান নেয় */
.btn {
color: #3b82f6; /* লেখার রঙ নীল */
border: 2px solid currentColor; /* বর্ডারও নীল */
box-shadow: 0 0 8px currentColor; /* ছায়াও নীল */
}
/* hover করলে color পরিবর্তন → সব জায়গায় পরিবর্তন */
.btn:hover {
color: #ef4444; /* সব একসাথে লাল হয়ে যাবে */
}
/* SVG Icon-এ currentColor */
svg { fill: currentColor; } /* SVG Icon লেখার রঙের সাথে মিলবে */
/* উদ্ধৃতি চিহ্ন বা Decoration-এ */
blockquote {
color: #64748b;
border-left: 4px solid currentColor; /* বর্ডার লেখার রঙেই হবে */
}
transparent — সম্পূর্ণ স্বচ্ছ transparent
transparent = rgba(0, 0, 0, 0)।
Outline Button, Gradient fade-out এবং Hover animation-এ বহুল ব্যবহৃত।
/* Outline Button */
.btn-outline {
background-color: transparent; /* স্বচ্ছ ব্যাকগ্রাউন্ড */
border: 2px solid #3b82f6;
color: #3b82f6;
}
.btn-outline:hover {
background-color: #3b82f6; /* hover-এ ভরাট */
color: white;
}
/* Gradient Fade — শুরু বা শেষে মিলিয়ে যাওয়া */
.fade-right {
background: linear-gradient(to right, #1e293b, transparent);
}
/* Border transparent → hover-এ দেখানো */
.card {
border: 2px solid transparent;
}
.card:hover {
border-color: #3b82f6;
}
🔷 ৬. CSS Custom Properties — রঙের ভেরিয়েবল
CSS Custom Properties (CSS Variables) দিয়ে রঙ একবার ঠিক করে পুরো পেজে ব্যবহার করা যায়। Design System ও Dark Mode-এর ভিত্তি এটি।
/* :root-এ রঙের ভেরিয়েবল তৈরি */
:root {
--color-primary: #3b82f6; /* মূল নীল */
--color-secondary: #8b5cf6; /* বেগুনী */
--color-success: #22c55e; /* সবুজ */
--color-danger: #ef4444; /* লাল */
--color-warning: #f59e0b; /* হলুদ */
--color-text: #1e293b; /* গাঢ় লেখা */
--color-text-muted: #64748b; /* ম্লান লেখা */
--color-bg: #f8fafc; /* ব্যাকগ্রাউন্ড */
--color-surface: #ffffff; /* Card ব্যাকগ্রাউন্ড */
--color-border: #e2e8f0; /* বর্ডার */
}
/* ব্যবহার */
body { background-color: var(--color-bg); color: var(--color-text); }
.btn { background-color: var(--color-primary); }
.card { background-color: var(--color-surface); border: 1px solid var(--color-border); }
.err { color: var(--color-danger); }
.ok { color: var(--color-success); }
Dark Mode — CSS Variable দিয়ে Dark Mode
একই ভেরিয়েবল নাম রেখে মান পরিবর্তন করলেই Dark Mode তৈরি হয়।
ব্যবহারকারীর সিস্টেম সেটিং অনুযায়ী prefers-color-scheme দিয়ে
স্বয়ংক্রিয়ভাবে প্রয়োগ হয়।
/* Light Mode — ডিফল্ট */
:root {
--color-bg: #f8fafc;
--color-surface: #ffffff;
--color-text: #1e293b;
--color-border: #e2e8f0;
}
/* Dark Mode — সিস্টেম সেটিং অনুযায়ী */
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #0f172a;
--color-surface: #1e293b;
--color-text: #f1f5f9;
--color-border: #334155;
}
}
/* এখন body, card সব স্বয়ংক্রিয়ভাবে পরিবর্তন হবে — আলাদা CSS দরকার নেই */
✅ পরামর্শ: প্রতিটি রঙ সরাসরি না লিখে সবসময়
CSS Variable ব্যবহার করো। পরে যেকোনো রঙ পরিবর্তন করতে মাত্র একটি জায়গায়
পরিবর্তন করলেই পুরো পেজে প্রতিফলিত হবে।
🔷 ৭. আধুনিক রঙের ফাংশন — CSS Color Level 4
CSS Color Level 4-এ নতুন ফাংশন যোগ হয়েছে — রঙ আরও সঠিকভাবে প্রকাশ করা যায় এবং রঙের উপর গণনা করা যায়।
oklch() — সেরা আধুনিক রঙ ফরম্যাট oklch
oklch() হলো সবচেয়ে আধুনিক রঙ ফরম্যাট।
HSL-এর মতো কিন্তু মানুষের চোখে সব শেড সমান উজ্জ্বল দেখায় —
Tailwind CSS v4 এই ফরম্যাট ব্যবহার করে।
/* oklch(Lightness Chroma Hue) */
/* Lightness: 0 = কালো, 1 = সাদা */
/* Chroma: 0 = ধূসর, 0.4 = বিশুদ্ধ রঙ */
/* Hue: 0-360 ডিগ্রি */
.btn { background-color: oklch(0.55 0.2 250); } /* নীল */
.danger { background-color: oklch(0.55 0.2 25); } /* লাল */
.ok { background-color: oklch(0.55 0.2 145); } /* সবুজ */
/* Alpha সহ */
.glass { background-color: oklch(0.55 0.2 250 / 0.5); }
color-mix() — দুটি রঙ মেশানো color-mix
color-mix() দিয়ে দুটি রঙ নির্দিষ্ট অনুপাতে মেশানো যায়।
একটি রঙকে সাদা বা কালোর সাথে মিশিয়ে Tint ও Shade তৈরি করতে খুবই কার্যকর।
/* color-mix(in colorspace, color1 percent, color2) */
/* নীলকে সাদার সাথে মিশিয়ে হালকা করা (Tint) */
.light-blue { color: color-mix(in srgb, #3b82f6 30%, white); }
/* নীলকে কালোর সাথে মিশিয়ে গাঢ় করা (Shade) */
.dark-blue { color: color-mix(in srgb, #3b82f6 70%, black); }
/* দুটি রঙ মেশানো */
.mixed { background-color: color-mix(in oklch, #3b82f6, #8b5cf6); }
/* পরিবর্তনশীল অনুপাত */
.hover-bg { background: color-mix(in srgb, var(--color-primary) 10%, white); }
✅ ব্রাউজার সমর্থন:
oklch() ও color-mix()
Chrome 111+, Firefox 113+, Safari 16.4+ থেকে সমর্থিত।
পুরনো ব্রাউজারের জন্য @supports দিয়ে Fallback দাও।
🔷 ৮. রঙ ও Accessibility — সবার জন্য পড়ার উপযোগী
Contrast Ratio হলো পটভূমি ও লেখার রঙের উজ্জ্বলতার পার্থক্য। WCAG মান অনুযায়ী সাধারণ লেখায় ন্যূনতম ৪.৫:১ অনুপাত থাকতে হবে — নইলে দৃষ্টিশক্তি দুর্বল ব্যবহারকারীরা পড়তে পারবেন না।
| WCAG স্তর | সাধারণ লেখা | বড় লেখা (18px+) | উদ্দেশ্য |
|---|---|---|---|
| AA | ৪.৫ : ১ | ৩ : ১ | ন্যূনতম মান — সবার জন্য ✅ |
| AAA | ৭ : ১ | ৪.৫ : ১ | সর্বোচ্চ Accessibility |
| ব্যর্থ | ৪.৫-এর নিচে | ৩-এর নিচে | পড়তে কষ্ট হয় ❌ |
/* ✅ ভালো Contrast — পড়তে সহজ */
.good-1 { background-color: #ffffff; color: #1e293b; } /* Ratio: 17.6:1 */
.good-2 { background-color: #1e293b; color: #f1f5f9; } /* Ratio: 15.7:1 */
.good-3 { background-color: #3b82f6; color: #ffffff; } /* Ratio: 4.5:1 — ঠিক মাত্রায় */
/* ❌ খারাপ Contrast — পড়তে কষ্ট হয় */
.bad-1 { background-color: #ffffff; color: #aaaaaa; } /* হালকা ধূসর লেখা */
.bad-2 { background-color: #fbbf24; color: #ffffff; } /* হলুদে সাদা লেখা */
.bad-3 { background-color: #3b82f6; color: #2563eb; } /* নীলে নীল লেখা */
✅ রঙ পরীক্ষার টুল: WebAIM Contrast Checker
(
webaim.org/resources/contrastchecker) বা
Chrome DevTools-এর Accessibility সেকশনে Contrast Ratio পরীক্ষা করা যায়।
শুধু রঙের উপর নির্ভর না করে আইকন বা আকৃতি দিয়ে তথ্য প্রকাশ করো।
🔷 ৯. বাস্তব উদাহরণ — সম্পূর্ণ সেটআপ
Design System — রঙের ব্যবস্থাপনা Design System
/* Design System Color Tokens */
:root {
/* Brand Colors */
--brand-50: hsl(220, 100%, 97%);
--brand-100: hsl(220, 96%, 93%);
--brand-500: hsl(220, 90%, 56%); /* Primary */
--brand-600: hsl(220, 85%, 48%); /* Primary Hover */
--brand-900: hsl(220, 70%, 15%);
/* Semantic Colors */
--color-primary: var(--brand-500);
--color-success: hsl(142, 72%, 42%);
--color-warning: hsl(38, 95%, 55%);
--color-danger: hsl(0, 90%, 60%);
/* Neutral Colors */
--color-text: hsl(222, 47%, 11%);
--color-text-muted: hsl(220, 14%, 46%);
--color-bg: hsl(210, 40%, 98%);
--color-surface: hsl(0, 0%, 100%);
--color-border: hsl(220, 13%, 91%);
}
Status Badge — রঙ দিয়ে অবস্থা জানানো Badge
/* Status Badge — HSL দিয়ে শেড তৈরি */
.badge {
display: inline-block;
padding: 4px 12px;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
}
.badge-success {
background-color: hsl(142, 76%, 90%); /* হালকা সবুজ ব্যাকগ্রাউন্ড */
color: hsl(142, 72%, 28%); /* গাঢ় সবুজ লেখা */
}
.badge-danger {
background-color: hsl(0, 93%, 94%);
color: hsl(0, 72%, 40%);
}
.badge-warning {
background-color: hsl(38, 100%, 92%);
color: hsl(38, 90%, 35%);
}
.badge-info {
background-color: hsl(220, 90%, 93%);
color: hsl(220, 80%, 40%);
}
Focus Ring — Keyboard Accessibility Focus
/* Focus Ring — Keyboard ব্যবহারকারীদের জন্য */
.btn:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}
/* Tailwind-এর মতো Custom Focus Color */
.input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
/* Dark Background-এ Focus */
.dark-btn:focus-visible {
outline: 3px solid white;
outline-offset: 3px;
}
🔷 দ্রুত রেফারেন্স — সব Color ফরম্যাট এক জায়গায়
| ফরম্যাট | সিনট্যাক্স | Alpha সমর্থন | কখন ব্যবহার |
|---|---|---|---|
| Named | red, coral |
না | দ্রুত প্রোটোটাইপ, সহজ রঙ |
| Hex | #3b82f6 |
না | সবচেয়ে বেশি ব্যবহৃত ✅ |
| Hex Alpha | #3b82f680 |
হ্যাঁ | Hex + স্বচ্ছতা |
| rgb() | rgb(59, 130, 246) |
না | JS থেকে গণনা করা রঙে |
| rgba() | rgba(0, 0, 0, 0.5) |
হ্যাঁ | Overlay, Shadow ✅ |
| hsl() | hsl(220, 90%, 56%) |
না | শেড বানানো, Design System ✅ |
| hsla() | hsla(220, 90%, 56%, 0.8) |
হ্যাঁ | HSL + স্বচ্ছতা |
| oklch() | oklch(0.55 0.2 250) |
হ্যাঁ | আধুনিক Design System |
| color-mix() | color-mix(in srgb, red, blue) |
হ্যাঁ | রঙ মেশানো, Tint/Shade |
| currentColor | border-color: currentColor; |
— | color প্রপার্টির মান নেওয়া |
| transparent | background: transparent; |
— | Outline Button, Gradient |
কোন পরিস্থিতিতে কোন ফরম্যাট ব্যবহার করবে কখন কী
| পরিস্থিতি | সুপারিশ | কারণ |
|---|---|---|
| সাধারণ রঙ (বর্ডার, লেখা) | Hex |
সহজ, ডিজাইন টুলে পাওয়া যায় |
| স্বচ্ছতা দরকার | rgba() |
সহজবোধ্য Alpha নিয়ন্ত্রণ ✅ |
| শেড পরিবার বানানো | hsl() |
শুধু Lightness পরিবর্তন করলেই হয় |
| Design System | CSS Variable + hsl() |
একসাথে পরিবর্তন, Theme সমর্থন |
| Overlay, Modal পর্দা | rgba(0,0,0,0.5) |
স্বচ্ছ কালো আবরণ |
| আধুনিক প্রজেক্ট | oklch() |
পার্সেপচুয়ালি সমান উজ্জ্বলতা |
✅ সেরা অভ্যাস:
:root-এ CSS Variable হিসেবে রঙ সংরক্ষণ করো +
শেড বানাতে hsl() ব্যবহার করো +
স্বচ্ছতার জন্য rgba() বা / alpha ব্যবহার করো +
সবসময় Contrast Ratio পরীক্ষা করো —
এই চারটি নিয়ম মানলেই পেশাদার ও Accessible রঙ ব্যবস্থাপনা হবে।
📦 CSS Box Model — সম্পূর্ণ নোট
এই সেকশনে CSS Box Model-এর সব বিষয় — Content, Padding, Border, Margin, box-sizing, collapse, display এবং বাস্তব ব্যবহার বিস্তারিত ব্যাখ্যা সহ বোঝানো হয়েছে।
🔷 CSS Box Model কী?
CSS-এ প্রতিটি HTML এলিমেন্ট একটি আয়তক্ষেত্রাকার বাক্স হিসেবে গণ্য হয়। এই বাক্সটি চারটি স্তর নিয়ে তৈরি — ভেতর থেকে বাইরের দিকে: Content → Padding → Border → Margin।
সহজ ভাষায় — একটি ছবির ফ্রেমের কথা ভাবো। Content = ছবি, Padding = ছবি ও ফ্রেমের মাঝের ফাঁকা জায়গা, Border = ফ্রেম, Margin = ফ্রেম ও দেওয়ালের মাঝের দূরত্ব।
Box Model-এর চারটি স্তর — এক নজরে Overview
| স্তর | কাজ | Property | ডিফল্ট |
|---|---|---|---|
| Content | আসল লেখা বা ছবি থাকে এখানে | width, height |
কন্টেন্টের আকার |
| Padding | Content ও Border-এর মাঝের ভেতরের ফাঁকা জায়গা | padding |
0 |
| Border | Padding-এর চারপাশে সীমারেখা | border |
0 |
| Margin | Border-এর বাইরে অন্য এলিমেন্টের সাথে দূরত্ব | margin |
0 |
মোট আকার গণনা — ডিফল্ট নিয়ম Calculation
/* একটি div-এর উদাহরণ */
.box {
width: 300px; /* Content প্রস্থ */
padding: 20px; /* চারদিকে ২০px — বাম ও ডান মিলে ৪০px */
border: 5px solid #333; /* চারদিকে ৫px — বাম ও ডান মিলে ১০px */
margin: 30px; /* বাইরে ৩০px ফাঁকা — মোট আকারে যোগ হয় না */
}
/* ডিফল্টে মোট প্রস্থ (Margin বাদে):
300 + 40 (padding) + 10 (border) = 350px
অনেক সময় এটি বিভ্রান্তিকর — তাই box-sizing: border-box ব্যবহার করা হয় */
✅ সবচেয়ে গুরুত্বপূর্ণ বিষয়: ডিফল্ট Box Model-এ
width: 300px দিলেও বাস্তবে এলিমেন্ট ৩৫০px জায়গা নিতে পারে।
এই সমস্যা সমাধানের জন্য box-sizing: border-box ব্যবহার করা হয় —
যা পরে বিস্তারিত আলোচনা করা হয়েছে।
🔷 ১. Content — লেখা ও ছবির এলাকা
width ও height দিয়ে Content এলাকার আকার
নির্ধারণ করা হয়। ডিফল্টে এই মান শুধু Content-এর আকার — Padding ও Border যোগ হয় না।
/* নির্দিষ্ট আকার */
.box { width: 300px; height: 200px; }
/* শতাংশে — parent এলিমেন্টের অনুপাতে */
.box { width: 100%; } /* parent-এর পূর্ণ প্রস্থ */
.box { width: 50%; } /* parent-এর অর্ধেক */
/* auto — ডিফল্ট — কন্টেন্ট বা parent অনুযায়ী */
.box { width: auto; height: auto; }
min ও max — আকারের সীমা min / max
/* min-width — এর চেয়ে ছোট হবে না */
.btn { min-width: 120px; } /* বাটন সবসময় ন্যূনতম ১২০px */
/* max-width — এর চেয়ে বড় হবে না */
.container { max-width: 1200px; } /* কন্টেইনার ১২০০px-এর বেশি হবে না */
img { max-width: 100%; } /* ছবি parent-এর বাইরে যাবে না ✅ */
/* min-height — উচ্চতার ন্যূনতম সীমা */
.hero { min-height: 100vh; } /* স্ক্রিনের সম্পূর্ণ উচ্চতা ন্যূনতম */
.card { min-height: 200px; } /* Card কমপক্ষে ২০০px উঁচু */
/* সম্মিলিত ব্যবহার */
.sidebar {
width: 250px; /* সাধারণ অবস্থায় ২৫০px */
min-width: 200px; /* কমপক্ষে ২০০px */
max-width: 300px; /* সর্বোচ্চ ৩০০px */
}
overflow — কন্টেন্ট উপচে পড়লে overflow
| মান | আচরণ | কখন ব্যবহার |
|---|---|---|
visible |
উপচে বাইরে দেখাবে — ডিফল্ট | কন্টেন্ট কাটতে না চাইলে |
hidden |
বাইরের অংশ লুকিয়ে যাবে | Tooltip, Dropdown লুকানো ✅ |
scroll |
সবসময় Scrollbar দেখাবে | Scrollbar সবসময় দরকার হলে |
auto |
প্রয়োজনে Scrollbar দেখাবে | সাধারণ Scrollable এলাকায় ✅ |
clip |
কেটে দেবে, Scrollbar নেই | আধুনিক বিকল্প hidden-এর |
/* overflow ব্যবহার */
.card { overflow: hidden; } /* Card-এর বাইরে কন্টেন্ট যাবে না */
.sidebar { overflow-y: auto; } /* শুধু উপর-নিচে স্ক্রল */
.table { overflow-x: scroll; } /* শুধু বাম-ডানে স্ক্রল */
.modal { overflow: hidden; } /* Modal-এ body স্ক্রল বন্ধ */
/* text-overflow — লেখা উপচে পড়লে ... দেখানো */
.title {
white-space: nowrap; /* লেখা ভাঙবে না */
overflow: hidden; /* বাইরে যাবে না */
text-overflow: ellipsis; /* শেষে ... দেখাবে */
}
🔷 ২. Padding — ভেতরের ফাঁকা জায়গা
padding হলো Content ও Border-এর মাঝের ভেতরের ফাঁকা জায়গা।
Padding-এ background-color প্রযোজ্য হয় — তাই রঙ Padding পর্যন্ত ছড়িয়ে পড়ে।
চার দিকে আলাদা Padding Individual
/* চার দিক আলাদাভাবে */
.box {
padding-top: 20px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 15px;
}
Padding Shorthand — সংক্ষিপ্ত লেখা Shorthand
/* ১টি মান — চারদিকে সমান */
.box { padding: 20px; }
/* সমতুল্য: top=20 right=20 bottom=20 left=20 */
/* ২টি মান — উপর-নিচ | বাম-ডান */
.box { padding: 10px 20px; }
/* সমতুল্য: top=10 right=20 bottom=10 left=20 */
/* ৩টি মান — উপর | বাম-ডান | নিচ */
.box { padding: 10px 20px 15px; }
/* সমতুল্য: top=10 right=20 bottom=15 left=20 */
/* ৪টি মান — উপর | ডান | নিচ | বাম (ঘড়ির কাঁটার দিকে) */
.box { padding: 10px 20px 15px 5px; }
/* সমতুল্য: top=10 right=20 bottom=15 left=5 */
Padding-এর বাস্তব ব্যবহার Real Use
/* Button-এ Padding */
.btn {
padding: 12px 24px; /* উপর-নিচ ১২px, বাম-ডান ২৪px */
background-color: #3b82f6;
color: white;
border-radius: 8px;
}
/* Card-এ Padding */
.card { padding: 24px; }
/* Input-এ Padding */
.input { padding: 10px 14px; }
/* Section-এ বড় Padding */
.section { padding: 80px 0; } /* উপর-নিচ বড়, বাম-ডান শূন্য */
/* Responsive Padding */
.container {
padding-left: 16px;
padding-right: 16px;
}
✅ গুরুত্বপূর্ণ: Padding-এ background-color প্রযোজ্য হয়,
কিন্তু Margin-এ হয় না। Padding সরিয়ে নিলে কন্টেন্ট সরাসরি Border-এ
লেগে যাবে — তাই Button ও Card-এ সবসময় Padding দাও।
🔷 ৩. Border — সীমারেখা
border হলো Padding-এর চারপাশে সীমারেখা।
তিনটি বিষয় লাগে — মোটা (width), ধরন (style),
রঙ (color)। Style না দিলে border দেখা যায় না।
border-style — সীমারেখার ধরন Style
| মান | দেখতে | কখন ব্যবহার |
|---|---|---|
solid |
একটানা সরল রেখা | সবচেয়ে বেশি ব্যবহৃত ✅ |
dashed |
ড্যাশ ড্যাশ রেখা | Drag-and-drop এলাকা, খসড়া |
dotted |
বিন্দু বিন্দু রেখা | Decorative বা Tooltip |
double |
দুটি সমান্তরাল রেখা | Decorative Border |
none |
কোনো border নেই | border সরিয়ে দিতে ✅ |
hidden |
কোনো border নেই | Table-এ border লুকাতে |
/* Shorthand: border: width style color */
.box { border: 2px solid #e2e8f0; } /* সরল রেখা */
.box { border: 1px dashed #94a3b8; } /* ড্যাশ রেখা */
.box { border: 3px dotted #3b82f6; } /* বিন্দু রেখা */
/* চার দিক আলাদা */
.card { border-bottom: 4px solid #3b82f6; } /* শুধু নিচে */
.input { border: 1px solid #cbd5e1; }
.input:focus { border-color: #3b82f6; } /* focus-এ রঙ পরিবর্তন */
/* border সরিয়ে দেওয়া */
table td { border: none; }
.btn { border: 0; } /* border: none এবং border: 0 একই কাজ */
border-radius — গোল কোণ border-radius
/* চারটি কোণ সমান */
.card { border-radius: 8px; } /* সামান্য গোল */
.modal { border-radius: 16px; } /* বেশি গোল */
.badge { border-radius: 9999px; } /* Pill shape — সম্পূর্ণ গোল প্রান্ত */
.avatar { border-radius: 50%; } /* সম্পূর্ণ বৃত্তাকার */
/* আলাদা কোণ — top-left | top-right | bottom-right | bottom-left */
.card { border-radius: 16px 16px 0 0; } /* শুধু উপরের কোণ গোল */
/* আলাদা Property */
.box {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
outline — border-এর বাইরে আরেকটি রেখা outline
outline দেখতে border-এর মতো কিন্তু এটি Box Model-এর
বাইরে থাকে — কোনো জায়গা নেয় না এবং layout প্রভাবিত করে না।
Keyboard focus indicator হিসেবে ব্যবহৃত হয়।
/* outline — জায়গা নেয় না */
.btn:focus-visible {
outline: 3px solid #3b82f6;
outline-offset: 2px; /* border থেকে ২px দূরে */
}
/* outline সরিয়ে নিজের Focus style দেওয়া */
.custom-input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
🔷 ৪. Margin — বাইরের দূরত্ব
margin হলো Border-এর বাইরে অন্য এলিমেন্টের সাথে দূরত্ব।
Margin-এ কোনো background-color প্রযোজ্য হয় না — সবসময় স্বচ্ছ থাকে।
/* Shorthand — Padding-এর মতো একই নিয়ম */
.box { margin: 20px; } /* চারদিকে সমান */
.box { margin: 10px 20px; } /* উপর-নিচ | বাম-ডান */
.box { margin: 10px 20px 15px; } /* উপর | বাম-ডান | নিচ */
.box { margin: 10px 20px 15px 5px; } /* উপর | ডান | নিচ | বাম */
/* চার দিক আলাদা */
.box { margin-top: 20px; margin-bottom: 40px; }
margin: auto — মাঝে রাখো auto
/* অনুভূমিকভাবে মাঝে রাখা — সবচেয়ে পুরনো ও নির্ভরযোগ্য পদ্ধতি */
.container {
width: 800px;
margin: 0 auto; /* উপর-নিচ=0, বাম-ডান=auto → মাঝে */
}
/* Flexbox-এ margin: auto */
.nav {
display: flex;
}
.nav-logo { margin-right: auto; } /* logo-র পরের সব জায়গা ডানে ঠেলে দেয় */
.nav-links { /* এগুলো ডানে চলে যাবে */ }
/* একটি আইটেম কেন্দ্রে */
.card { margin-inline: auto; } /* আধুনিক বিকল্প — margin: 0 auto */
ঋণাত্মক Margin — টেনে আনা Negative
/* ঋণাত্মক Margin — এলিমেন্ট টেনে আনা */
.card { margin-top: -20px; } /* ২০px উপরে উঠে যাবে */
/* Card উপর থেকে বের হয়ে আসার Effect */
.hero-card {
margin-top: -60px; /* hero section-এর উপরে উঠে আসবে */
position: relative; /* z-index কাজ করতে */
z-index: 1;
}
/* চারপাশের extra margin সরানো */
.grid { margin: -16px; } /* grid gap-এর জন্য */
.grid > * { padding: 16px; }
Margin Collapse — একটি গুরুত্বপূর্ণ আচরণ Collapse
দুটি Block এলিমেন্টের উপর-নিচের Margin যোগ না হয়ে বড়টিই টিকে থাকে — এটাকে Margin Collapse বলে। এটি CSS-এর নিয়ম, Bug নয়।
/* Margin Collapse উদাহরণ */
.box-1 { margin-bottom: 30px; }
.box-2 { margin-top: 20px; }
/* দুটির মাঝে দূরত্ব = 30px (30+20=50 নয়!) — বড়টি জেতে */
/* Margin Collapse কোথায় হয় না */
/* ১. Flex বা Grid Container-এ */
.flex-parent { display: flex; flex-direction: column; }
/* ২. Float করা এলিমেন্টে */
/* ৩. Absolutely Positioned এলিমেন্টে */
/* ৪. overflow: hidden বা auto থাকলে */
/* Collapse এড়ানোর উপায় */
.parent { padding-top: 1px; } /* parent-এ padding দিলে child-এর margin collapse হয় না */
.parent { overflow: hidden; } /* overflow দিলেও হয় না */
🔷 ৫. box-sizing — আকার গণনার নিয়ম
box-sizing দিয়ে নির্ধারণ করা হয় width ও height
কী কী অন্তর্ভুক্ত করে। এটি CSS-এর সবচেয়ে গুরুত্বপূর্ণ নিয়মগুলোর একটি।
content-box — ডিফল্ট (বিভ্রান্তিকর) content-box
/* content-box — ডিফল্ট */
.box {
box-sizing: content-box; /* ডিফল্ট — না লিখলেও এটাই */
width: 300px; /* শুধু Content-এর প্রস্থ */
padding: 20px; /* এটি আলাদাভাবে যোগ হবে */
border: 5px solid #333; /* এটিও আলাদাভাবে যোগ হবে */
}
/* মোট প্রস্থ = 300 + 20 + 20 + 5 + 5 = 350px ← বিভ্রান্তিকর! */
border-box — আধুনিক পছন্দ ✅ border-box
/* border-box — সবচেয়ে সহজ ও নির্ভরযোগ্য */
.box {
box-sizing: border-box;
width: 300px; /* Content + Padding + Border মিলিয়ে ৩০০px */
padding: 20px; /* ভেতরে জায়গা নেবে */
border: 5px solid #333; /* ভেতরে জায়গা নেবে */
}
/* মোট প্রস্থ = 300px ← সহজ ও নির্ভরযোগ্য! */
/* Content এলাকা = 300 - 40 - 10 = 250px (CSS নিজেই গণনা করে) */
সব এলিমেন্টে border-box — সর্বোত্তম অভ্যাস Best Practice
/* CSS ফাইলের শুরুতে এটি দাও — একবারেই সব ঠিক হয় */
*, *::before, *::after {
box-sizing: border-box;
}
/* এখন সব এলিমেন্টে width মানেই সম্পূর্ণ আকার
Tailwind, Bootstrap, সব আধুনিক Framework এটি করে */
content-box বনাম border-box — পার্থক্য তুলনা
| বিষয় | content-box |
border-box |
|---|---|---|
| width কী পরিমাপ করে | শুধু Content | Content + Padding + Border ✅ |
| Padding যোগ করলে | এলিমেন্ট বড় হয় | Content ছোট হয়, এলিমেন্ট একই থাকে ✅ |
| পূর্বাভাস করা সহজ? | না ❌ | হ্যাঁ ✅ |
| আধুনিক ব্যবহার | এড়িয়ে চলা ভালো | সবসময় এটি ব্যবহার করো ✅ |
🔷 ৬. Logical Properties — আধুনিক দিকনির্ভর CSS
আধুনিক CSS-এ Physical দিক (left, right) এর বদলে
Logical Properties ব্যবহার করা হয় — যা বাংলা, আরবি সব ভাষায়
স্বয়ংক্রিয়ভাবে সঠিকভাবে কাজ করে।
| Physical Property | Logical Property | কাজ |
|---|---|---|
margin-left + margin-right |
margin-inline |
বাম-ডান Margin একসাথে |
margin-top + margin-bottom |
margin-block |
উপর-নিচ Margin একসাথে |
padding-left + padding-right |
padding-inline |
বাম-ডান Padding একসাথে |
padding-top + padding-bottom |
padding-block |
উপর-নিচ Padding একসাথে |
width |
inline-size |
Inline দিকের আকার (প্রস্থ) |
height |
block-size |
Block দিকের আকার (উচ্চতা) |
/* Physical Properties (পুরনো পদ্ধতি) */
.container {
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
/* Logical Properties (আধুনিক পদ্ধতি) */
.container {
margin-inline: auto; /* অনুভূমিকে মাঝে — ✅ সংক্ষিপ্ত */
padding-inline: 16px; /* বাম-ডান Padding */
}
/* আলাদা শুরু ও শেষ */
.box {
margin-inline-start: 20px; /* LTR-এ = margin-left, RTL-এ = margin-right */
margin-inline-end: 10px;
padding-block-start: 16px; /* উপর Padding */
padding-block-end: 24px; /* নিচ Padding */
}
🔷 ৭. বাস্তব উদাহরণ — সম্পূর্ণ সেটআপ
Page Container — সম্পূর্ণ Layout সেটআপ Layout
/* CSS Reset — শুরুতে দাও */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* Page Container */
.container {
max-width: 1200px;
margin-inline: auto; /* মাঝে */
padding-inline: 20px; /* বাম-ডান ফাঁকা */
}
/* Section-এ উপর-নিচ ফাঁকা */
.section { padding-block: 80px; }
/* Grid এলাকা */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px; /* gap = Margin-এর আধুনিক বিকল্প Grid ও Flex-এ */
}
Card Component — Box Model সম্পূর্ণ ব্যবহার Card
/* Card — Box Model-এর সম্পূর্ণ ব্যবহার */
.card {
/* Content */
width: 100%;
min-height: 200px;
/* Padding — ভেতরের ফাঁকা জায়গা */
padding: 24px;
/* Border — সীমারেখা */
border: 1px solid #e2e8f0;
border-radius: 12px;
/* Margin — বাইরের দূরত্ব (grid gap দিলে এটা লাগে না) */
/* margin-bottom: 24px; */
/* box-sizing */
box-sizing: border-box;
/* ছায়া ও রঙ */
background-color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card:hover {
border-color: #3b82f6;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
Button — সম্পূর্ণ Box Model সেটআপ Button
/* Primary Button */
.btn {
/* Content আকার */
min-width: 120px;
/* Padding — ক্লিক এলাকা বড় করে */
padding: 12px 24px;
/* Border */
border: 2px solid transparent;
border-radius: 8px;
/* box-sizing */
box-sizing: border-box;
/* টাইপোগ্রাফি ও রঙ */
font-size: 1rem;
font-weight: 600;
background-color: #3b82f6;
color: white;
cursor: pointer;
}
/* Outline Button variant */
.btn-outline {
background-color: transparent;
border-color: #3b82f6;
color: #3b82f6;
}
/* Hover */
.btn:hover { background-color: #2563eb; }
.btn-outline:hover { background-color: #3b82f6; color: white; }
🔷 দ্রুত রেফারেন্স — Box Model সব Property এক জায়গায়
| Property | কাজ | সাধারণ মান / উদাহরণ | ডিফল্ট |
|---|---|---|---|
| width | Content প্রস্থ | 300px, 100%, auto |
auto |
| height | Content উচ্চতা | 200px, 100vh, auto |
auto |
| min/max-width | প্রস্থের সীমা | max-width: 1200px, min-width: 120px |
none / 0 |
| padding | ভেতরের ফাঁকা জায়গা | 20px, 10px 20px, 0 |
0 |
| border | সীমারেখা | 1px solid #e2e8f0, none |
none |
| border-radius | গোল কোণ | 8px, 50%, 9999px |
0 |
| margin | বাইরের দূরত্ব | 20px, 0 auto, -10px |
0 |
| box-sizing | আকার গণনার নিয়ম | border-box, content-box |
content-box |
| overflow | উপচে পড়া কন্টেন্ট | hidden, auto, scroll |
visible |
| outline | বাইরের রেখা (জায়গা নেয় না) | 3px solid #3b82f6, none |
none |
Margin বনাম Padding — পার্থক্য ও কখন কোনটি তুলনা
| বিষয় | Padding | Margin |
|---|---|---|
| অবস্থান | Content ও Border-এর ভেতরে | Border-এর বাইরে |
| background-color | প্রযোজ্য হয় ✅ | হয় না — সবসময় স্বচ্ছ |
| Collapse | হয় না | উল্লম্বে হয় (Margin Collapse) |
| ঋণাত্মক মান | হয় না (সাধারণত) | হয় — এলিমেন্ট টানা যায় |
| কখন ব্যবহার | এলিমেন্টের ভেতরের ফাঁকায় ✅ | এলিমেন্টের মাঝে দূরত্বে ✅ |
✅ Box Model-এর সোনালি নিয়ম:
CSS ফাইলের শুরুতে
CSS ফাইলের শুরুতে
*, *::before, *::after { box-sizing: border-box; } দাও +
ভেতরের ফাঁকায় padding ব্যবহার করো +
এলিমেন্টের মাঝে দূরত্বে margin বা gap ব্যবহার করো +
কখনো width: 100% ও padding একসাথে দিলে border-box নিশ্চিত করো
— এই নিয়মগুলো মানলেই Layout সবসময় সঠিক থাকবে।
📐 CSS Width & Height — সম্পূর্ণ নোট
এই সেকশনে CSS-এর Width ও Height সংক্রান্ত সব বিষয় — নির্দিষ্ট আকার, শতাংশ, viewport একক, min/max সীমা, aspect-ratio এবং বাস্তব ব্যবহার বিস্তারিত ব্যাখ্যা সহ বোঝানো হয়েছে।
🔷 CSS Width ও Height কী?
width ও height দিয়ে এলিমেন্টের প্রস্থ ও উচ্চতা
নির্ধারণ করা হয়। box-sizing: border-box থাকলে এটি Content + Padding + Border
মিলিয়ে মোট আকার — না থাকলে শুধু Content এলাকা।
Width ও Height-এ ব্যবহৃত সব একক — এক নজরে Overview
| একক | কাজ | উদাহরণ | কখন ব্যবহার |
|---|---|---|---|
px |
নির্দিষ্ট পিক্সেল | width: 300px |
নির্দিষ্ট আকারের উপাদানে |
% |
Parent-এর শতাংশ | width: 50% |
Fluid layout-এ ✅ |
em |
Parent-এর font-size গুণ | width: 20em |
টাইপোগ্রাফি-নির্ভর আকারে |
rem |
Root font-size গুণ | width: 20rem |
Consistent spacing-এ ✅ |
vw |
Viewport প্রস্থের শতাংশ | width: 100vw |
Full-width section-এ |
vh |
Viewport উচ্চতার শতাংশ | height: 100vh |
Full-screen Hero-তে ✅ |
dvw/dvh |
Dynamic viewport (মোবাইল) | height: 100dvh |
মোবাইল browser bar সমস্যায় |
svw/svh |
Small viewport | height: 100svh |
মোবাইলে সবচেয়ে ছোট viewport |
auto |
Browser নিজে ঠিক করে | height: auto |
উচ্চতা কন্টেন্ট অনুযায়ী ✅ |
fit-content |
কন্টেন্টের আকার অনুযায়ী | width: fit-content |
Inline Block-এর মতো আচরণ |
min-content |
সম্ভব সবচেয়ে ছোট আকার | width: min-content |
শব্দ না ভাঙার ন্যূনতম প্রস্থ |
max-content |
কন্টেন্ট না ভেঙে সম্পূর্ণ | width: max-content |
লেখা একলাইনে সম্পূর্ণ রাখতে |
🔷 ১. px — নির্দিষ্ট আকার
px দিয়ে নির্দিষ্ট পিক্সেলে আকার দেওয়া হয়।
এটি Responsive নয় — সব স্ক্রিনে একই থাকে।
Icon, Avatar, Sidebar-এর মতো নির্দিষ্ট আকারের উপাদানে ভালো।
/* নির্দিষ্ট px আকার */
.avatar { width: 48px; height: 48px; } /* প্রোফাইল ছবি */
.icon { width: 24px; height: 24px; } /* আইকন */
.sidebar { width: 280px; } /* Sidebar */
.modal { width: 500px; max-width: 95%; } /* Modal — max দিয়ে মোবাইলেও কাজ */
.thumbnail { width: 160px; height: 120px; } /* ছবির Thumbnail */
✅ পরামর্শ: Width-এ
px দিলে সাথে সবসময়
max-width: 100% বা max-width: 95vw দাও
— নইলে ছোট স্ক্রিনে এলিমেন্ট বাইরে চলে যেতে পারে।
🔷 ২. % — Parent-এর শতাংশ
% দিয়ে Parent এলিমেন্টের আকারের শতাংশে নিজের আকার নির্ধারণ করা হয়।
Width-এ % ভালো কাজ করে, কিন্তু Height-এ % কাজ করতে হলে Parent-এর
নির্দিষ্ট height থাকতে হবে।
/* width-এ % */
.container { width: 100%; } /* parent-এর পূর্ণ প্রস্থ */
.half { width: 50%; } /* parent-এর অর্ধেক */
.two-third { width: 66.67%; } /* parent-এর দুই-তৃতীয়াংশ */
img { width: 100%; max-width: 100%; } /* ছবি responsive ✅ */
/* height-এ % — parent-এর height লাগবে */
html, body { height: 100%; } /* প্রথমে root-এ height দাও */
.page { min-height: 100%; } /* পেজ পূর্ণ উচ্চতা */
/* Padding ও Margin-এও % — width-এর শতাংশ */
.box { padding-top: 56.25%; } /* 16:9 অনুপাত বানানোর কৌশল */
% দিয়ে Responsive Column Responsive
/* তিন কলামের Grid — % দিয়ে */
.col-4 { width: 33.33%; } /* তিন কলাম */
.col-6 { width: 50%; } /* দুই কলাম */
.col-12{ width: 100%; } /* এক কলাম (পূর্ণ) */
/* Media Query দিয়ে Responsive */
@media (max-width: 768px) {
.col-4 { width: 100%; } /* মোবাইলে পূর্ণ প্রস্থ */
}
🔷 ৩. Viewport Units — vw, vh, dvh, svh
Viewport Unit দিয়ে ব্রাউজারের দৃশ্যমান এলাকার শতাংশে আকার দেওয়া হয়। Full-screen Hero, Sidebar, Modal-এ খুব কাজে লাগে।
| একক | মানে | মোবাইলে আচরণ | কখন ব্যবহার |
|---|---|---|---|
vw |
Viewport প্রস্থের ১% | Scroll করলে পরিবর্তন হয় না | Full-width Section |
vh |
Viewport উচ্চতার ১% | মোবাইলে browser bar সমস্যা করে | Desktop Hero Section |
dvh |
Dynamic Viewport উচ্চতা | Bar লুকালে বড় হয়, দেখালে ছোট হয় | মোবাইলে সেরা ✅ |
svh |
Small Viewport উচ্চতা | সবসময় সবচেয়ে ছোট ধরে | মোবাইলে নিরাপদ বিকল্প |
lvh |
Large Viewport উচ্চতা | সবসময় সবচেয়ে বড় ধরে | Desktop পূর্ণ উচ্চতায় |
cqi |
Container প্রস্থের ১% | Container Query একক | Container-নির্ভর আকারে |
/* Hero Section — পূর্ণ স্ক্রিন */
.hero { min-height: 100vh; } /* Desktop-এ ভালো */
.hero { min-height: 100dvh; } /* মোবাইলেও ভালো ✅ */
/* Full-width Section */
.banner { width: 100vw; margin-inline: calc(50% - 50vw); }
/* Sidebar উচ্চতা */
.sidebar { height: 100vh; position: sticky; top: 0; }
/* মোবাইল-বান্ধব Hero */
.hero {
min-height: 100vh; /* পুরনো browser-এর জন্য fallback */
min-height: 100dvh; /* আধুনিক browser-এ সঠিক */
}
/* Fluid Typography — vw দিয়ে */
h1 { font-size: clamp(2rem, 5vw, 4rem); } /* ন্যূনতম ও সর্বোচ্চ সীমায় fluid */
🔷 ৪. min/max Width ও Height — আকারের সীমা
min- ও max- দিয়ে আকারের ন্যূনতম ও সর্বোচ্চ সীমা
নির্ধারণ করা হয়। এটি Responsive Design-এর সবচেয়ে গুরুত্বপূর্ণ হাতিয়ার।
max-width — সর্বোচ্চ প্রস্থ max-width
/* Page Container — বড় স্ক্রিনে সীমা */
.container { width: 100%; max-width: 1200px; margin-inline: auto; }
/* Responsive ছবি — সবচেয়ে গুরুত্বপূর্ণ ✅ */
img { max-width: 100%; height: auto; } /* ছবি কখনো parent ছাড়াবে না */
/* Modal */
.modal { width: 600px; max-width: 95vw; } /* ছোট স্ক্রিনেও সঠিক */
/* সাধারণ Content Column */
.article { max-width: 65ch; } /* পড়ার জন্য সর্বোত্তম প্রস্থ (ch = ক্যারেক্টার প্রস্থ) */
min-width — ন্যূনতম প্রস্থ min-width
/* Button-এর ন্যূনতম প্রস্থ */
.btn { min-width: 120px; padding: 12px 24px; }
/* Table Cell-এর ন্যূনতম প্রস্থ */
th { min-width: 100px; }
/* Dropdown Menu */
.dropdown { min-width: 200px; } /* খুব ছোট কন্টেন্টেও যথেষ্ট প্রশস্ত */
min-height ও max-height — উচ্চতার সীমা height limits
/* min-height — কন্টেন্ট কম হলেও উচ্চতা থাকবে */
.hero { min-height: 100dvh; } /* কম কন্টেন্টেও পূর্ণ স্ক্রিন */
.card { min-height: 200px; } /* Card-এর ন্যূনতম উচ্চতা */
.sidebar { min-height: 100%; } /* Parent-এর পূর্ণ উচ্চতা */
/* max-height — Scrollable এলাকা */
.dropdown-menu { max-height: 300px; overflow-y: auto; } /* ৩০০px-এর বেশি হলে scroll */
.chat-box { max-height: 500px; overflow-y: scroll; }
.modal-body { max-height: 70vh; overflow-y: auto; } /* viewport-এর ৭০% পর্যন্ত */
width বনাম min-width বনাম max-width তুলনা
| Property | আচরণ | জেতে যখন |
|---|---|---|
width |
সরাসরি আকার নির্ধারণ | min ও max-এর মধ্যে থাকলে |
min-width |
এর চেয়ে ছোট হবে না | width এর চেয়ে ছোট হলে min-width জেতে ✅ |
max-width |
এর চেয়ে বড় হবে না | width এর চেয়ে বড় হলে max-width জেতে ✅ |
🔷 ৫. fit-content, min-content, max-content — কন্টেন্ট-নির্ভর আকার
এই তিনটি কীওয়ার্ড কন্টেন্টের আকার দেখে নিজে নিজে প্রস্থ ঠিক করে — কোনো নির্দিষ্ট সংখ্যা দিতে হয় না।
| কীওয়ার্ড | আচরণ | কখন ব্যবহার |
|---|---|---|
max-content |
লেখা একলাইনে রাখার সর্বোচ্চ প্রস্থ | Column যতটুকু দরকার ততটুকু নিক |
min-content |
দীর্ঘতম শব্দের প্রস্থ — সম্ভব সবচেয়ে ছোট | Compact Column বানাতে |
fit-content |
max-content চায়, parent-এর চেয়ে বড় হবে না | Button, Badge, Tag-এ ✅ |
/* fit-content — Button বা Badge-এ */
.badge { width: fit-content; padding: 4px 12px; } /* কন্টেন্ট অনুযায়ী প্রস্থ */
.tag { width: fit-content; }
/* Grid-এ max-content ও min-content */
.grid {
display: grid;
grid-template-columns: min-content 1fr max-content;
/* ১ম কলাম: সম্ভব সবচেয়ে ছোট, ২য়: বাকি সব জায়গা, ৩য়: কন্টেন্ট অনুযায়ী */
}
/* fit-content() ফাংশন — সর্বোচ্চ সীমা দেওয়া যায় */
.col { width: fit-content(300px); } /* max-content চায়, কিন্তু ৩০০px-এর বেশি নয় */
🔷 ৬. aspect-ratio — প্রস্থ ও উচ্চতার অনুপাত
aspect-ratio দিয়ে প্রস্থ ও উচ্চতার অনুপাত নির্ধারণ করা হয়।
একটি আকার দিলে অন্যটি স্বয়ংক্রিয়ভাবে হিসেব করে — ছবি বা ভিডিওর অনুপাত ঠিক রাখতে কার্যকর।
/* aspect-ratio: প্রস্থ / উচ্চতা */
.video { aspect-ratio: 16 / 9; width: 100%; } /* ওয়াইডস্ক্রিন ভিডিও */
.square { aspect-ratio: 1 / 1; width: 200px; } /* বর্গাকার */
.portrait { aspect-ratio: 3 / 4; } /* Portrait ছবি */
.card-img { aspect-ratio: 4 / 3; object-fit: cover; }
/* ছবি Card — অনুপাত সবসময় ঠিক থাকবে */
.card-thumbnail {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.card-thumbnail img {
width: 100%; height: 100%;
object-fit: cover; /* ছবি অনুপাত ঠিক রেখে ভরে দেবে */
}
/* Avatar */
.avatar {
width: 48px;
aspect-ratio: 1; /* 1/1 সংক্ষেপে */
border-radius: 50%;
object-fit: cover;
}
✅ পুরনো পদ্ধতি বনাম নতুন: আগে
padding-top: 56.25%
দিয়ে 16:9 অনুপাত বানাতে হতো। এখন aspect-ratio: 16/9 দিলেই হয় —
অনেক সহজ ও পরিষ্কার।
🔷 ৭. clamp() — ন্যূনতম, পছন্দের, সর্বোচ্চ আকার
clamp(ন্যূনতম, পছন্দের, সর্বোচ্চ) — তিনটি মানের মধ্যে
স্বয়ংক্রিয়ভাবে সঠিক আকার বেছে নেয়।
Media Query ছাড়াই Fluid Responsive আকার বানানো যায়।
/* clamp(ন্যূনতম, পছন্দের, সর্বোচ্চ) */
/* Fluid Font Size — সবচেয়ে জনপ্রিয় ব্যবহার */
h1 { font-size: clamp(1.5rem, 5vw, 3.5rem); }
/* ছোট স্ক্রিনে ন্যূনতম 1.5rem, বড় স্ক্রিনে সর্বোচ্চ 3.5rem, মাঝে fluid */
p { font-size: clamp(1rem, 2vw, 1.25rem); }
/* Fluid Width */
.card { width: clamp(280px, 40%, 500px); }
.container { width: clamp(320px, 90%, 1200px); }
/* Fluid Padding */
.section { padding: clamp(40px, 8vw, 120px) 0; }
/* Fluid Gap */
.grid { gap: clamp(16px, 3vw, 40px); }
✅ clamp()-এর সুবিধা:
min-width + max-width +
width তিনটি আলাদা লেখার বদলে একটি clamp()-এ সব হয়।
Font size, padding, gap সবখানেই ব্যবহার করা যায়।
🔷 ৮. বাস্তব উদাহরণ — সম্পূর্ণ সেটআপ
Responsive Container Container
/* সম্পূর্ণ Responsive Container */
.container {
width: 100%; /* মোবাইলে পূর্ণ প্রস্থ */
max-width: 1280px; /* Desktop-এ সীমা */
margin-inline: auto; /* মাঝে রাখো */
padding-inline: clamp(16px, 5vw, 48px); /* Fluid padding */
}
Responsive Image Card Image Card
/* Responsive Image Card */
.card { width: 100%; max-width: 380px; }
.card-image {
width: 100%;
aspect-ratio: 16 / 9; /* অনুপাত সবসময় ঠিক */
overflow: hidden;
border-radius: 12px 12px 0 0;
}
.card-image img {
width: 100%; height: 100%;
object-fit: cover; /* ছবি ভরে দেবে, কাটবে */
object-position: center; /* মাঝ থেকে কাটবে */
}
Full-screen Hero Section Hero
/* Full-screen Hero */
.hero {
width: 100%;
min-height: 100vh; /* Fallback */
min-height: 100dvh; /* মোবাইলে সঠিক ✅ */
display: flex;
align-items: center;
justify-content: center;
}
/* Fluid Heading */
.hero h1 {
font-size: clamp(2rem, 6vw, 5rem);
max-width: 20ch; /* ২০ ক্যারেক্টারের বেশি চওড়া নয় */
}
🔷 দ্রুত রেফারেন্স — Width ও Height সব Property এক জায়গায়
| Property | কাজ | সাধারণ মান | ডিফল্ট |
|---|---|---|---|
| width | প্রস্থ নির্ধারণ | 300px, 100%, 50vw |
auto |
| height | উচ্চতা নির্ধারণ | 200px, 100vh, auto |
auto |
| min-width | ন্যূনতম প্রস্থ | 120px, 200px |
0 |
| max-width | সর্বোচ্চ প্রস্থ | 1200px, 100%, 65ch |
none |
| min-height | ন্যূনতম উচ্চতা | 100dvh, 200px |
0 |
| max-height | সর্বোচ্চ উচ্চতা | 300px, 70vh |
none |
| aspect-ratio | প্রস্থ:উচ্চতা অনুপাত | 16/9, 1, 4/3 |
auto |
| clamp() | Fluid সীমাবদ্ধ আকার | clamp(1rem, 5vw, 3rem) |
— |
| fit-content | কন্টেন্ট অনুযায়ী প্রস্থ | width: fit-content |
— |
| overflow | উপচে পড়া নিয়ন্ত্রণ | hidden, auto, scroll |
visible |
✅ Width ও Height-এর সেরা অভ্যাস:
ছবিতে সবসময়
ছবিতে সবসময়
max-width: 100% দাও +
Container-এ width: 100% ও max-width একসাথে দাও +
উচ্চতায় px না দিয়ে min-height ব্যবহার করো +
মোবাইলে 100vh-এর বদলে 100dvh দাও +
Fluid আকারে clamp() ব্যবহার করো।
🌑 CSS Box Shadow — সম্পূর্ণ নোট
এই সেকশনে CSS Box Shadow-এর সব বিষয় — ছায়ার অবস্থান, ঝাপসা ভাব, আকার, রঙ, inset ছায়া, একাধিক ছায়া এবং বাস্তব ডিজাইন প্যাটার্ন বিস্তারিত ব্যাখ্যা সহ বোঝানো হয়েছে।
🔷 CSS Box Shadow কী?
box-shadow দিয়ে HTML এলিমেন্টের চারপাশে ছায়া তৈরি করা হয়।
ছায়া Box Model-এর বাইরে থাকে — কোনো জায়গা নেয় না, অন্য এলিমেন্টকে সরায় না।
ডিজাইনে ছায়া ব্যবহার করা হয় গভীরতা (depth) ও উচ্চতার অনুভূতি তৈরি করতে — Card, Button, Modal, Dropdown — সবখানেই ছায়া থাকে।
box-shadow-এর সিনট্যাক্স Syntax
/* box-shadow: offset-x offset-y blur spread color; */
.box { box-shadow: 4px 8px 12px 0px rgba(0,0,0,0.15); }
/* প্রতিটি মানের মানে */
/* offset-x : অনুভূমিক সরানো (+ = ডানে, - = বামে) */
/* offset-y : উল্লম্ব সরানো (+ = নিচে, - = উপরে) */
/* blur : ঝাপসা ভাব (0 = তীক্ষ্ণ, বেশি = নরম) */
/* spread : আকার পরিবর্তন (+ = বড়, - = ছোট) */
/* color : ছায়ার রঙ (rgba ব্যবহার করা ভালো ✅) */
/* সংক্ষিপ্ত — শুধু offset ও blur */
.box { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
প্রতিটি মানের কাজ — এক নজরে Overview
| মান | কাজ | ডিফল্ট | উদাহরণ |
|---|---|---|---|
| offset-x | অনুভূমিক সরানো | আবশ্যক | 0, 4px, -4px |
| offset-y | উল্লম্ব সরানো | আবশ্যক | 0, 8px, -2px |
| blur-radius | ঝাপসা ভাব — ০ = তীক্ষ্ণ | 0 |
6px, 20px |
| spread-radius | ছায়ার আকার বাড়া বা কমা | 0 |
0, 4px, -4px |
| color | ছায়ার রঙ | বর্তমান color |
rgba(0,0,0,0.1) |
| inset | ছায়া ভেতরে (ঐচ্ছিক) | বাইরে | inset 0 2px 4px rgba(0,0,0,0.1) |
🔷 ১. offset-x ও offset-y — ছায়ার দিক
offset-x ও offset-y দিয়ে ছায়া কোন দিকে যাবে তা নির্ধারণ হয়।
উভয় 0 দিলে ছায়া চারদিকে সমানভাবে ছড়ায়।
/* ছায়ার দিক পরিবর্তন */
.right-shadow { box-shadow: 8px 0 10px rgba(0,0,0,0.2); } /* ডানে */
.left-shadow { box-shadow: -8px 0 10px rgba(0,0,0,0.2); } /* বামে */
.bottom-shadow { box-shadow: 0 8px 10px rgba(0,0,0,0.2); } /* নিচে */
.top-shadow { box-shadow: 0 -8px 10px rgba(0,0,0,0.2); } /* উপরে */
/* চারদিকে সমান — সবচেয়ে বেশি ব্যবহৃত ✅ */
.center-shadow { box-shadow: 0 0 20px rgba(0,0,0,0.15); }
/* কোণাকুণি */
.corner-shadow { box-shadow: 6px 6px 12px rgba(0,0,0,0.2); } /* নিচে-ডানে */
.corner-shadow2 { box-shadow: -6px -6px 12px rgba(0,0,0,0.2); } /* উপরে-বামে */
🔷 ২. blur-radius ও spread-radius — ঝাপসা ও আকার
blur-radius — ঝাপসা ভাব blur
blur-radius নির্ধারণ করে ছায়া কতটা ঝাপসা হবে।
0 = তীক্ষ্ণ ছায়া। বেশি হলে ছায়া ছড়িয়ে নরম হয়।
/* blur পরিবর্তনের প্রভাব */
.sharp { box-shadow: 0 4px 0px rgba(0,0,0,0.3); } /* তীক্ষ্ণ — 0px blur */
.soft-1 { box-shadow: 0 4px 6px rgba(0,0,0,0.2); } /* হালকা নরম */
.soft-2 { box-shadow: 0 4px 12px rgba(0,0,0,0.15); } /* সাধারণ Card */
.soft-3 { box-shadow: 0 8px 30px rgba(0,0,0,0.1); } /* হালকা, বড় ছায়া */
.glow { box-shadow: 0 0 40px rgba(59,130,246,0.5); } /* রঙিন Glow */
spread-radius — ছায়ার আকার spread
spread-radius দিয়ে ছায়ার আকার বাড়ানো বা কমানো যায়।
ঋণাত্মক spread দিলে ছায়া ছোট হয় — নরম, বাস্তবধর্মী ছায়া বানাতে কাজে লাগে।
/* spread পরিবর্তনের প্রভাব */
.spread-pos { box-shadow: 0 4px 10px 4px rgba(0,0,0,0.2); } /* বড় ছায়া */
.spread-zero{ box-shadow: 0 4px 10px 0px rgba(0,0,0,0.2); } /* সাধারণ */
.spread-neg { box-shadow: 0 8px 16px -4px rgba(0,0,0,0.2); } /* ছোট ছায়া ✅ */
/* ঋণাত্মক spread — বাস্তবধর্মী ছায়া */
/* এলিমেন্টের নিচে লুকিয়ে ছোট ছায়া — অনেক সুন্দর দেখায় */
.realistic { box-shadow: 0 10px 20px -5px rgba(0,0,0,0.3); }
/* শুধু spread — border-এর মতো Outline বানানো */
.outline-shadow { box-shadow: 0 0 0 3px #3b82f6; } /* Focus ring-এর বিকল্প */
🔷 ৩. color — ছায়ার রঙ
ছায়ার রঙে সবসময় rgba() বা hsla() ব্যবহার করা ভালো — স্বচ্ছতা নিয়ন্ত্রণ করলে ছায়া পেছনের কন্টেন্টের সাথে মিশে যায়, বাস্তবধর্মী দেখায়।
/* সাধারণ কালো ছায়া — বিভিন্ন স্বচ্ছতায় */
.shadow-light { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } /* খুব হালকা */
.shadow-medium { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* মাঝারি ✅ */
.shadow-strong { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30); } /* শক্ত */
/* রঙিন ছায়া — Glow Effect */
.blue-glow { box-shadow: 0 4px 20px rgba(59, 130, 246, 0.5); } /* নীল Glow */
.green-glow { box-shadow: 0 4px 20px rgba(34, 197, 94, 0.5); } /* সবুজ Glow */
.red-glow { box-shadow: 0 4px 20px rgba(239, 68, 68, 0.5); } /* লাল Glow */
.purple-glow { box-shadow: 0 4px 20px rgba(139, 92, 246, 0.5); } /* বেগুনী Glow */
/* HSL দিয়ে — Primary color-এর সাথে মিল */
.primary-glow {
background-color: hsl(220, 90%, 56%);
box-shadow: 0 4px 20px hsla(220, 90%, 56%, 0.5); /* একই রঙের ছায়া */
}
/* Dark background-এ সাদা ছায়া */
.dark-card { box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1); }
🔷 ৪. inset — ভেতরের ছায়া
inset কীওয়ার্ড দিলে ছায়া এলিমেন্টের ভেতরে পড়ে।
চাপা বা গর্তের মতো অনুভূতি তৈরি করে — Input field, Pressed button-এ ব্যবহৃত।
/* inset — ভেতরের ছায়া */
/* লেখার আগে 'inset' দিতে হয় */
/* Input field — ভেতরে ছায়া */
.input {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.input:focus {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1),
0 0 0 3px rgba(59, 130, 246, 0.3); /* focus ring যোগ */
}
/* Pressed Button — চাপা অনুভূতি */
.btn:active {
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.2);
transform: translateY(1px); /* একটু নিচে নামে */
}
/* ভেতরে Glow */
.inner-glow {
box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.3);
}
/* উপর থেকে ছায়া — চাপা পেলার মতো */
.pressed {
box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2),
inset 0 -2px 4px rgba(255, 255, 255, 0.1);
}
🔷 ৫. একাধিক ছায়া — স্তরে স্তরে
একটি এলিমেন্টে একাধিক box-shadow কমা দিয়ে আলাদা করে দেওয়া যায়। একাধিক স্তর মিলিয়ে আরও বাস্তবধর্মী ও সুন্দর ছায়া তৈরি করা যায়।
/* দুটি ছায়া — কমা দিয়ে */
.layered {
box-shadow:
0 2px 4px rgba(0,0,0,0.05), /* কাছের ছোট ছায়া */
0 8px 16px rgba(0,0,0,0.10); /* দূরের বড় ছায়া */
}
/* তিন স্তরের ছায়া — সবচেয়ে বাস্তবধর্মী */
.realistic-3 {
box-shadow:
0 1px 2px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07),
0 10px 20px rgba(0,0,0,0.07);
}
/* inset + বাইরের ছায়া একসাথে */
.combined {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.15), /* উপরে সাদা আলো */
0 4px 12px rgba(0,0,0,0.2); /* নিচে ছায়া */
}
/* Border + ছায়া — spread দিয়ে */
.border-shadow {
box-shadow:
0 0 0 1px rgba(0,0,0,0.1), /* পাতলা border */
0 4px 12px rgba(0,0,0,0.15); /* ছায়া */
}
🔷 ৬. Elevation — উচ্চতার ধাপ
ছায়া ব্যবহার করে উচ্চতার ধাপ (Elevation) তৈরি করা হয়। উচ্চতা বাড়লে ছায়া বড় ও নরম, কমলে ছোট ও তীক্ষ্ণ — এটি Material Design-এর মূল ধারণা।
/* Elevation ধাপ — নিচ থেকে উপরে */
.elevation-0 { box-shadow: none; } /* মাটিতে — কোনো ছায়া নেই */
.elevation-1 { /* খুব কাছে — সামান্য উঁচু */
box-shadow: 0 1px 2px rgba(0,0,0,0.05),
0 1px 4px rgba(0,0,0,0.05);
}
.elevation-2 { /* Card-এর সাধারণ উচ্চতা ✅ */
box-shadow: 0 1px 3px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07);
}
.elevation-3 { /* Dropdown, Popover */
box-shadow: 0 2px 6px rgba(0,0,0,0.08),
0 8px 20px rgba(0,0,0,0.08);
}
.elevation-4 { /* Modal, Dialog */
box-shadow: 0 4px 12px rgba(0,0,0,0.10),
0 16px 40px rgba(0,0,0,0.10);
}
.elevation-5 { /* সর্বোচ্চ — Toast, Tooltip */
box-shadow: 0 8px 20px rgba(0,0,0,0.12),
0 24px 64px rgba(0,0,0,0.12);
}
/* Hover-এ Elevation বাড়ানো */
.card {
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
transform: translateY(-4px); /* উপরে উঠে আসার অনুভূতি */
}
🔷 ৭. বাস্তব ডিজাইন প্যাটার্ন — সম্পূর্ণ সেটআপ
Card Component Card
/* সাধারণ Card */
.card {
background-color: #ffffff;
border-radius: 12px;
box-shadow:
0 1px 3px rgba(0,0,0,0.06),
0 4px 12px rgba(0,0,0,0.08);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
/* hover-এ উঠে আসে */
.card:hover {
box-shadow:
0 4px 8px rgba(0,0,0,0.08),
0 12px 32px rgba(0,0,0,0.12);
transform: translateY(-4px);
}
Button-এর ছায়া Button
/* Primary Button */
.btn-primary {
background-color: #3b82f6;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.40); /* রঙিন ছায়া */
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.btn-primary:hover {
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.50);
transform: translateY(-2px);
}
.btn-primary:active {
box-shadow: inset 0 2px 6px rgba(0,0,0,0.2); /* চাপা অনুভূতি */
transform: translateY(0);
}
Input Focus Ring Input
/* Input Field */
.input {
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 10px 14px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.06); /* ভেতরের হালকা ছায়া */
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Focus Ring — border + spread ছায়া */
.input:focus {
outline: none;
border-color: #3b82f6;
box-shadow:
inset 0 1px 3px rgba(0,0,0,0.06), /* ভেতরের ছায়া ঠিক থাকে */
0 0 0 3px rgba(59, 130, 246, 0.25); /* নীল Focus Ring */
}
Modal Dialog Modal
/* Modal — সবচেয়ে বড় ছায়া */
.modal {
background-color: #ffffff;
border-radius: 16px;
box-shadow:
0 4px 12px rgba(0,0,0,0.10),
0 20px 60px rgba(0,0,0,0.20),
0 0 0 1px rgba(0,0,0,0.05); /* সূক্ষ্ম border */
}
Glassmorphism — কাচের ছায়া Glass
/* Glassmorphism Card */
.glass {
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
box-shadow:
0 8px 32px rgba(0,0,0,0.15),
inset 0 1px 0 rgba(255,255,255,0.30); /* উপরে আলোর প্রতিফলন */
}
🔷 দ্রুত রেফারেন্স — Box Shadow সব Pattern এক জায়গায়
| ব্যবহার | CSS | কোথায় লাগে |
|---|---|---|
| হালকা Card | 0 2px 8px rgba(0,0,0,0.08) |
সাধারণ Card, List Item |
| মাঝারি Card | 0 4px 16px rgba(0,0,0,0.12) |
Featured Card, Panel |
| Dropdown | 0 8px 24px rgba(0,0,0,0.12) |
Menu, Select, Popover |
| Modal | 0 20px 60px rgba(0,0,0,0.20) |
Dialog, Drawer |
| Focus Ring | 0 0 0 3px rgba(59,130,246,0.3) |
Input, Button focus |
| Outline | 0 0 0 2px #3b82f6 |
Selected, Active state |
| Glow | 0 0 20px rgba(59,130,246,0.5) |
Button hover, Icon |
| Inset Input | inset 0 2px 4px rgba(0,0,0,0.1) |
Input field, Textarea |
| Pressed | inset 0 3px 8px rgba(0,0,0,0.2) |
Button :active |
| Hover Lift | 0 8px 24px rgba(0,0,0,0.15) + translateY(-4px) |
Card, Button hover |
text-shadow — লেখার ছায়া text-shadow
text-shadow লেখার জন্য ছায়া তৈরি করে — box-shadow-এর মতো,
তবে spread ও inset নেই।
/* text-shadow: offset-x offset-y blur color */
h1 { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } /* সাধারণ ছায়া */
h1 { text-shadow: 0 0 10px rgba(59,130,246,0.8); } /* Glow Effect */
h1 { text-shadow: 0 2px 0 #1e3a5f; } /* 3D Effect */
/* একাধিক text-shadow */
h1 {
text-shadow:
1px 1px 0 #1e3a5f,
2px 2px 0 #1e3a5f,
3px 3px 0 #1e3a5f; /* 3D লেখা */
}
/* Dark background-এ উজ্জ্বল লেখা */
.hero h1 {
color: white;
text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
✅ Box Shadow-এর সেরা অভ্যাস:
ছায়ার রঙে সবসময়
ছায়ার রঙে সবসময়
rgba() ব্যবহার করো +
একাধিক স্তরের ছায়া মিলিয়ে বাস্তবধর্মী করো +
transition দিয়ে hover-এ মসৃণ পরিবর্তন দাও +
Elevation অনুযায়ী ছায়ার আকার বেছে নাও +
Focus ring-এ 0 0 0 3px pattern ব্যবহার করো।
📏 CSS Units — সম্পূর্ণ নোট
এই সেকশনে CSS-এর সব একক — Absolute (px, pt, cm), Relative (em, rem, %, vw, vh), আধুনিক Viewport Units, Container Units, গণনামূলক ফাংশন এবং কোন পরিস্থিতিতে কোন একক ব্যবহার করবে তা বিস্তারিত বোঝানো হয়েছে।
🔷 CSS Units কী?
CSS-এ প্রতিটি মাপের পাশে একটি একক (Unit) লিখতে হয় —
যেমন 16px, 2rem, 50%।
একক না দিলে ব্রাউজার মান বুঝতে পারে না (0 ছাড়া)।
CSS Unit দুই ভাগে বিভক্ত — Absolute (সব পরিস্থিতিতে একই থাকে) এবং Relative (অন্য কিছুর উপর নির্ভর করে পরিবর্তন হয়)।
সব Unit — এক নজরে Overview
| Unit | ধরন | নির্ভর করে | সাধারণ ব্যবহার |
|---|---|---|---|
px |
Absolute | স্ক্রিন পিক্সেলে | Border, Shadow, Icon |
pt |
Absolute | ১pt = ১/৭২ ইঞ্চি | Print stylesheet |
cm, mm, in |
Absolute | বাস্তব পরিমাপ | Print মাধ্যমে |
em |
Relative | Parent font-size | Padding, Margin |
rem |
Relative | Root (html) font-size | Font, Spacing ✅ |
% |
Relative | Parent-এর মান | Width, Layout ✅ |
vw |
Relative | Viewport প্রস্থ | Full-width Section |
vh |
Relative | Viewport উচ্চতা | Hero Section |
dvw/dvh |
Relative | Dynamic Viewport | মোবাইল Hero ✅ |
svw/svh |
Relative | Small Viewport | মোবাইল নিরাপদ |
cqw/cqh |
Relative | Container আকার | Container Query ✅ |
ch |
Relative | "0" অক্ষরের প্রস্থ | Reading width |
ex |
Relative | "x" অক্ষরের উচ্চতা | বিরল ব্যবহার |
calc() |
ফাংশন | ভিন্ন একক গণনা | 100% - 64px ✅ |
min() |
ফাংশন | ছোট মান বেছে | max-width-এর মতো |
max() |
ফাংশন | বড় মান বেছে | min-width-এর মতো |
clamp() |
ফাংশন | সীমার মধ্যে fluid | Fluid Font ✅ |
🔷 ১. Absolute Units — নির্দিষ্ট একক
Absolute Unit-এ দেওয়া মান কোনো পরিস্থিতিতেই পরিবর্তন হয় না — স্ক্রিনের আকার, জুম, parent font-size যাই হোক।
px — পিক্সেল px
/* px — নির্দিষ্ট পিক্সেল */
.border { border: 1px solid #e2e8f0; } /* বাস্তবে খুব পাতলা */
.icon { width: 24px; height: 24px; } /* আইকনের আকার */
.avatar { width: 48px; height: 48px; }
.shadow { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.radius { border-radius: 8px; } /* কোণ গোল */
/* font-size-এ px — ব্যবহারকারীর browser zoom কাজ করে না ❌ */
p { font-size: 16px; }
/* rem দেওয়া ভালো ✅ */
p { font-size: 1rem; }
অন্য Absolute Units pt / cm / mm
/* Print stylesheet-এ ব্যবহার */
@media print {
body { font-size: 12pt; } /* ১২ point */
.page { width: 21cm; } /* A4 পাতার প্রস্থ */
.margin { margin: 2.54cm; } /* ১ ইঞ্চি margin */
}
/* স্ক্রিনে এগুলো ব্যবহার করবে না ❌ */
p { font-size: 12pt; } /* এড়িয়ে চলো */
🔷 ২. em — Parent font-size-এর গুণ
em = Parent এলিমেন্টের font-size-এর গুণিতক।
Nested হলে em জমতে থাকে — তাই font-size-এ rem ব্যবহার করা নিরাপদ।
/* Parent-এর font-size = 16px ধরলে */
.parent { font-size: 16px; }
.child { font-size: 1.5em; } /* = 16 × 1.5 = 24px */
.child2 { font-size: 0.875em; } /* = 16 × 0.875 = 14px */
/* padding ও margin-এ em — নিজের font-size-এর গুণ */
.btn {
font-size: 1rem; /* 16px */
padding: 0.75em 1.5em; /* top-bottom: 12px, left-right: 24px */
/* font-size পরিবর্তন করলে padding ও স্বয়ংক্রিয়ভাবে পরিবর্তন হবে ✅ */
}
em Compounding — Nested সমস্যা সমস্যা
/* em Compounding সমস্যা */
html { font-size: 16px; }
.level-1 { font-size: 1.5em; } /* 16 × 1.5 = 24px */
.level-2 { font-size: 1.5em; } /* 24 × 1.5 = 36px ← বাড়ছে! */
.level-3 { font-size: 1.5em; } /* 36 × 1.5 = 54px ← আরও বড়! */
/* em ব্যবহার করো: padding, margin, line-height-এ */
/* rem ব্যবহার করো: font-size-এ ✅ */
🔷 ৩. rem — Root font-size-এর গুণ
rem = Root em — html এলিমেন্টের
font-size-এর গুণিতক। Parent যাই হোক, সবসময় html-এর
font-size দেখে — Nested সমস্যা নেই।
/* html-এর ডিফল্ট font-size = 16px */
html { font-size: 16px; }
h1 { font-size: 2.5rem; } /* = 40px */
h2 { font-size: 2rem; } /* = 32px */
h3 { font-size: 1.5rem; } /* = 24px */
p { font-size: 1rem; } /* = 16px */
.small { font-size: 0.875rem; } /* = 14px */
/* Spacing-এ rem */
.section { padding: 5rem 0; } /* 80px */
.card { padding: 1.5rem; } /* 24px */
.gap { gap: 1rem; } /* 16px */
rem দিয়ে Accessibility Accessibility
/* ✅ সঠিক — ব্যবহারকারীর browser font-size সম্মান করে */
html { font-size: 100%; } /* browser default ব্যবহার করো */
p { font-size: 1rem; }
/* ❌ ভুল — fixed করলে accessibility নষ্ট হয় */
html { font-size: 16px; }
🔷 ৪. % — Parent-নির্ভর শতাংশ
% সবসময় Parent-এর একই Property-র মান দেখে।
তবে padding ও margin-এর ক্ষেত্রে উপর-নিচেও
parent-এর width-এর %।
/* width-এ % */
.container { width: 100%; max-width: 1200px; }
.half { width: 50%; }
/* font-size-এ % — em-এর মতো আচরণ */
p { font-size: 112.5%; } /* = 18px (যদি parent = 16px) */
/* padding-এ % — parent width-এর শতাংশ (উপর-নিচেও!) */
.box { padding: 5%; }
/* translate-এ % — নিজের আকারের % */
.centered {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
🔷 ৫. Viewport Units — vw, vh, dvh, svh, lvh
Viewport Unit ব্যবহার করা হয় ব্রাউজারের দৃশ্যমান এলাকার আনুপাতিক আকার নির্ধারণে।
| Unit | পূর্ণ নাম | মোবাইলে আচরণ | কখন ব্যবহার |
|---|---|---|---|
vw |
Viewport Width | স্থির | Full-width layout |
vh |
Viewport Height | bar-এ সমস্যা | Desktop Hero |
svh |
Small Viewport Height | সবসময় সবচেয়ে ছোট | মোবাইল নিরাপদ |
lvh |
Large Viewport Height | সবসময় সবচেয়ে বড় | Desktop |
dvh |
Dynamic Viewport Height | bar অনুযায়ী পরিবর্তন | মোবাইলে সেরা ✅ |
vmin |
vw ও vh-র ছোটটি | — | Responsive square |
vmax |
vw ও vh-র বড়টি | — | বিরল |
/* Full-screen Hero */
.hero { min-height: 100vh; } /* Desktop-এ ঠিক */
.hero { min-height: 100dvh; } /* মোবাইলেও সঠিক ✅ */
/* Fluid Typography */
h1 { font-size: clamp(1.5rem, 5vw, 3.5rem); }
/* Full-width — container ভেঙে */
.full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
/* vmin — যেকোনো orientation-এ সঠিক বর্গ */
.square { width: 50vmin; height: 50vmin; }
🔷 ৬. ch, ex ও Container Units — বিশেষ একক
ch — ক্যারেক্টার প্রস্থ ch
/* ch — "0" অক্ষরের প্রস্থ */
.article { max-width: 65ch; } /* পড়ার সর্বোত্তম প্রস্থ ✅ */
.narrow { max-width: 45ch; }
input { width: 20ch; } /* ঠিক ২০ অক্ষর ধরবে */
Container Query Units — cqw, cqh cqw / cqh
/* Container Query Unit */
.card-wrapper { container-type: inline-size; }
.card-title {
font-size: clamp(1rem, 5cqw, 2rem);
/* container-এর প্রস্থের ৫% — viewport নয়! */
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}
🔷 ৭. Units with Functions — গণনামূলক ফাংশন
CSS ফাংশনগুলো ভিন্ন একক একসাথে মিশিয়ে গণনা করতে পারে — যা সাধারণ মান দিয়ে সম্ভব নয়। Responsive Design-এ এগুলো অপরিহার্য।
calc() — মিশ্র একক গণনা calc()
calc() দিয়ে ভিন্ন একক একসাথে যোগ, বিয়োগ, গুণ, ভাগ করা যায়।
যোগ (+) ও বিয়োগ (-)-এর দুই পাশে স্পেস আবশ্যক।
| অপারেটর | কাজ | স্পেস আবশ্যক | উদাহরণ |
|---|---|---|---|
+ |
যোগ | হ্যাঁ ✅ | calc(100% + 20px) |
- |
বিয়োগ | হ্যাঁ ✅ | calc(100% - 32px) |
* |
গুণ | না | calc(2 * 1rem) |
/ |
ভাগ | না | calc(100% / 4) |
/* calc() — মিশ্র একক গণনা */
/* প্রস্থ থেকে Padding বাদ দেওয়া */
.box { width: calc(100% - 40px); } /* % ও px একসাথে ✅ */
.col { width: calc(50% - 1rem); } /* Grid gap-এর হিসেব */
/* Navbar-এর নিচে বাকি উচ্চতা */
.main { min-height: calc(100vh - 64px); }
.main { min-height: calc(100dvh - 64px); } /* মোবাইলে ✅ */
/* যোগ ও বিয়োগে স্পেস আবশ্যক */
.good { width: calc(100% - 32px); } /* ✅ সঠিক */
.bad { width: calc(100%-32px); } /* ❌ কাজ করবে না */
/* গুণ ও ভাগ */
.box { width: calc(100% / 3); } /* তিন সমান ভাগ */
.box { font-size: calc(1rem * 1.25); }
/* CSS Variable-এর সাথে calc() */
:root { --navbar-h: 64px; --gap: 24px; }
.hero { min-height: calc(100dvh - var(--navbar-h)); }
.sidebar { width: calc(280px - var(--gap) * 2); }
/* Full-bleed — Container ভেঙে পূর্ণ প্রস্থ */
.full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
min() — সবচেয়ে ছোট মান বেছে নেওয়া min()
min() দেওয়া মানগুলোর মধ্যে সবচেয়ে ছোটটি বেছে নেয়।
এটি max-width-এর মতো আচরণ করে — যেকোনো property-তে।
/* min() — সবচেয়ে ছোট মান */
/* ছোট স্ক্রিনে 100%, বড় স্ক্রিনে 500px */
.card { width: min(500px, 100%); }
/* সমতুল্য: width: 100%; max-width: 500px; */
/* Padding — ছোট স্ক্রিনে 5vw, বড়তে 48px */
.container { padding-inline: min(5vw, 48px); }
/* Font size */
h1 { font-size: min(8vw, 4rem); }
/* Gap */
.grid { gap: min(3vw, 32px); }
/* একাধিক মান */
.box { width: min(300px, 50%, 80vw); }
max() — সবচেয়ে বড় মান বেছে নেওয়া max()
max() দেওয়া মানগুলোর মধ্যে সবচেয়ে বড়টি বেছে নেয়।
এটি min-width বা ন্যূনতম মান নিশ্চিতের মতো আচরণ করে।
/* max() — সবচেয়ে বড় মান */
/* ন্যূনতম font-size নিশ্চিত */
p { font-size: max(1rem, 2vw); } /* ন্যূনতম 1rem, বড় স্ক্রিনে 2vw */
/* ন্যূনতম Padding */
.section { padding-block: max(40px, 8vh); }
/* ন্যূনতম Button প্রস্থ */
.btn { width: max(120px, 30%); }
/* একাধিক মান */
.box { height: max(100px, 20vh, 10vw); }
clamp() — ন্যূনতম, পছন্দের, সর্বোচ্চ একসাথে clamp()
clamp(ন্যূনতম, পছন্দের, সর্বোচ্চ) — তিনটি মান একসাথে।
পছন্দের মান সাধারণত vw দেওয়া হয় — তাহলে Fluid হয়।
Media Query ছাড়াই Responsive।
/* clamp(ন্যূনতম, পছন্দের, সর্বোচ্চ) */
/* Fluid Font Size — সবচেয়ে জনপ্রিয় ব্যবহার ✅ */
h1 { font-size: clamp(1.75rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 2rem); }
p { font-size: clamp(1rem, 2vw, 1.25rem); }
/* Fluid Container */
.container { width: clamp(320px, 90%, 1200px); }
/* Fluid Padding */
.section { padding-block: clamp(48px, 8vw, 120px); }
.card { padding: clamp(16px, 3vw, 32px); }
/* Fluid Gap */
.grid { gap: clamp(16px, 3vw, 40px); }
/* CSS Variable-এ রাখো */
:root {
--fluid-h1: clamp(1.75rem, 5vw, 3.5rem);
--fluid-padding: clamp(16px, 5vw, 48px);
}
h1 { font-size: var(--fluid-h1); }
.wrapper{ padding-inline: var(--fluid-padding); }
calc(), min(), max(), clamp() — তুলনা তুলনা
| ফাংশন | কাজ | সমতুল্য CSS | সেরা ব্যবহার |
|---|---|---|---|
calc(a op b) |
ভিন্ন একক গণনা | — | 100% - 32px, 100vh - 64px |
min(a, b) |
ছোটটি বেছে নেওয়া | max-width-এর মতো |
Container প্রস্থ সীমাবদ্ধ করা |
max(a, b) |
বড়টি বেছে নেওয়া | min-width-এর মতো |
ন্যূনতম মান নিশ্চিত করা |
clamp(min, p, max) |
সীমার মধ্যে Fluid | min + max + width |
Fluid Font, Padding, Gap ✅ |
✅ ফাংশন ব্যবহারের সেরা অভ্যাস:
ভিন্ন একক মেশাতে →
ভিন্ন একক মেশাতে →
calc() +
সর্বোচ্চ সীমা দিতে → min() +
ন্যূনতম সীমা দিতে → max() +
Fluid ও সীমাবদ্ধ একসাথে → clamp() +
Navbar বাদে বাকি উচ্চতা → calc(100dvh - var(--navbar-h))।
🔷 দ্রুত রেফারেন্স — সব Unit ও Function এক জায়গায়
| Property | সেরা Unit / Function | কারণ | এড়িয়ে চলো |
|---|---|---|---|
| font-size | rem |
Accessibility, scaling ✅ | px |
| line-height | unitless (1.5) |
নিজের font-size-এর গুণ | px |
| padding / margin | rem বা em |
font-size-এর সাথে সঙ্গতি | — |
| width (layout) | %, fr |
Fluid, responsive ✅ | px (fixed) |
| width (component) | px, rem |
নির্দিষ্ট আকারের উপাদান | — |
| max-width | px বা ch |
Container ও Reading width | — |
| height | auto, min-height |
কন্টেন্ট অনুযায়ী | px (fixed) |
| Hero min-height | dvh |
মোবাইল bar সমস্যা এড়ায় | vh |
| border | px |
নির্দিষ্ট পাতলা রেখা | — |
| border-radius | px, % |
নির্দিষ্ট বা বৃত্তাকার | — |
| Reading width | ch |
অক্ষর সংখ্যা নিয়ন্ত্রণ | — |
| Fluid font | clamp() + vw |
Media Query ছাড়া Fluid | — |
| মিশ্র একক | calc() |
ভিন্ন একক একসাথে | — |
| সর্বোচ্চ সীমা | min() |
max-width-এর মতো যেকোনো জায়গায় | — |
| ন্যূনতম সীমা | max() |
min-width-এর মতো যেকোনো জায়গায় | — |
| Fluid + সীমাবদ্ধ | clamp() |
min + preferred + max একসাথে | — |
✅ Unit বাছাইয়ের সহজ নিয়ম:
Font-size →
Font-size →
rem +
Spacing → rem বা em +
Layout width → % বা fr +
Full-screen → dvh +
Border ও Shadow → px +
Reading width → ch +
মিশ্র একক → calc() +
Fluid আকার → clamp()।
🖥️ CSS Display — সম্পূর্ণ নোট
এই সেকশনে CSS Display Property-র সব মান — block, inline, inline-block, none, flex, grid, table এবং কোনটি কখন ব্যবহার করবে তা বিস্তারিত বোঝানো হয়েছে।
🔷 CSS Display কী?
display Property নির্ধারণ করে একটি এলিমেন্ট পেজে কীভাবে দেখাবে
এবং তার ভেতরের সন্তানরা কীভাবে সাজানো হবে। CSS-এর সবচেয়ে গুরুত্বপূর্ণ Property।
সব Display মান — এক নজরে Overview
| মান | আচরণ | কখন ব্যবহার |
|---|---|---|
block |
পূর্ণ প্রস্থ, নতুন লাইনে | div, p, section, heading |
inline |
কন্টেন্টের আকার, একই লাইনে | span, a, strong, em |
inline-block |
inline + width/height কাজ করে | Button, Badge, Tag ✅ |
none |
সম্পূর্ণ লুকিয়ে যায়, জায়গা নেয় না | Toggle, Dropdown লুকানো |
flex |
Flexbox layout container | Row/Column layout ✅ |
inline-flex |
inline + flex | Inline flex container |
grid |
CSS Grid layout container | 2D layout ✅ |
inline-grid |
inline + grid | Inline grid container |
table |
table-এর মতো আচরণ | বিরল — legacy |
contents |
নিজে অদৃশ্য, সন্তান parent-এর সন্তান হয় | Wrapper div সরাতে |
🔷 ১. block ও inline — মূল পার্থক্য
block এলিমেন্ট পূর্ণ লাইন নেয় — নতুন লাইনে শুরু হয়।
inline এলিমেন্ট কন্টেন্টের মতো একই লাইনে থাকে।
| বিষয় | block |
inline |
|---|---|---|
| প্রস্থ | Parent-এর ১০০% | কন্টেন্টের আকার |
| নতুন লাইন | হ্যাঁ — আগে ও পরে | না — একই লাইনে |
| width/height | কাজ করে ✅ | কাজ করে না ❌ |
| top/bottom margin | কাজ করে ✅ | সম্পূর্ণ কাজ করে না |
| ডিফল্ট উদাহরণ | div, p, h1, ul |
span, a, strong |
/* block → inline পরিবর্তন */
div { display: inline; } /* div-কে inline করা */
li { display: inline; } /* li-কে inline করে Horizontal Nav */
/* inline → block পরিবর্তন */
a { display: block; } /* link-কে block বানানো — click এলাকা বড় */
span { display: block; }
/* ডিফল্ট block এলিমেন্ট */
/* div, p, h1, h2, h3, h4, h5, h6 */
/* ul, ol, li, section, article, header, footer, main, nav, aside */
/* ডিফল্ট inline এলিমেন্ট */
/* span, a, strong, em, b, i, u, code, label, button, input, img */
🔷 ২. inline-block — সেরা মিশ্রণ
inline-block = inline-এর মতো একই লাইনে থাকে,
কিন্তু block-এর মতো width, height, padding, margin সব কাজ করে।
/* inline-block ব্যবহার */
.badge {
display: inline-block;
padding: 4px 12px; /* কাজ করে ✅ */
border-radius: 9999px;
background-color: #dbeafe;
color: #1e40af;
}
/* Navigation — একই লাইনে */
.nav-item {
display: inline-block;
padding: 8px 16px; /* উপর-নিচ padding কাজ করে ✅ */
}
/* Vertical Align সমস্যা */
.icon-text img {
display: inline-block;
vertical-align: middle; /* inline-block-এ vertical-align কাজ করে */
}
/* inline-block-এ whitespace সমস্যা */
/* HTML-এ দুটি inline-block-এর মাঝে space থাকলে gap তৈরি হয় */
/* সমাধান: font-size: 0 parent-এ, বা flex/grid ব্যবহার করো */
🔷 ৩. display: none ও visibility: hidden — লুকানো
লুকানোর তিনটি পদ্ধতি — আচরণ সম্পূর্ণ আলাদা।
| পদ্ধতি | দৃশ্যমান | জায়গা নেয় | Event কাজ করে | Screen Reader |
|---|---|---|---|---|
display: none |
না ❌ | না ❌ | না ❌ | লুকায় |
visibility: hidden |
না ❌ | হ্যাঁ ✅ | না ❌ | লুকায় |
opacity: 0 |
না ❌ | হ্যাঁ ✅ | হ্যাঁ ✅ | দেখায় |
/* display: none — সম্পূর্ণ সরিয়ে দেওয়া */
.modal { display: none; } /* Modal বন্ধ */
.modal.active { display: block; } /* Modal খোলা */
/* visibility: hidden — জায়গা রেখে লুকানো */
.placeholder { visibility: hidden; } /* Layout ঠিক রেখে লুকানো */
/* opacity: 0 — Fade Animation-এ */
.tooltip {
opacity: 0;
transition: opacity 0.3s ease;
}
.tooltip.visible { opacity: 1; }
/* Screen Reader-এর জন্য লুকানো (দৃশ্যত) */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
🔷 ৪. flex ও grid — আধুনিক Layout
display: flex ও display: grid আধুনিক CSS Layout-এর
মূল ভিত্তি। Flexbox একমাত্রিক (row বা column),
Grid দ্বিমাত্রিক (row ও column একসাথে)।
/* Flexbox — Row বা Column */
.navbar {
display: flex;
align-items: center; /* উল্লম্বে মাঝে */
justify-content: space-between; /* দুই প্রান্তে */
gap: 16px;
}
.card-body {
display: flex;
flex-direction: column; /* Column-এ সাজানো */
gap: 12px;
}
/* Grid — দুই দিকে সাজানো */
.grid-layout {
display: grid;
grid-template-columns: repeat(3, 1fr); /* তিন সমান কলাম */
gap: 24px;
}
/* inline-flex ও inline-grid */
.icon-group { display: inline-flex; align-items: center; gap: 8px; }
/* display: contents — নিজে অদৃশ্য, সন্তান উপরে যায় */
.wrapper { display: contents; } /* wrapper div-টি যেন নেই */
| বিষয় | Flexbox | Grid |
|---|---|---|
| মাত্রা | একমাত্রিক (row বা column) | দ্বিমাত্রিক (row ও column) |
| সেরা ব্যবহার | Navbar, Card body, Button group | Page layout, Card grid |
| কন্টেন্ট-নির্ভর | হ্যাঁ — কন্টেন্ট অনুযায়ী সাজে | না — কাঠামো আগে ঠিক করে |
🔷 দ্রুত রেফারেন্স — Display সব মান ও ব্যবহার
| মান | পূর্ণ প্রস্থ | নতুন লাইন | width/height | সেরা ব্যবহার |
|---|---|---|---|---|
block |
হ্যাঁ | হ্যাঁ | হ্যাঁ ✅ | div, section, p |
inline |
না | না | না ❌ | span, a, strong |
inline-block |
না | না | হ্যাঁ ✅ | Button, Badge, Tag |
none |
— | — | — | Toggle hide/show |
flex |
হ্যাঁ | হ্যাঁ | হ্যাঁ ✅ | Row/Column layout |
inline-flex |
না | না | হ্যাঁ ✅ | Inline flex group |
grid |
হ্যাঁ | হ্যাঁ | হ্যাঁ ✅ | 2D Grid layout |
contents |
— | — | — | Wrapper সরানো |
✅ Display বেছে নেওয়ার নিয়ম:
একলাইনে ও width/height দরকার →
একলাইনে ও width/height দরকার →
inline-block +
Row বা Column layout → flex +
2D Grid layout → grid +
Toggle show/hide → none ↔ block/flex।
📍 CSS Position — সম্পূর্ণ নোট
এই সেকশনে CSS Position-এর সব মান — static, relative, absolute, fixed, sticky, z-index, Stacking Context এবং প্রতিটির বিস্তারিত ব্যাখ্যা, বাধ্যতামূলক নিয়ম ও বাস্তব ব্যবহার বোঝানো হয়েছে।
🔷 CSS Position কী?
position Property নির্ধারণ করে একটি এলিমেন্ট পেজে ঠিক কোথায় থাকবে।
top, right, bottom, left দিয়ে
নির্দিষ্ট অবস্থান দেওয়া হয় — তবে এগুলো শুধু static ছাড়া অন্য position-এ কাজ করে।
static ছাড়া বাকি সব মান (relative, absolute,
fixed, sticky) — এগুলোকে বলা হয় "positioned" এলিমেন্ট।
শুধু positioned এলিমেন্টে z-index ও top/left/right/bottom কাজ করে।
Position-এর সব মান — এক নজরে Overview
| মান | Document Flow | Anchor (কোথা থেকে) | জায়গা ধরে | কখন ব্যবহার |
|---|---|---|---|---|
static |
স্বাভাবিক | — | হ্যাঁ | ডিফল্ট — পরিবর্তন দরকার নেই |
relative |
স্বাভাবিক (গর্ত রেখে) | নিজের স্বাভাবিক অবস্থান | হ্যাঁ | সামান্য সরানো, absolute-এর Anchor ✅ |
absolute |
Flow থেকে বের | নিকটতম positioned ancestor | না | Badge, Tooltip, Dropdown, Overlay ✅ |
fixed |
Flow থেকে বের | Viewport | না | Navbar, Back-to-top, Modal Overlay ✅ |
sticky |
স্বাভাবিক → আটকে যায় | Scroll container | হ্যাঁ | Sticky Header, Table head, Sidebar ✅ |
top, right, bottom, left — offset property Offset
/* top, right, bottom, left — শুধু positioned-এ কাজ করে */
.box {
position: relative; /* বা absolute, fixed, sticky */
top: 10px; /* উপর থেকে ১০px নিচে */
right: 20px; /* ডান থেকে ২০px বামে */
bottom: 10px; /* নিচ থেকে ১০px উপরে */
left: 20px; /* বাম থেকে ২০px ডানে */
}
/* inset — সবচেয়ে সংক্ষিপ্ত ✅ */
.overlay { inset: 0; } /* top:0; right:0; bottom:0; left:0 */
.box { inset: 10px; } /* চারদিকে ১০px */
.box { inset: 10px 20px; } /* উপর-নিচ:10px, বাম-ডান:20px */
.box { inset: 10px 20px 15px 5px; } /* উপর|ডান|নিচ|বাম */
/* inset-inline ও inset-block */
.box { inset-inline: 20px; } /* left:20px; right:20px */
.box { inset-block: 10px; } /* top:10px; bottom:10px */
🔷 ১. position: static — ডিফল্ট
কী করে আচরণ
প্রতিটি HTML এলিমেন্টের ডিফল্ট position। Document flow অনুযায়ী স্বাভাবিকভাবে সাজানো হয় — block নিচে নিচে, inline পাশাপাশি।
/* static — ডিফল্ট, না লিখলেও এটাই */
.box { position: static; }
/* এগুলো কাজ করবে না */
.box {
position: static;
top: 20px; /* কোনো প্রভাব নেই ❌ */
z-index: 100; /* কোনো প্রভাব নেই ❌ */
}
কখন ব্যবহার করবে কখন
সাধারণত লেখার দরকার হয় না — এটি ডিফল্ট। তবে কোনো এলিমেন্টে আগে
অন্য position দেওয়া থাকলে সেটি সরিয়ে ডিফল্টে ফিরিয়ে আনতে
position: static লেখা হয়।
/* আগের position সরানো */
.card { position: relative; } /* সাধারণত relative */
.card.flat { position: static; } /* specific case-এ static-এ ফিরানো */
✅ মনে রাখো:
static এলিমেন্ট কখনো
absolute সন্তানের Anchor হয় না — Anchor হতে হলে
অন্তত relative দিতে হবে।
🔷 ২. position: relative — নিজের জায়গা থেকে সরানো
কী করে আচরণ
এলিমেন্ট তার স্বাভাবিক অবস্থান থেকে সরে, কিন্তু সেই জায়গাটি ধরে রাখে — অন্য এলিমেন্ট উপরে আসে না। Flow-এ একটি অদৃশ্য গর্ত থাকে।
/* relative — নিজের জায়গা থেকে সরানো */
.box {
position: relative;
top: 20px; /* স্বাভাবিক অবস্থান থেকে ২০px নিচে সরানো */
left: 10px; /* স্বাভাবিক অবস্থান থেকে ১০px ডানে সরানো */
}
/* মূল জায়গাটি flow-এ গর্ত হিসেবে থেকে যায় */
সবচেয়ে গুরুত্বপূর্ণ ব্যবহার — absolute সন্তানের Anchor Anchor
relative-এর সবচেয়ে বেশি ব্যবহার হয় absolute সন্তানের
containing block (Anchor) হিসেবে। top/left
না দিলেও — শুধু position: relative লিখলেই এলিমেন্ট Anchor হয়।
/* Pattern: parent-এ relative, সন্তানে absolute */
.card {
position: relative; /* Anchor — top/left লাগবে না */
width: 300px;
padding: 20px;
}
/* Badge — card-এর কোণে */
.card .badge {
position: absolute;
top: -8px;
right: -8px;
/* .card থেকে হিসেব হবে, viewport থেকে নয় ✅ */
}
/* Overlay — card সম্পূর্ণ ঢাকা */
.card .overlay {
position: absolute;
inset: 0;
background-color: rgba(0,0,0,0.5);
border-radius: inherit;
}
কখন ব্যবহার করবে কখন
| পরিস্থিতি | ব্যবহার |
|---|---|
| absolute সন্তানের Anchor দরকার | position: relative parent-এ ✅ |
| এলিমেন্ট সামান্য সরাতে হবে | relative + top/left |
| z-index দরকার (overlapping) | relative + z-index |
| ::before/::after-কে absolute করতে | parent-এ relative |
বাধ্যতামূলক নিয়ম ⚠️ বাধ্যতামূলক
/* relative + absolute — সবচেয়ে প্রচলিত Pattern */
/* নিয়ম: absolute সন্তান থাকলে parent-এ relative অবশ্যই দাও */
/* ❌ ভুল — relative নেই */
.card { width: 300px; }
.badge { position: absolute; top: 0; right: 0; }
/* .badge viewport থেকে হিসেব করবে — ভুল জায়গায় যাবে */
/* ✅ সঠিক — parent-এ relative */
.card { position: relative; width: 300px; }
.badge { position: absolute; top: 0; right: 0; }
/* .badge .card-এর কোণে বসবে */
🔷 ৩. position: absolute — Ancestor-এর মধ্যে মুক্ত
কী করে আচরণ
Document flow থেকে সম্পূর্ণ বের হয় — পরের এলিমেন্ট উপরে চলে আসে।
অবস্থান হিসেব হয় নিকটতম positioned ancestor-এর কোণ থেকে।
কোনো positioned ancestor না থাকলে html এলিমেন্ট থেকে হিসেব হয়।
/* absolute — Ancestor-এর কোণ থেকে */
.parent {
position: relative; /* Anchor — অবশ্যই দিতে হবে ✅ */
}
.child {
position: absolute;
top: 0; /* parent-এর উপর প্রান্ত থেকে */
right: 0; /* parent-এর ডান প্রান্ত থেকে */
bottom: 0; /* parent-এর নিচ প্রান্ত থেকে */
left: 0; /* parent-এর বাম প্রান্ত থেকে */
}
Containing Block — কোথা থেকে হিসেব হয় Containing Block
/* Containing Block খোঁজার নিয়ম */
/* ১ম positioned ancestor খুঁজে পেলে সেটিই Anchor */
.grandparent { position: relative; } /* ← Anchor হবে এটি */
.parent { /* position নেই */ } /* skip — static */
.child { position: absolute; top: 0; left: 0; }
/* .child → .grandparent-এর কোণ থেকে হিসেব */
/* কোনো positioned ancestor নেই */
.parent { /* position নেই */ }
.child { position: absolute; top: 0; left: 0; }
/* .child → html/viewport থেকে হিসেব — সাধারণত অনাকাঙ্ক্ষিত ❌ */
/* nested positioned elements */
.outer { position: relative; }
.middle { position: relative; } /* ← Anchor হবে এটি, outer নয় */
.inner { position: absolute; top: 0; }
/* .inner → .middle থেকে হিসেব */
absolute-এর বিশেষ আচরণ বিশেষ
/* width: auto → কন্টেন্টের মতো সংকুচিত */
.abs { position: absolute; }
/* width দেওয়া না হলে কন্টেন্ট যতটুকু লাগে ততটুকুই নেয় */
/* পুরো parent ঢাকা */
.overlay { position: absolute; inset: 0; }
/* মাঝখানে রাখা — সবচেয়ে প্রচলিত Pattern ✅ */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* নিজের আকারের অর্ধেক পিছিয়ে */
}
/* নিচে Tooltip */
.tooltip {
position: absolute;
bottom: calc(100% + 8px); /* parent-এর উপরে ৮px */
left: 50%;
transform: translateX(-50%); /* অনুভূমিকে মাঝে */
white-space: nowrap;
}
/* Dropdown Menu */
.dropdown {
position: absolute;
top: 100%; /* parent-এর ঠিক নিচে */
left: 0;
min-width: 200px;
z-index: 100;
}
কখন ব্যবহার করবে কখন
| পরিস্থিতি | ব্যবহার |
|---|---|
| Card-এর কোণে Badge, Icon | parent: relative, badge: absolute ✅ |
| Dropdown Menu | trigger: relative, menu: absolute top:100% ✅ |
| Tooltip | parent: relative, tooltip: absolute ✅ |
| Image Overlay / Caption | image wrap: relative, overlay: absolute inset:0 ✅ |
| Custom Checkbox / Radio | label: relative, indicator: absolute |
| Decorative ::before/::after | parent: relative, pseudo: absolute ✅ |
বাধ্যতামূলক নিয়ম ⚠️ বাধ্যতামূলক
/* absolute ব্যবহারের বাধ্যতামূলক নিয়ম */
/* নিয়ম ১: parent-এ position: relative দাও — না হলে ভুল জায়গায় যাবে */
.card { position: relative; } /* অবশ্যই ✅ */
.badge { position: absolute; top: 0; right: 0; }
/* নিয়ম ২: z-index দাও — না হলে অন্য এলিমেন্টের নিচে চলে যেতে পারে */
.dropdown { position: absolute; z-index: 100; }
/* নিয়ম ৩: width দাও বা fit-content — কন্টেন্ট অনুযায়ী সংকুচিত হয় */
.dropdown { position: absolute; width: 200px; } /* নির্দিষ্ট */
.tooltip { position: absolute; width: max-content; } /* কন্টেন্ট অনুযায়ী */
/* নিয়ম ৪: overflow: hidden parent-এ থাকলে absolute সন্তান কাটা যাবে */
.card { position: relative; overflow: hidden; }
.badge { position: absolute; top: -8px; right: -8px; }
/* badge card-এর বাইরে → কেটে যাবে ❌ */
/* সমাধান: overflow: hidden সরাও, বা badge ভেতরে রাখো */
🔷 ৪. position: fixed — Viewport-এ স্থির
কী করে আচরণ
Viewport-এর কোণ থেকে অবস্থান হিসেব হয় — parent যাই হোক। পেজ স্ক্রল করলেও নড়ে না। Document flow থেকে বের — পরের এলিমেন্ট উপরে চলে আসে।
/* fixed — Viewport-এ স্থির */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0; /* বা width: 100% */
height: 64px;
background-color: white;
z-index: 1000;
}
/* fixed Navbar-এর কারণে content ঢাকা পড়ে — body-তে padding দাও */
body { padding-top: 64px; } /* Navbar height-এর সমান ✅ */
⚠️ fixed-এর গুরুত্বপূর্ণ সীমাবদ্ধতা সীমাবদ্ধতা
/* ⚠️ fixed ভেঙে যাওয়ার কারণ */
/* parent-এ এগুলো থাকলে fixed ভাঙে */
.parent { transform: translateX(0); } /* ❌ fixed Viewport ছেড়ে parent-এ আটকায় */
.parent { filter: blur(0); } /* ❌ */
.parent { perspective: 1000px; } /* ❌ */
.parent { will-change: transform; } /* ❌ */
.parent { contain: paint; } /* ❌ */
/* সমাধান: fixed এলিমেন্টকে এই parent-এর বাইরে রাখো */
/* ✅ body-র সরাসরি সন্তান হিসেবে রাখা সবচেয়ে নিরাপদ */
<body>
<nav class="navbar"></nav> ← এখানে রাখো
<div class="page">...</div>
</body>
বাস্তব ব্যবহার বাস্তব
/* Sticky Navbar */
.navbar {
position: fixed;
inset: 0 0 auto 0; /* top:0; right:0; left:0; bottom:auto */
height: 64px;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 32px;
right: 32px;
width: 48px;
height: 48px;
border-radius: 50%;
z-index: 999;
display: none; /* JS দিয়ে show করো */
}
/* Full-screen Modal Overlay */
.modal-overlay {
position: fixed;
inset: 0;
background-color: rgba(0,0,0,0.6);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
/* Cookie / Notification Banner */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 16px 24px;
background-color: #1e293b;
color: white;
z-index: 9999;
}
/* Side Drawer */
.drawer {
position: fixed;
top: 0;
right: 0; /* ডান থেকে আসবে */
bottom: 0;
width: 320px;
background-color: white;
z-index: 1000;
transform: translateX(100%); /* লুকানো */
transition: transform 0.3s ease;
}
.drawer.open { transform: translateX(0); } /* খোলা */
কখন ব্যবহার করবে কখন
| পরিস্থিতি | ব্যবহার | বাধ্যতামূলক |
|---|---|---|
| সবসময় দৃশ্যমান Navbar | fixed top:0 |
body { padding-top } ✅ |
| Modal পর্দা | fixed inset:0 |
z-index যথেষ্ট উঁচু |
| Back-to-top Button | fixed bottom right |
z-index |
| Side Drawer | fixed top right/left |
z-index + transform |
| Floating Action Button | fixed bottom right |
z-index |
বাধ্যতামূলক নিয়ম ⚠️ বাধ্যতামূলক
/* fixed ব্যবহারের বাধ্যতামূলক নিয়ম */
/* নিয়ম ১: z-index অবশ্যই দাও */
.fixed-el { position: fixed; z-index: 1000; }
/* নিয়ম ২: fixed Navbar হলে body-তে padding-top দাও */
.navbar { position: fixed; height: 64px; }
body { padding-top: 64px; } /* কন্টেন্ট Navbar-এর নিচে যাবে না */
/* নিয়ম ৩: parent-এ transform রাখো না */
/* fixed এলিমেন্ট body-র সরাসরি সন্তান রাখাই নিরাপদ */
/* নিয়ম ৪: মোবাইলে keyboard খুললে fixed নড়তে পারে */
/* Input focus করলে মোবাইলে viewport পরিবর্তন হয় */
🔷 ৫. position: sticky — স্ক্রল করলে আটকে যায়
কী করে আচরণ
স্বাভাবিক flow-এ থাকে — scroll করতে করতে threshold পৌঁছালে আটকে যায় (fixed-এর মতো)। Parent-এর শেষ পর্যন্ত আটকে থাকে — parent শেষ হলে চলে যায়।
/* sticky-র ৩টি অবস্থা */
/* অবস্থা ১: threshold পৌঁছানোর আগে — স্বাভাবিক flow-এ */
/* অবস্থা ২: threshold-এ — আটকে যায় (fixed-এর মতো) */
/* অবস্থা ৩: parent শেষ হলে — সাথে চলে যায় */
.sticky-header {
position: sticky;
top: 0; /* উপরে ০px পৌঁছালে আটকাবে — অবশ্যই দিতে হবে ✅ */
}
sticky কাজ না করার কারণ সমস্যা
/* sticky কাজ না করার কারণ ও সমাধান */
/* কারণ ১: top দেওয়া হয়নি */
.header { position: sticky; } /* ❌ কাজ করবে না */
.header { position: sticky; top: 0; } /* ✅ */
/* কারণ ২: Parent-এ overflow: hidden বা auto */
.parent { overflow: hidden; } /* ❌ sticky ভাঙে */
.child { position: sticky; top: 0; }
/* সমাধান: parent-এর overflow সরাও বা clip ব্যবহার করো */
.parent { overflow: clip; } /* ✅ sticky কাজ করে, overflow-ও নিয়ন্ত্রণ হয় */
/* কারণ ৩: Parent-এর height যথেষ্ট নয় */
.parent { height: 60px; } /* ❌ sticky scroll করার জায়গা নেই */
/* সমাধান: parent-এর height বাড়াও বা min-height দাও */
/* কারণ ৪: Parent নিজেই scroll container — সেটির scroll দেখতে হবে */
বাস্তব ব্যবহার বাস্তব
/* Sticky Navbar — fixed-এর চেয়ে সহজ */
.navbar {
position: sticky;
top: 0;
z-index: 100;
background-color: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
/* body-তে padding-top দিতে হয় না ✅ */
}
/* Sticky Section Header */
.section-title {
position: sticky;
top: 0; /* বা top: 64px; যদি Navbar থাকে */
background-color: #f8fafc;
padding: 12px 0;
z-index: 10;
border-bottom: 1px solid #e2e8f0;
}
/* Sticky Table Header */
thead th {
position: sticky;
top: 0;
background-color: #f8fafc;
z-index: 1;
border-bottom: 2px solid #e2e8f0;
}
/* Table-এর প্রথম Column sticky */
td:first-child, th:first-child {
position: sticky;
left: 0;
background-color: white;
z-index: 2;
}
/* Sticky Sidebar */
.sidebar {
position: sticky;
top: 80px; /* Navbar-এর নিচে আটকাবে */
max-height: calc(100vh - 80px);
overflow-y: auto;
align-self: start; /* Grid-এ কাজ করে — অবশ্যই দিতে হবে ✅ */
}
/* Section-ভিত্তিক Sticky — প্রতিটি section-এ header আটকায় */
.section {
/* height ঠিক রাখো — sticky এখানে কাজ করবে */
}
.section-header {
position: sticky;
top: 0;
background-color: #1e293b;
color: white;
padding: 8px 16px;
}
কখন ব্যবহার করবে কখন
| পরিস্থিতি | ব্যবহার | বাধ্যতামূলক |
|---|---|---|
| Navbar scroll-এ লেগে থাকবে | sticky top:0 |
top অবশ্যই ✅ |
| Table Header স্ক্রলে দৃশ্যমান | thead th: sticky top:0 |
z-index + background |
| Blog Sidebar | sticky top:80px |
Grid-এ align-self: start ✅ |
| Section-ভিত্তিক Header | sticky top:0 |
Parent-এ overflow: visible |
| Category অনুযায়ী আটকানো | প্রতিটি category-তে sticky |
Parent height যথেষ্ট |
sticky বনাম fixed — সঠিক পছন্দ তুলনা
| বিষয় | sticky |
fixed |
|---|---|---|
| Document Flow | জায়গা ধরে রাখে ✅ | জায়গা ছেড়ে দেয় |
| body padding-top | দরকার নেই ✅ | দরকার হয় |
| Scroll boundary | Parent-এর শেষে চলে যায় | সবসময় viewport-এ |
| Parent-এর বাইরে | যেতে পারে না | সবসময় Viewport-এ ✅ |
| সেরা ব্যবহার | Navbar, Table head, Sidebar | Modal overlay, Floating button |
বাধ্যতামূলক নিয়ম ⚠️ বাধ্যতামূলক
/* sticky-র বাধ্যতামূলক নিয়ম */
/* নিয়ম ১: top/bottom/left/right অবশ্যই দাও */
.sticky { position: sticky; top: 0; } /* top না দিলে কাজ করবে না ❌ */
/* নিয়ম ২: Parent-এ overflow: hidden/auto রাখো না */
.parent { overflow: visible; } /* বা overflow: clip */
/* নিয়ম ৩: Sidebar-এ align-self: start দাও */
.sidebar {
position: sticky;
top: 80px;
align-self: start; /* Grid-এ না দিলে sidebar stretch হয়ে কাজ করে না ❌ */
}
/* নিয়ম ৪: z-index দাও — অন্য কন্টেন্টের নিচে চলে যেতে পারে */
.sticky-header { position: sticky; top: 0; z-index: 10; background: white; }
/* background: white না দিলে কন্টেন্ট দেখা যাবে পিছন থেকে ❌ */
🔷 ৬. z-index — স্তরের ক্রম
z-index দিয়ে positioned এলিমেন্ট কোন স্তরে থাকবে
তা নির্ধারণ করা হয়। বড় মান = সামনে, ছোট মান = পেছনে।
শুধু positioned এলিমেন্টে কাজ করে (static ছাড়া)।
/* z-index — স্তরের ক্রম */
.background { position: relative; z-index: -1; } /* সবার পেছনে */
.base { position: relative; z-index: 0; }
.card { position: relative; z-index: 1; }
.dropdown { position: absolute; z-index: 100; }
.sticky-nav { position: sticky; z-index: 200; }
.overlay { position: fixed; z-index: 300; }
.modal { position: fixed; z-index: 400; }
.toast { position: fixed; z-index: 500; }
.tooltip { position: absolute; z-index: 600; }
/* CSS Variable দিয়ে z-index পরিচালনা — Design System ✅ */
:root {
--z-below: -1;
--z-base: 0;
--z-raised: 10;
--z-dropdown:100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-toast: 500;
--z-tooltip: 600;
}
.modal { z-index: var(--z-modal); }
✅ z-index কাজ না করলে: এলিমেন্টে
position: static আছে কিনা দেখো — static-এ z-index কাজ করে না।
অন্তত position: relative দাও।
🔷 ৭. Stacking Context — z-index-এর নিজস্ব পরিবেশ
Stacking Context কী ধারণা
Stacking Context হলো একটি এলিমেন্টের নিজস্ব z-index জগৎ। এর ভেতরের সন্তানদের z-index শুধু নিজেদের মধ্যে তুলনা হয় — বাইরের এলিমেন্টের সাথে নয়। Stacking Context নিজে একটি আস্ত unit — বাইরের এলিমেন্ট এর সন্তানদের মাঝে ঢুকতে পারে না।
/* Stacking Context-এর সহজ উদাহরণ */
/* দুটি Stacking Context */
.context-A { position: relative; z-index: 1; } /* Context A */
.context-B { position: relative; z-index: 2; } /* Context B — সামনে */
/* Context A-র সন্তান, z-index: 999 দিলেও Context B-র নিচে থাকবে */
.context-A .child { position: relative; z-index: 999; }
/* কারণ: Context A (z-index:1) নিজেই Context B (z-index:2)-এর পেছনে */
/* ভেতরের child-এর z-index যতই বড় হোক, context-এর বাইরে যেতে পারবে না */
Stacking Context তৈরি হওয়ার সব কারণ কারণ
| Property | মান | Stacking Context তৈরি করে |
|---|---|---|
position + z-index |
relative/absolute/fixed/sticky + z-index ≠ auto |
হ্যাঁ ✅ |
opacity |
1-এর কম |
হ্যাঁ ✅ |
transform |
none ছাড়া যেকোনো |
হ্যাঁ ✅ |
filter |
none ছাড়া যেকোনো |
হ্যাঁ ✅ |
backdrop-filter |
none ছাড়া যেকোনো |
হ্যাঁ ✅ |
perspective |
none ছাড়া যেকোনো |
হ্যাঁ ✅ |
mix-blend-mode |
normal ছাড়া যেকোনো |
হ্যাঁ ✅ |
isolation |
isolate |
হ্যাঁ ✅ (সবচেয়ে পরিষ্কার) |
will-change |
transform, opacity ইত্যাদি |
হ্যাঁ ✅ |
contain |
layout, paint, strict |
হ্যাঁ ✅ |
clip-path |
none ছাড়া যেকোনো |
হ্যাঁ ✅ |
mask |
প্রযোজ্য মান | হ্যাঁ ✅ |
/* Stacking Context তৈরির কারণ — সাধারণ উদাহরণ */
/* ১. position + z-index */
.card { position: relative; z-index: 1; } /* Context তৈরি */
/* ২. opacity */
.faded { opacity: 0.9; } /* Context তৈরি! */
/* ৩. transform */
.animated { transform: translateY(0); } /* Context তৈরি! */
.animated { will-change: transform; } /* Context তৈরি! */
/* ৪. filter */
.blurred { filter: drop-shadow(0 4px 8px black); } /* Context তৈরি! */
/* ৫. isolation: isolate — সবচেয়ে পরিষ্কার ✅ */
.isolated { isolation: isolate; } /* শুধু Context তৈরির জন্য, অন্য কোনো প্রভাব নেই */
Stacking Context — সাধারণ বিভ্রান্তি ⚠️ বিভ্রান্তি
/* সাধারণ বিভ্রান্তি: "z-index বড় করলেই সামনে আসবে" */
/* HTML কাঠামো */
/*
<div class="box-a"> ← position:relative; z-index:1
<div class="child-a"> ← position:relative; z-index:9999
</div>
<div class="box-b"> ← position:relative; z-index:2
<div class="child-b"> ← position:relative; z-index:1
</div>
*/
.box-a { position: relative; z-index: 1; }
.child-a { position: relative; z-index: 9999; } /* বিশাল z-index! */
.box-b { position: relative; z-index: 2; }
.child-b { position: relative; z-index: 1; }
/* ফলাফল: child-a (z-index:9999) তবুও child-b-এর পেছনে থাকবে! */
/* কারণ: box-a (z-index:1) পুরোটাই box-b (z-index:2)-এর পেছনে */
/* child-এর z-index শুধু তার নিজের context-এ তুলনা হয় */
isolation: isolate — সমাধান সমাধান
/* isolation: isolate — সবচেয়ে নিরাপদ Context তৈরি */
/* সমস্যা: .card-এর ভেতরের z-index বাইরে প্রভাব ফেলছে */
.card { position: relative; }
/* সমাধান: Card-কে আলাদা Context-এ রাখো */
.card { isolation: isolate; } /* শুধু Context তৈরি — অন্য কোনো পরিবর্তন নেই ✅ */
/* mix-blend-mode সমস্যা সমাধান */
.hero { isolation: isolate; } /* Hero-র ভেতরের blend-mode বাইরে যাবে না */
/* বাস্তব উদাহরণ — Card Component */
.card {
position: relative;
isolation: isolate; /* সব ভেতরের z-index নিজেদের মধ্যে সীমাবদ্ধ */
}
.card .badge { position: absolute; z-index: 2; }
.card .overlay { position: absolute; z-index: 1; }
/* এখন .card-এর বাইরে z-index প্রভাব ফেলবে না ✅ */
Stacking Context-এর স্তর বিন্যাস স্তর বিন্যাস
/* Stacking Context-এর ভেতরে স্তর বিন্যাস (নিচ থেকে উপর) */
/* ১. ঋণাত্মক z-index — সবার পেছনে */
.behind { position: relative; z-index: -1; }
/* ২. Block এলিমেন্ট */
/* ৩. Float */
/* ৪. Inline */
/* ৫. z-index: 0 বা auto — positioned */
.normal { position: relative; z-index: 0; }
/* ৬. ধনাত্মক z-index — সামনে, বড় সংখ্যা আরও সামনে */
.front-1 { position: relative; z-index: 1; }
.front-2 { position: relative; z-index: 2; } /* সামনে */
z-index Debugging — কীভাবে সমস্যা খুঁজবে Debug
/* z-index কাজ না করলে এই ধাপে দেখো */
/* ধাপ ১: position আছে কিনা দেখো */
.el { z-index: 100; } /* ❌ position নেই — কাজ করবে না */
.el { position: relative; z-index: 100; } /* ✅ */
/* ধাপ ২: Ancestor-এ Stacking Context আছে কিনা দেখো */
/* Chrome DevTools → Elements → Computed → stacking context */
/* ধাপ ৩: transform বা opacity আছে কিনা দেখো parent-এ */
.parent { transform: translateZ(0); } /* এটি Context তৈরি করে! */
.child { z-index: 9999; } /* parent-এর Context-এ আটকে আছে */
/* ধাপ ৪: isolation: isolate দিয়ে আলাদা করো */
.problematic-parent { isolation: isolate; }
/* ধাপ ৫: z-index Scale ঠিক করো */
/* একই level-এর এলিমেন্টে ১, ২, ৩ — বড় gap রাখো যাতে মাঝে দেওয়া যায় */
:root {
--z-card: 1;
--z-dropdown: 100; /* card থেকে অনেক বড় — মাঝে নতুন দেওয়া যাবে */
--z-modal: 400;
}
🔷 ৮. বাস্তব উদাহরণ — সব Position একসাথে
Page Layout — সব Position-এর ব্যবহার Page Layout
/* সম্পূর্ণ Page — সব Position একসাথে */
/* ১. fixed Navbar */
.navbar {
position: fixed;
inset: 0 0 auto 0; /* top right bottom left */
height: 64px;
background: white;
z-index: var(--z-sticky); /* 200 */
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
body { padding-top: 64px; }
/* ২. Page Layout */
.layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 24px;
max-width: 1280px;
margin: 0 auto;
padding: 24px;
}
/* ৩. sticky Sidebar */
.sidebar {
position: sticky;
top: calc(64px + 24px); /* Navbar height + gap */
max-height: calc(100vh - 64px - 48px);
overflow-y: auto;
align-self: start;
}
/* ৪. Card — relative Anchor */
.card {
position: relative;
isolation: isolate; /* নিজস্ব Stacking Context */
border-radius: 12px;
overflow: hidden;
}
/* ৫. absolute Badge */
.card .badge {
position: absolute;
top: 12px;
right: 12px;
z-index: 1;
}
/* ৬. absolute Overlay */
.card .overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
z-index: 0;
}
/* ৭. fixed Modal */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: var(--z-overlay); /* 300 */
display: flex;
align-items: center;
justify-content: center;
}
.modal-box {
position: relative; /* Modal-এর Close button Anchor */
background: white;
border-radius: 16px;
padding: 32px;
max-width: 560px;
width: 90%;
z-index: var(--z-modal); /* 400 */
}
.modal-close {
position: absolute;
top: 16px;
right: 16px;
}
/* ৮. fixed Toast */
.toast-container {
position: fixed;
bottom: 24px;
right: 24px;
z-index: var(--z-toast); /* 500 */
display: flex;
flex-direction: column;
gap: 8px;
}
Dropdown Menu — relative + absolute Pattern Dropdown
/* Dropdown — সবচেয়ে প্রচলিত relative+absolute Pattern */
.dropdown-wrapper {
position: relative; /* Anchor — অবশ্যই ✅ */
display: inline-block;
}
.dropdown-trigger {
cursor: pointer;
padding: 8px 16px;
}
.dropdown-menu {
position: absolute;
top: calc(100% + 4px); /* trigger-এর ঠিক নিচে ৪px গ্যাপ */
left: 0;
min-width: 200px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
z-index: var(--z-dropdown); /* 100 */
/* লুকানো অবস্থা */
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.dropdown-wrapper:hover .dropdown-menu,
.dropdown-wrapper.open .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
🔷 দ্রুত রেফারেন্স — Position সব নিয়ম এক জায়গায়
| মান | Flow-এ | Anchor | top/left কাজ | z-index কাজ | সেরা ব্যবহার |
|---|---|---|---|---|---|
static |
হ্যাঁ | — | না ❌ | না ❌ | ডিফল্ট |
relative |
হ্যাঁ (গর্ত) | নিজে | হ্যাঁ ✅ | হ্যাঁ ✅ | Anchor, সামান্য সরানো |
absolute |
না | positioned ancestor | হ্যাঁ ✅ | হ্যাঁ ✅ | Badge, Tooltip, Overlay |
fixed |
না | Viewport | হ্যাঁ ✅ | হ্যাঁ ✅ | Navbar, Modal, FAB |
sticky |
হ্যাঁ → stuck | Scroll container | হ্যাঁ (threshold) ✅ | হ্যাঁ ✅ | Sticky nav, Table head |
বাধ্যতামূলক নিয়ম — সব একসাথে ⚠️ বাধ্যতামূলক
| Position | বাধ্যতামূলক নিয়ম |
|---|---|
absolute |
Parent-এ position: relative অবশ্যই দাও ✅ |
absolute |
z-index দাও — অন্যথায় অন্য এলিমেন্টের নিচে যাবে |
fixed |
z-index দাও |
fixed Navbar |
body { padding-top: [height] } দাও ✅ |
fixed |
Parent-এ transform রাখো না ⚠️ |
sticky |
top বা bottom অবশ্যই দাও ✅ |
sticky |
Parent-এ overflow: hidden/auto রাখো না ⚠️ |
sticky Sidebar |
Grid-এ align-self: start দাও ✅ |
sticky/absolute |
background-color দাও — না হলে কন্টেন্ট দেখাবে |
| যেকোনো positioned | z-index Design System Variable দিয়ে পরিচালনা করো |
✅ Position-এর সোনালি নিয়ম:
absolute সন্তানের parent-এ position: relative দাও +
sticky-তে অবশ্যই top বা bottom দাও +
fixed Navbar-এ body-তে padding-top দাও +
Overlay-এ inset: 0 ব্যবহার করো +
z-index CSS Variable দিয়ে পরিচালনা করো +
Stacking Context সমস্যায় isolation: isolate ব্যবহার করো।
⚖️ CSS Specificity — সম্পূর্ণ নোট
এই সেকশনে CSS Specificity-র সব বিষয় — Specificity কী, কীভাবে হিসেব হয়, Cascade, Inheritance, !important এবং আধুনিক @layer ব্যবস্থাপনা বিস্তারিত বোঝানো হয়েছে।
🔷 CSS Specificity কী?
CSS-এ একই এলিমেন্টে একাধিক rule প্রযোজ্য হলে ব্রাউজার নির্ধারণ করে কোন rule প্রযোগ হবে — এই সিদ্ধান্তের নিয়মকে বলে Specificity।
সহজ ভাষায় — Specificity হলো প্রতিযোগিতার পয়েন্ট। বেশি পয়েন্টের Selector জেতে। পয়েন্ট সমান হলে পরে লেখা rule জেতে।
Cascade-এর সিদ্ধান্তের ধাপ — এক নজরে Cascade
| ধাপ | নিয়ম | জেতে যখন |
|---|---|---|
| ১. Origin | User Agent → Author → User | Author CSS সাধারণত জেতে |
| ২. !important | !important থাকলে সব override | !important সবসময় জেতে |
| ৩. @layer | পরের Layer জেতে | Layer ক্রম অনুযায়ী |
| ৪. Specificity | বেশি ওজনের Selector জেতে | ID > Class > Element |
| ৫. Order | পরে লেখা rule জেতে | Specificity সমান হলে |
🔷 ১. Specificity হিসেব — পয়েন্ট সিস্টেম
Specificity তিনটি স্তম্ভে হিসেব হয়: (A, B, C)। A = ID, B = Class/Attribute/Pseudo-class, C = Element/Pseudo-element। তুলনা শুরু হয় A থেকে — A সমান হলে B, তারপর C।
| Selector ধরন | A | B | C | উদাহরণ |
|---|---|---|---|---|
| Inline style | ১০০০ | ০ | ০ | style="color: red" |
| ID | ১ | ০ | ০ | #header |
| Class | ০ | ১ | ০ | .btn |
| Attribute | ০ | ১ | ০ | [type="text"] |
| Pseudo-class | ০ | ১ | ০ | :hover, :focus |
| Element | ০ | ০ | ১ | p, div, h1 |
| Pseudo-element | ০ | ০ | ১ | ::before, ::after |
| * (Universal) | ০ | ০ | ০ | * |
| :is(), :not(), :has() | ভেতরের সবচেয়ে বড় Selector-এর মান নেয় | :is(#id, .class) = (1,0,0) |
||
| :where() | ০ | ০ | ০ | সবসময় ০ ✅ |
/* Specificity হিসেবের উদাহরণ */
/* A B C */
p /* 0, 0, 1 */
.btn /* 0, 1, 0 */
#header /* 1, 0, 0 */
p.intro /* 0, 1, 1 — element + class */
div p /* 0, 0, 2 — দুটি element */
.nav .link /* 0, 2, 0 — দুটি class */
#header .nav a /* 1, 1, 1 */
#header .nav a:hover /* 1, 2, 1 — :hover = pseudo-class, B+১ */
div#main .sidebar p /* 1, 1, 2 */
/* তুলনা: কোনটি জেতে? */
#main p /* (1, 0, 1) */
.section p /* (0, 1, 1) ← হারে, A তুলনায় 0 < 1 */ .a .b .c .d .e .f .g .h .i .j .k /* (0, 11, 0) — তবুও
#id-এর কাছে হারে (1, 0, 0) */
🔷 ২. বাস্তব উদাহরণ — কোন Selector জেতে
/* একই h1-এ চারটি rule — কোনটি প্রযোগ হবে? */
h1 { color: black; } /* (0,0,1) */
.heading { color: blue; } /* (0,1,0) — জেতে, class > element */
#main-title { color: green; } /* (1,0,0) — জেতে, ID > class */
style="color: red;" /* inline — জেতে, সবচেয়ে বেশি */
/* ফলাফল: color = red (inline style) */
/* Pseudo-class উদাহরণ */
a { color: blue; } /* (0,0,1) */
a:hover { color: red; } /* (0,1,1) — hover-এ লাল ✅ */
.nav a { color: green; } /* (0,1,1) — nav-এ সবুজ */
.nav a:hover{ color: purple; } /* (0,2,1) — nav hover-এ বেগুনী ✅ */
/* :is() এর Specificity */
:is(#header, .nav) a /* → (1,0,1) কারণ #header সবচেয়ে বড় */
:where(#header, .nav) a /* → (0,0,1) কারণ :where সবসময় 0 ✅ */
/* !important — সব override */
p { color: blue !important; } /* সবসময় এটি জেতে — Specificity যাই হোক */
#main p { color: red; } /* !important-এর কাছে হারে */
🔷 ৩. !important — সব override করা
!important সব Specificity-র উপরে — Inline style-কেও override করে।
তবে বেশি ব্যবহার করলে CSS ভঙ্গুর হয় — debug করা কঠিন হয়।
/* !important ব্যবহার */
p { color: blue !important; } /* সব override — এমনকি inline style-ও */
/* !important vs !important — Specificity ফিরে আসে */
p { color: blue !important; } /* (0,0,1) + !important */
.text { color: red !important; } /* (0,1,0) + !important → এটি জেতে, বেশি specific */
#main p { color: green !important; } /* (1,0,1) + !important → এটি জেতে ✅ */
/* !important-এর বৈধ ব্যবহার */
/* ১. Utility class — Tailwind-এর মতো */
.hidden { display: none !important; } /* সবসময় লুকাতে */
.text-center { text-align: center !important; }
/* ২. User Accessibility CSS */
body { font-size: 24px !important; } /* বড় font দরকার */
/* ❌ এড়িয়ে চলো */
.card h2 { color: red !important; } /* কারণ পরে পরিবর্তন করা কঠিন */
⚠️ !important সতর্কতা: !important যোগ করার প্রয়োজন হলে বুঝতে হবে
Selector কাঠামোতে সমস্যা আছে। সমাধান: Selector আরও specific করো,
অথবা CSS ফাইলের ক্রম পরিবর্তন করো।
🔷 ৪. Inheritance — উত্তরাধিকার
কিছু CSS Property Parent থেকে Child-এ স্বয়ংক্রিয়ভাবে প্রবাহিত হয়। সব Property Inherited নয় — মূলত Typography-সংক্রান্ত Property Inherit হয়।
| Inherited হয় ✅ | Inherited হয় না ❌ |
|---|---|
color |
margin, padding |
font-family, font-size, font-weight |
border, background |
line-height, letter-spacing |
width, height |
text-align, text-transform |
display, position |
list-style |
box-shadow, opacity |
cursor, visibility |
overflow, z-index |
/* Inheritance উদাহরণ */
body {
font-family: 'Inter', sans-serif; /* সব সন্তান inherit করবে ✅ */
font-size: 1rem;
color: #1e293b;
line-height: 1.6;
}
/* Inheritance কীওয়ার্ড */
.btn { color: inherit; } /* parent-এর color নাও */
.box { margin: initial; } /* ডিফল্ট মানে ফিরে যাও (0) */
.card { border: unset; } /* Inherited হলে inherit, না হলে initial */
.section { padding: revert; } /* Browser stylesheet-এর মানে ফিরে যাও */
/* all — সব property রিসেট */
.isolated { all: unset; } /* সব CSS সরিয়ে নতুন শুরু */
.isolated { all: revert; } /* Browser default-এ ফিরে যাও */
🔷 ৫. @layer — আধুনিক CSS Cascade Layer
@layer দিয়ে CSS-কে স্তরে ভাগ করা যায়।
পরে ঘোষিত Layer জেতে — এমনকি কম Specific Selector দিয়েও
আগের Layer override করা যায়। Third-party CSS ব্যবস্থাপনায় অত্যন্ত কার্যকর।
/* @layer — স্তর ঘোষণা (ক্রম গুরুত্বপূর্ণ) */
@layer base, components, utilities;
/* utilities সবার শেষ — সবচেয়ে বেশি জেতে */
/* Base — browser reset, টাইপোগ্রাফি */
@layer base {
*, *::before, *::after { box-sizing: border-box; }
body { font-family: system-ui; color: #1e293b; }
a { color: inherit; }
}
/* Components — Card, Button, Modal */
@layer components {
.btn { padding: 12px 24px; border-radius: 8px; }
.card { background: white; border-radius: 12px; }
}
/* Utilities — Override করতে */
@layer utilities {
.text-red { color: #ef4444; } /* components-এর যেকোনো color override */
.p-0 { padding: 0; }
.hidden { display: none; }
}
/* Third-party CSS Layer-এ রাখা */
@layer vendor {
/* Normalize, Reset, Third-party ইত্যাদি */
}
/* নিজের CSS পরে এলে Layer ছাড়াও vendor-এর উপরে থাকে */
✅ @layer-এর সুবিধা: !important ছাড়াই Third-party CSS override।
Specificity যুদ্ধ এড়ানো। CSS-এর কাঠামো স্পষ্ট — কোনটি কোথায় তা জানা যায়।
Tailwind CSS v4-সহ আধুনিক Framework @layer ব্যবহার করে।
🔷 ৬. Specificity কমানোর কৌশল — সহজ CSS
/* ❌ উচ্চ Specificity — override করা কঠিন */
#main .sidebar ul li a { color: blue; } /* (1,2,3) */
/* ✅ কম Specificity — সহজে override */
.nav-link { color: blue; } /* (0,1,0) */
/* :where() — Specificity ০ বানানো */
:where(h1, h2, h3, h4) { margin: 0; } /* (0,0,0) — সহজে override */
:is(h1, h2, h3, h4) { margin: 0; } /* (0,0,1) — element-এর মান নেয় */
/* ID-এর বদলে Attribute Selector */
#submit-btn { color: white; } /* (1,0,0) — উচ্চ */
[id="submit-btn"] { color: white; } /* (0,1,0) — কম ✅ */
/* BEM পদ্ধতি — শুধু Class, কোনো nesting নেই */
.card { } /* (0,1,0) */
.card__header { } /* (0,1,0) — parent নির্ভর নয় */
.card__btn { } /* (0,1,0) — সবসময় একই specificity */
.card--featured { } /* (0,1,0) — modifier */
/* CSS Layer দিয়ে Specificity এড়ানো */
@layer utilities {
.hidden { display: none; } /* Layer পরে হওয়ায় কম specific-ও জেতে */
}
🔷 দ্রুত রেফারেন্স — Specificity সব নিয়ম এক জায়গায়
| Selector | Specificity (A,B,C) | পয়েন্ট (আনুমানিক) |
|---|---|---|
style="" (inline) |
(1,0,0,0) | সবচেয়ে বেশি |
#id |
(0,1,0,0) | ১০০ |
.class |
(0,0,1,0) | ১০ |
[attr] |
(0,0,1,0) | ১০ |
:hover, :focus |
(0,0,1,0) | ১০ |
p, div |
(0,0,0,1) | ১ |
::before, ::after |
(0,0,0,1) | ১ |
* |
(0,0,0,0) | ০ |
:where() |
(0,0,0,0) | ০ ✅ |
!important |
সব override | সবচেয়ে বেশি |
Cascade সিদ্ধান্তের ক্রম — মনে রাখার উপায় মনে রাখো
| ক্রম | নিয়ম | মনে রাখার সূত্র |
|---|---|---|
| ১ | !important | জরুরি অবস্থা — সব উপেক্ষা |
| ২ | @layer ক্রম | পরের layer জেতে |
| ৩ | Specificity | ID > Class > Element |
| ৪ | Source Order | পরে লেখা জেতে |
| ৫ | Inheritance | Parent → Child (Typography) |
| ৬ | Browser Default | সবার শেষে |
✅ Specificity-র সেরা অভ্যাস:
CSS-এ ID Selector এড়িয়ে শুধু Class ব্যবহার করো + Selector-এ অপ্রয়োজনীয় nesting কমাও + !important এড়িয়ে চলো — প্রয়োজন হলে কাঠামো পর্যালোচনা করো + Specificity ০ দরকার হলে
CSS-এ ID Selector এড়িয়ে শুধু Class ব্যবহার করো + Selector-এ অপ্রয়োজনীয় nesting কমাও + !important এড়িয়ে চলো — প্রয়োজন হলে কাঠামো পর্যালোচনা করো + Specificity ০ দরকার হলে
:where() ব্যবহার করো +
বড় প্রজেক্টে @layer ব্যবহার করে CSS সাজাও।
✨ CSS Pseudo-Elements — সম্পূর্ণ নোট
এই সেকশনে CSS Pseudo-Elements-এর সব বিষয় — ::before, ::after, ::first-line, ::first-letter, ::placeholder, ::selection, ::marker এবং বাস্তব ব্যবহার বিস্তারিত বোঝানো হয়েছে।
🔷 CSS Pseudo-Element কী?
Pseudo-Element হলো CSS দিয়ে তৈরি কাল্পনিক উপাদান।
HTML-এ কোনো ট্যাগ না লিখেও CSS দিয়ে নতুন কন্টেন্ট বা স্টাইল যোগ করা যায়।
:: দিয়ে লেখা হয় — Pseudo-class (:hover)-এর একটি কোলন থেকে আলাদা।
সব Pseudo-Element — এক নজরে Overview
| Pseudo-Element | কাজ | content লাগে? | কখন ব্যবহার |
|---|---|---|---|
::before |
এলিমেন্টের আগে কন্টেন্ট | হ্যাঁ ✅ | Icon, Decoration, Counter |
::after |
এলিমেন্টের পরে কন্টেন্ট | হ্যাঁ ✅ | Tooltip arrow, Clearfix |
::first-line |
প্যারাগ্রাফের প্রথম লাইন | না | Magazine style |
::first-letter |
প্যারাগ্রাফের প্রথম অক্ষর | না | Drop cap |
::placeholder |
Input-এর placeholder লেখা | না | Placeholder স্টাইল |
::selection |
ব্যবহারকারী select করা লেখা | না | Custom highlight রঙ |
::marker |
List item-এর বুলেট/নম্বর | না | List marker স্টাইল |
::backdrop |
dialog এর পেছনের পর্দা | না | Dialog backdrop স্টাইল |
::file-selector-button |
File input-এর button | না | File button স্টাইল |
🔷 ১. ::before ও ::after — কন্টেন্ট যোগ করা
মূল নিয়ম — content অবশ্যই দাও নিয়ম
/* ::before ও ::after-এর মূল গঠন */
.element::before {
content: ""; /* অবশ্যই দিতে হবে — খালি হলেও "" দাও ✅ */
display: block; /* ডিফল্ট inline */
}
.element::after {
content: "→"; /* লেখা দেওয়া যায় */
}
/* content-এর ধরন */
.el::before { content: ""; } /* খালি — Decoration-এর জন্য */
.el::before { content: "⭐"; } /* emoji বা text */
.el::before { content: attr(data-label); } /* HTML attribute-এর মান */
.el::before { content: counter(section); } /* CSS counter */
.el::before { content: url("icon.svg"); } /* ছবি */
.el::before { content: none; } /* সরিয়ে দাও */
Decoration — সজ্জামূলক উপাদান Decoration
/* Decorative Line — Heading-এর নিচে */
h2 { position: relative; padding-bottom: 12px; }
h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: #3b82f6;
border-radius: 2px;
}
/* Quote চিহ্ন */
blockquote { position: relative; padding-left: 40px; }
blockquote::before {
content: "\201C"; /* " চিহ্ন */
position: absolute;
left: 0;
top: -10px;
font-size: 4rem;
color: #3b82f6;
line-height: 1;
}
/* Gradient Underline */
.fancy-link { position: relative; text-decoration: none; }
.fancy-link::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0; /* শুরুতে ০ */
height: 2px;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
transition: width 0.3s ease;
}
.fancy-link:hover::after { width: 100%; } /* hover-এ বাড়ে */
/* Ribbon / Badge */
.card { position: relative; overflow: hidden; }
.card::before {
content: "New";
position: absolute;
top: 14px;
right: -28px;
background-color: #ef4444;
color: white;
padding: 4px 36px;
font-size: 0.75rem;
font-weight: 700;
transform: rotate(45deg);
}
Overlay ও Background Effect Overlay
/* Image Overlay — ::after দিয়ে */
.hero-image {
position: relative;
overflow: hidden;
}
.hero-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}
/* Hover Overlay */
.card { position: relative; overflow: hidden; }
.card::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(59,130,246,0.15);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
.card:hover::before { opacity: 1; }
/* Background Pattern */
.section { position: relative; }
.section::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.5;
z-index: -1;
}
Counter — স্বয়ংক্রিয় নম্বর Counter
/* CSS Counter — স্বয়ংক্রিয় নম্বর */
.steps { counter-reset: step; } /* counter শুরু */
.step {
counter-increment: step; /* প্রতিটিতে বাড়ে */
position: relative;
padding-left: 48px;
margin-bottom: 24px;
}
.step::before {
content: counter(step); /* নম্বর দেখায় */
position: absolute;
left: 0;
width: 32px; height: 32px;
background-color: #3b82f6;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.875rem;
}
/* Nested Counter */
ol { counter-reset: item; list-style: none; }
li { counter-increment: item; }
li::before {
content: counters(item, ".") ". "; /* 1.1, 1.2, 2.1... */
font-weight: 700;
color: #3b82f6;
}
Tooltip Arrow — ::before দিয়ে তীর Arrow
/* CSS দিয়ে তীর বানানো — border কৌশল */
.tooltip {
position: relative;
background-color: #1e293b;
color: white;
padding: 8px 12px;
border-radius: 6px;
}
/* নিচের দিকে তীর */
.tooltip::after {
content: "";
position: absolute;
top: 100%; /* tooltip-এর ঠিক নিচে */
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #1e293b; /* শুধু উপরের border রঙ দেওয়া */
}
/* ডানের দিকে তীর */
.tooltip-right::after {
content: "";
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
border: 6px solid transparent;
border-left-color: #1e293b;
}
🔷 ২. ::first-line ও ::first-letter — টাইপোগ্রাফি
::first-line — প্রথম লাইন ::first-line
/* ::first-line — প্রথম লাইনে বিশেষ স্টাইল */
p::first-line {
font-weight: 700;
color: #1e293b;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ম্যাগাজিন স্টাইল */
.article p:first-of-type::first-line {
font-size: 1.125rem;
font-weight: 600;
color: #1d4ed8;
}
::first-letter — প্রথম অক্ষর (Drop Cap) ::first-letter
/* Drop Cap — বইয়ের মতো বড় প্রথম অক্ষর */
.article p:first-of-type::first-letter {
float: left;
font-size: 4.5rem;
font-weight: 700;
line-height: 0.8;
margin-right: 8px;
color: #3b82f6;
font-family: Georgia, serif;
}
/* সজ্জামূলক Drop Cap */
p::first-letter {
float: left;
font-size: 3rem;
font-weight: 900;
padding: 4px 8px;
margin-right: 8px;
background-color: #3b82f6;
color: white;
border-radius: 4px;
line-height: 1;
}
🔷 ৩. ::placeholder, ::selection, ::marker, ::backdrop
::placeholder — Input Placeholder স্টাইল ::placeholder
/* ::placeholder — Input placeholder-এর স্টাইল */
input::placeholder,
textarea::placeholder {
color: #94a3b8;
font-style: italic;
font-size: 0.875rem;
}
/* Focus-এ placeholder লুকানো */
input:focus::placeholder { opacity: 0; transition: opacity 0.2s; }
/* রঙিন placeholder */
.search-input::placeholder { color: #3b82f6; opacity: 0.7; }
::selection — লেখা select করার স্টাইল ::selection
/* ::selection — custom highlight রঙ */
::selection {
background-color: #3b82f6;
color: white;
}
/* নির্দিষ্ট এলিমেন্টে আলাদা selection রঙ */
.code-block::selection {
background-color: #fbbf24;
color: #1e293b;
}
.danger-text::selection { background-color: #ef4444; color: white; }
::marker — List Bullet/Number স্টাইল ::marker
/* ::marker — List bullet/number স্টাইল */
li::marker {
color: #3b82f6;
font-weight: 700;
}
ol li::marker {
color: #8b5cf6;
font-size: 1.125rem;
}
/* Custom marker content */
li::marker { content: "→ "; }
li.done::marker { content: "✅ "; }
li.pending::marker { content: "⏳ "; }
::backdrop ও ::file-selector-button অন্যান্য
/* ::backdrop — dialog এর পেছনের overlay */
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
/* ::file-selector-button — file input-এর button */
input[type="file"]::file-selector-button {
padding: 8px 16px;
background-color: #3b82f6;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
margin-right: 12px;
font-size: 0.875rem;
}
input[type="file"]::file-selector-button:hover {
background-color: #2563eb;
}
🔷 দ্রুত রেফারেন্স — Pseudo-Element সব Pattern
| ব্যবহার | Pseudo-Element | বাধ্যতামূলক |
|---|---|---|
| Heading-এর নিচে রঙিন লাইন | h2::after |
content: "" + position: absolute |
| Icon বা Emoji আগে | .item::before { content: "✓" } |
content অবশ্যই |
| Image Overlay | .wrap::after |
parent: position: relative |
| Hover Underline Animation | a::after { width:0 → 100% } |
transition |
| Tooltip Arrow | .tooltip::after |
border কৌশল |
| Drop Cap | p::first-letter |
float: left |
| Custom Placeholder | input::placeholder |
— |
| Custom Selection রঙ | ::selection |
— |
| List Bullet রঙ | li::marker |
— |
| স্বয়ংক্রিয় নম্বর | ::before { content: counter() } |
counter-reset + counter-increment |
✅ Pseudo-Element-এর সোনালি নিয়ম:
::before ও ::after-এ content অবশ্যই দাও +
Decoration-এর জন্য content: "" দাও +
absolute করতে parent-এ position: relative দাও +
Screen Reader-এ গুরুত্বপূর্ণ কন্টেন্ট pseudo-element-এ রেখো না।
📋 CSS Lists — সম্পূর্ণ নোট
এই সেকশনে CSS List-এর সব বিষয় — list-style-type, list-style-image, list-style-position, Shorthand, Custom List ডিজাইন এবং বাস্তব ব্যবহার বোঝানো হয়েছে।
🔷 CSS List Property — এক নজরে
CSS দিয়ে HTML List-এর বুলেট বা নম্বরের ধরন, অবস্থান ও ছবি নিয়ন্ত্রণ করা হয়। Navigation, Card feature list, Custom checklist — সবখানেই list ব্যবহার হয়।
| Property | কাজ | ডিফল্ট |
|---|---|---|
list-style-type |
বুলেট বা নম্বরের ধরন | disc (ul), decimal (ol) |
list-style-image |
বুলেটের বদলে ছবি | none |
list-style-position |
বুলেট ভেতরে না বাইরে | outside |
list-style |
Shorthand — তিনটি একসাথে | — |
🔷 ১. list-style-type — বুলেটের ধরন
ul-এর ধরন ul
/* ul — Unordered List */
ul { list-style-type: disc; } /* ● ভরা বৃত্ত — ডিফল্ট */
ul { list-style-type: circle; } /* ○ ফাঁকা বৃত্ত */
ul { list-style-type: square; } /* ■ বর্গ */
ul { list-style-type: none; } /* কোনো বুলেট নেই — Navigation-এ ✅ */
/* আধুনিক CSS — String দেওয়া যায় */
ul { list-style-type: "→ "; } /* কাস্টম লেখা */
ul { list-style-type: "✓ "; } /* টিক চিহ্ন */
ul { list-style-type: "⭐ "; } /* emoji */
ol-এর ধরন ol
/* ol — Ordered List */
ol { list-style-type: decimal; } /* 1, 2, 3 — ডিফল্ট */
ol { list-style-type: decimal-leading-zero; } /* 01, 02, 03 */
ol { list-style-type: lower-alpha; } /* a, b, c */
ol { list-style-type: upper-alpha; } /* A, B, C */
ol { list-style-type: lower-roman; } /* i, ii, iii */
ol { list-style-type: upper-roman; } /* I, II, III */
ol { list-style-type: lower-greek; } /* α, β, γ */
ol { list-style-type: bengali; } /* বাংলা — ১, ২, ৩ */
/* ol counter পরিবর্তন */
ol { start: 5; } /* ৫ থেকে শুরু — HTML attribute */
li { value: 10; } /* নির্দিষ্ট li-তে মান — HTML attribute */
🔷 ২. list-style-position ও list-style-image
list-style-position — বুলেটের অবস্থান position
/* outside — ডিফল্ট: বুলেট বাইরে */
ul { list-style-position: outside; }
/* বুলেট content এলাকার বাইরে থাকে
দ্বিতীয় লাইন প্রথম লাইনের লেখার নিচে আসে */
/* inside — বুলেট ভেতরে */
ul { list-style-position: inside; }
/* বুলেট content এলাকার ভেতরে আসে
লেখা wrap করলে বুলেটের নিচে চলে আসে — সাধারণত কম সুন্দর */
/* inside ব্যবহার: centered list */
.centered-list {
list-style-position: inside;
text-align: center;
}
list-style-image — বুলেটে ছবি image
/* list-style-image — বুলেটে ছবি */
ul { list-style-image: url("checkmark.svg"); }
/* সমস্যা: আকার নিয়ন্ত্রণ নেই।
সমাধান: list-style: none + ::before দিয়ে কাস্টম বুলেট ✅ */
ul { list-style: none; padding: 0; }
li::before {
content: url("checkmark.svg");
margin-right: 8px;
vertical-align: middle;
}
list-style Shorthand Shorthand
/* list-style: type position image */
ul { list-style: disc outside none; } /* ডিফল্ট */
ul { list-style: none; } /* বুলেট সরানো — সবচেয়ে বেশি ✅ */
ol { list-style: upper-roman inside; }
ul { list-style: square inside url("dot.png"); }
🔷 ৩. List Reset ও Custom List Design
List Reset — ডিফল্ট স্টাইল সরানো Reset
/* List Reset — ডিফল্ট স্টাইল সরানো */
ul, ol {
list-style: none;
padding: 0;
margin: 0;
}
/* শুধু Navigation-এ */
.nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 8px;
}
Custom Checklist Checklist
/* Custom Checklist */
.checklist {
list-style: none;
padding: 0;
}
.checklist li {
position: relative;
padding-left: 32px;
margin-bottom: 12px;
color: #374151;
}
.checklist li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
width: 20px; height: 20px;
background-color: #22c55e;
color: white;
border-radius: 50%;
font-size: 0.75rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* Pending item */
.checklist li.pending::before {
content: "○";
background-color: #e2e8f0;
color: #94a3b8;
}
Numbered List — Custom Style Numbered
/* Custom Numbered List — CSS Counter দিয়ে */
.steps {
list-style: none;
padding: 0;
counter-reset: step-counter;
}
.steps li {
counter-increment: step-counter;
display: flex;
gap: 16px;
align-items: flex-start;
margin-bottom: 24px;
}
.steps li::before {
content: counter(step-counter);
flex-shrink: 0;
width: 36px; height: 36px;
background-color: #3b82f6;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.875rem;
}
/* Horizontal Step Indicator */
.step-bar {
list-style: none;
display: flex;
justify-content: space-between;
padding: 0;
counter-reset: step;
position: relative;
}
/* Step-এর মাঝে Connector Line */
.step-bar::before {
content: "";
position: absolute;
top: 18px;
left: 0; right: 0;
height: 2px;
background-color: #e2e8f0;
z-index: 0;
}
Navigation List Navigation
/* Horizontal Navigation */
.nav {
list-style: none;
padding: 0; margin: 0;
display: flex;
gap: 4px;
align-items: center;
}
.nav li a {
display: block;
padding: 8px 16px;
border-radius: 6px;
text-decoration: none;
color: #374151;
font-weight: 500;
transition: background-color 0.2s;
}
.nav li a:hover { background-color: #f1f5f9; }
.nav li a.active { background-color: #3b82f6; color: white; }
/* Vertical Sidebar Navigation */
.sidebar-nav {
list-style: none;
padding: 0;
}
.sidebar-nav li a {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
border-radius: 8px;
text-decoration: none;
color: #374151;
}
.sidebar-nav li a:hover { background-color: #f1f5f9; }
/* Breadcrumb */
.breadcrumb {
list-style: none;
padding: 0;
display: flex;
gap: 8px;
align-items: center;
}
.breadcrumb li + li::before {
content: "/";
color: #94a3b8;
margin-right: 8px;
}
🔷 দ্রুত রেফারেন্স — Lists সব Property
| Property | কাজ | সাধারণ মান | ডিফল্ট |
|---|---|---|---|
list-style-type |
বুলেট ধরন | none, disc, decimal |
disc/decimal |
list-style-position |
বুলেট অবস্থান | outside, inside |
outside |
list-style-image |
বুলেটে ছবি | url(), none |
none |
list-style |
Shorthand | none, disc outside |
— |
✅ List-এর সেরা অভ্যাস:
Navigation-এ
Navigation-এ
list-style: none; padding: 0; margin: 0; দাও +
Custom বুলেটে list-style: none + ::before ব্যবহার করো +
নম্বরযুক্ত Custom List-এ CSS Counter ব্যবহার করো +
Accessibility-র জন্য role="list" রাখো যদি list-style: none দাও।
📊 CSS Tables — সম্পূর্ণ নোট
এই সেকশনে CSS Table-এর সব বিষয় — border-collapse, border-spacing, caption-side, empty-cells, table-layout, Responsive Table এবং সুন্দর Table ডিজাইন বোঝানো হয়েছে।
🔷 CSS Table Property — এক নজরে
HTML <table>-এর ডিফল্ট স্টাইল দেখতে ভালো না।
CSS দিয়ে পেশাদার ও ব্যবহারযোগ্য Table তৈরি করা হয়।
| Property | কাজ | ডিফল্ট |
|---|---|---|
border-collapse |
Cell-এর border মেলানো বা আলাদা | separate |
border-spacing |
Cell-এর মাঝে ফাঁক (separate-এ) | 0 |
caption-side |
Table caption কোথায় থাকবে | top |
empty-cells |
খালি cell দেখাবে কিনা | show |
table-layout |
Column-এর প্রস্থ হিসেব পদ্ধতি | auto |
vertical-align |
Cell কন্টেন্টের উল্লম্ব অবস্থান | middle |
🔷 ১. border-collapse ও border-spacing
border-collapse — সবচেয়ে গুরুত্বপূর্ণ border-collapse
/* border-collapse — সবচেয়ে গুরুত্বপূর্ণ Table Property */
/* separate — ডিফল্ট: প্রতিটি cell-এর আলাদা border */
table { border-collapse: separate; } /* দেখতে double border */
/* collapse — পাশের cell-এর border একটিতে মিলে যায় ✅ */
table { border-collapse: collapse; } /* সুন্দর একক রেখা */
/* ব্যবহার */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #e2e8f0;
padding: 12px 16px;
}
border-spacing — Cell-এর মাঝে ফাঁক border-spacing
/* border-spacing — শুধু separate-এ কাজ করে */
table {
border-collapse: separate; /* collapse-এ কাজ করবে না */
border-spacing: 8px; /* চারদিকে ৮px ফাঁক */
}
table { border-spacing: 8px 4px; } /* অনুভূমিক ৮px, উল্লম্ব ৪px */
🔷 ২. table-layout, caption-side, empty-cells
table-layout — Column প্রস্থ table-layout
/* table-layout */
/* auto — ডিফল্ট: কন্টেন্ট দেখে Column প্রস্থ ঠিক করে (ধীর) */
table { table-layout: auto; }
/* fixed — দ্রুত rendering, Column সমান হয় ✅ */
table {
table-layout: fixed;
width: 100%;
}
/* Column-এর নির্দিষ্ট প্রস্থ দেওয়া */
col:nth-child(1) { width: 40%; }
col:nth-child(2) { width: 30%; }
col:nth-child(3) { width: 30%; }
/* fixed-এ লম্বা লেখা কাটানো */
table { table-layout: fixed; width: 100%; }
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
caption-side ও empty-cells অন্যান্য
/* caption-side — Table-এর caption কোথায় */
caption { caption-side: top; } /* উপরে — ডিফল্ট */
caption { caption-side: bottom; } /* নিচে */
/* empty-cells — খালি cell */
table { empty-cells: show; } /* খালি cell-এর border দেখাবে — ডিফল্ট */
table { empty-cells: hide; } /* খালি cell-এর border লুকাবে */
/* vertical-align — cell কন্টেন্টের উল্লম্ব অবস্থান */
td { vertical-align: top; } /* উপরে */
td { vertical-align: middle; } /* মাঝে — ডিফল্ট */
td { vertical-align: bottom; } /* নিচে */
🔷 ৩. সুন্দর Table Design — বাস্তব উদাহরণ
Clean Modern Table Modern
/* Clean Modern Table */
.table-wrapper {
width: 100%;
overflow-x: auto; /* Responsive scroll ✅ */
border-radius: 12px;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
/* Header */
thead {
background-color: #f8fafc;
border-bottom: 2px solid #e2e8f0;
}
thead th {
padding: 12px 16px;
text-align: left;
font-weight: 600;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.75rem;
white-space: nowrap; /* Header লেখা ভাঙবে না */
/* Sticky Header */
position: sticky;
top: 0;
background-color: #f8fafc;
z-index: 1;
}
/* Body */
tbody td {
padding: 14px 16px;
color: #374151;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
}
/* Zebra Striping */
tbody tr:nth-child(even) {
background-color: #f8fafc;
}
/* Hover Highlight */
tbody tr:hover {
background-color: #eff6ff;
}
/* Last row-এর border সরানো */
tbody tr:last-child td { border-bottom: none; }
/* Footer */
tfoot td {
padding: 12px 16px;
font-weight: 600;
background-color: #f8fafc;
border-top: 2px solid #e2e8f0;
}
Sortable Column Header Sortable
/* Sortable Column — Sort indicator */
th.sortable {
cursor: pointer;
user-select: none;
position: relative;
padding-right: 32px; /* icon-এর জায়গা */
}
th.sortable::after {
content: "↕";
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-size: 0.875rem;
}
th.sort-asc::after { content: "↑"; color: #3b82f6; }
th.sort-desc::after { content: "↓"; color: #3b82f6; }
th.sortable:hover { background-color: #f1f5f9; }
Status Badge ও Action Column Status
/* Status Badge in Table */
.status-badge {
display: inline-block;
padding: 2px 10px;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
}
.status-active { background-color: #dcfce7; color: #166534; }
.status-pending { background-color: #fef9c3; color: #854d0e; }
.status-inactive{ background-color: #fee2e2; color: #991b1b; }
/* Action Column — ডানে রাখা */
.action-col { text-align: right; white-space: nowrap; }
.action-col button {
padding: 4px 12px;
border-radius: 6px;
font-size: 0.8rem;
margin-left: 4px;
}
Responsive Table — মোবাইলে scroll Responsive
/* সমাধান ১: Horizontal Scroll — সবচেয়ে সহজ ✅ */
.table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* মোবাইলে smooth scroll */
}
/* সমাধান ২: মোবাইলে কম গুরুত্বপূর্ণ Column লুকানো */
@media (max-width: 640px) {
.hide-mobile { display: none; }
}
/* সমাধান ৩: মোবাইলে Card View */
@media (max-width: 640px) {
table, thead, tbody, tr, th, td { display: block; }
thead tr { display: none; } /* Header লুকানো */
tbody tr {
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 12px;
padding: 12px;
}
tbody td {
border: none;
padding: 6px 0;
display: flex;
justify-content: space-between;
}
/* data-label attribute থেকে column নাম দেখানো */
tbody td::before {
content: attr(data-label);
font-weight: 600;
color: #475569;
margin-right: 12px;
}
}
🔷 দ্রুত রেফারেন্স — Tables সব Property
| Property | কাজ | সাধারণ মান | ডিফল্ট |
|---|---|---|---|
border-collapse |
Border মেলানো | collapse, separate |
separate |
border-spacing |
Cell ফাঁক | 0, 8px |
0 |
table-layout |
Column প্রস্থ নিয়ম | fixed, auto |
auto |
caption-side |
Caption অবস্থান | top, bottom |
top |
empty-cells |
খালি cell | show, hide |
show |
vertical-align |
Cell-এ উল্লম্ব | top, middle, bottom |
middle |
✅ Table-এর সেরা অভ্যাস:
সবসময়
সবসময়
border-collapse: collapse দাও +
Responsive-এর জন্য .table-wrapper { overflow-x: auto } দাও +
table-layout: fixed + width: 100% দিলে সমান Column +
Zebra striping: tr:nth-child(even) +
Hover: tbody tr:hover।
🖼️ CSS Images ও Filters — সম্পূর্ণ নোট
এই সেকশনে CSS Images-এর সব বিষয় — object-fit, object-position, Responsive Image, CSS Filter (blur, brightness, contrast, grayscale, drop-shadow) এবং backdrop-filter বোঝানো হয়েছে।
🔷 ১. object-fit — ছবি কীভাবে ফিট হবে
object-fit নির্ধারণ করে <img> বা <video>
নির্ধারিত container-এ কীভাবে ফিট হবে।
Background-image-এর background-size-এর মতো কাজ করে।
| মান | অনুপাত | কাটে? | খালি জায়গা? | কখন |
|---|---|---|---|---|
fill |
নষ্ট হয় ❌ | না | না | এড়িয়ে চলো |
contain |
ঠিক থাকে ✅ | না | হ্যাঁ | Logo, Icon |
cover |
ঠিক থাকে ✅ | হ্যাঁ | না | Hero, Card Image ✅ |
none |
ঠিক থাকে ✅ | হতে পারে | হতে পারে | আসল আকারে |
scale-down |
ঠিক থাকে ✅ | না | হ্যাঁ | ছোট ছবিতে |
/* object-fit ব্যবহার */
/* cover — Card Image, Hero-তে সবচেয়ে বেশি ✅ */
.card-image {
width: 100%;
height: 200px;
object-fit: cover; /* অনুপাত ঠিক, সম্পূর্ণ ঢাকে */
}
/* contain — Logo, Product Image-এ */
.logo {
width: 120px;
height: 80px;
object-fit: contain; /* সম্পূর্ণ দেখায়, খালি জায়গা থাকে */
}
/* Avatar — সমান অনুপাতে গোল ছবি */
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover; /* গোল frame-এ ভরাট ✅ */
}
/* scale-down — ছোট ছবি না বড় না */
.thumbnail {
width: 200px;
height: 150px;
object-fit: scale-down; /* ছবি ছোট হলে বড় করে না */
}
🔷 ২. object-position — ছবির ফোকাস পয়েন্ট
object-position নির্ধারণ করে object-fit: cover-এ
ছবির কোন অংশটি দেখা যাবে — ছবির ফোকাস পয়েন্ট।
/* object-position — ফোকাস পয়েন্ট */
img { object-fit: cover; }
img { object-position: center; } /* মাঝখান — ডিফল্ট */
img { object-position: top; } /* উপর থেকে — মানুষের মুখ */
img { object-position: bottom; } /* নিচ থেকে */
img { object-position: left center; } /* বামে মাঝে */
img { object-position: right top; } /* ডানে উপরে */
/* px বা % দিয়ে */
img { object-position: 20% 30%; }
img { object-position: 100px 50px; }
/* মুখের ছবিতে — উপর থেকে দেখানো */
.profile-card img {
width: 100%;
height: 250px;
object-fit: cover;
object-position: top center; /* মুখ দেখা যাবে ✅ */
}
🔷 ৩. Responsive Image — সব স্ক্রিনে সঠিক
/* Responsive Image — সবচেয়ে গুরুত্বপূর্ণ নিয়ম ✅ */
img {
max-width: 100%; /* কখনো parent-এর বাইরে যাবে না */
height: auto; /* অনুপাত ঠিক রাখে */
display: block; /* inline gap সরানো */
}
/* Responsive Image Container */
.img-container {
width: 100%;
aspect-ratio: 16 / 9; /* অনুপাত নিশ্চিত */
overflow: hidden;
border-radius: 12px;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Responsive Hero Image */
.hero-img {
width: 100%;
height: clamp(300px, 50vw, 600px); /* Fluid উচ্চতা */
object-fit: cover;
object-position: center;
}
/* Picture Element — বিভিন্ন স্ক্রিনে বিভিন্ন ছবি */
/* HTML: picture element — আলাদা ছবি */
/*
<picture>
<source media="(max-width: 640px)" srcset="img-mobile.jpg">
<source media="(max-width: 1024px)" srcset="img-tablet.jpg">
<img src="img-desktop.jpg" alt="..." loading="lazy">
</picture>
*/
/* Performance — Lazy Loading */
img { loading: lazy; } /* viewport-এ আসলে লোড হবে */
img { decoding: async; } /* async decode — performance */
/* Image Card */
.card-img-wrap {
position: relative;
overflow: hidden; /* zoom effect-এর জন্য */
}
.card-img-wrap img {
width: 100%;
height: 220px;
object-fit: cover;
transition: transform 0.4s ease;
}
.card:hover .card-img-wrap img {
transform: scale(1.05); /* hover-এ zoom in ✅ */
}
🔷 ৪. CSS filter — ছবিতে ভিজ্যুয়াল ইফেক্ট
filter Property দিয়ে ছবি বা যেকোনো HTML এলিমেন্টে
ভিজ্যুয়াল ইফেক্ট প্রয়োগ করা হয়। Photoshop-এর মতো ইফেক্ট
শুধু CSS-এ সম্ভব।
| Filter | কাজ | মান (0 = স্বাভাবিক) | উদাহরণ |
|---|---|---|---|
blur() |
ঝাপসা করা | px (0 = স্পষ্ট) | blur(4px) |
brightness() |
উজ্জ্বলতা | 0–2+ (1 = স্বাভাবিক) | brightness(1.2) |
contrast() |
বৈসাদৃশ্য | 0–2+ (1 = স্বাভাবিক) | contrast(1.3) |
grayscale() |
ধূসর করা | 0–1 বা 0%–100% | grayscale(100%) |
sepia() |
পুরনো ছবির রঙ | 0–1 | sepia(0.8) |
hue-rotate() |
রঙ ঘোরানো | 0–360deg | hue-rotate(180deg) |
invert() |
রঙ উল্টানো | 0–1 | invert(1) |
opacity() |
স্বচ্ছতা | 0–1 | opacity(0.5) |
saturate() |
রঙের তীব্রতা | 0–∞ (1 = স্বাভাবিক) | saturate(1.5) |
drop-shadow() |
আকৃতি অনুযায়ী ছায়া | offset blur color | drop-shadow(0 4px 8px rgba(0,0,0,0.3)) |
/* CSS filter — বিভিন্ন ইফেক্ট */
/* blur — ঝাপসা */
.blurred { filter: blur(4px); }
.very-blur { filter: blur(12px); }
/* brightness — উজ্জ্বলতা */
.dim { filter: brightness(0.7); } /* গাঢ় */
.bright { filter: brightness(1.3); } /* উজ্জ্বল */
/* contrast */
.high-contrast { filter: contrast(1.5); }
/* grayscale — ধূসর */
.gray { filter: grayscale(100%); } /* সম্পূর্ণ ধূসর */
.half-gray { filter: grayscale(50%); }
/* sepia — পুরনো ছবির ভাব */
.vintage { filter: sepia(0.8); }
/* hue-rotate — রঙ পরিবর্তন */
.hue-shift { filter: hue-rotate(90deg); }
/* invert — Dark Mode ছবি */
.inverted { filter: invert(1); }
/* saturate — রঙ তীব্রতা */
.vivid { filter: saturate(1.8); } /* প্রাণবন্ত */
.desaturate{ filter: saturate(0.3); } /* ম্লান */
/* drop-shadow — আকৃতি অনুসরণ করে ✅ */
.icon-shadow {
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
/* box-shadow থেকে আলাদা: এটি PNG-র transparent এলাকা বাদ দিয়ে ছায়া দেয় */
}
/* একাধিক filter — স্পেস দিয়ে */
.instagram-filter {
filter: brightness(1.1) contrast(1.1) saturate(1.3) sepia(0.1);
}
.noir {
filter: grayscale(100%) contrast(1.3) brightness(0.9);
}
Hover ও Transition-এ filter Hover
/* Hover-এ filter পরিবর্তন */
/* Grayscale → Color on hover */
.team-photo {
filter: grayscale(100%);
transition: filter 0.4s ease;
}
.team-photo:hover { filter: grayscale(0%); }
/* Dim on hover */
.gallery-img {
transition: filter 0.3s ease;
}
.gallery-img:hover { filter: brightness(0.7); }
/* Blur Loading State */
.loading { filter: blur(8px); transition: filter 0.5s ease; }
.loaded { filter: blur(0); }
/* Button Hover Glow */
.glow-btn {
filter: drop-shadow(0 0 0px #3b82f6);
transition: filter 0.3s ease;
}
.glow-btn:hover {
filter: drop-shadow(0 0 12px rgba(59,130,246,0.7));
}
/* Dark Mode ছবি invert */
@media (prefers-color-scheme: dark) {
.diagram-img { filter: invert(1) hue-rotate(180deg); }
}
drop-shadow বনাম box-shadow তুলনা
| বিষয় | filter: drop-shadow() |
box-shadow |
|---|---|---|
| আকৃতি | element-এর আসল আকৃতি অনুসরণ ✅ | সবসময় আয়তক্ষেত্র |
| PNG transparent | স্বচ্ছ অংশে ছায়া নেই ✅ | পুরো box-এ ছায়া |
| spread | নেই | আছে ✅ |
| inset | নেই | আছে ✅ |
| SVG/Icon | সেরা ✅ | ঠিক নয় |
| Transition | সমর্থিত ✅ | সমর্থিত ✅ |
🔷 ৫. backdrop-filter — পেছনে ব্লার ইফেক্ট
backdrop-filter এলিমেন্টের পেছনের কন্টেন্টে filter প্রয়োগ করে।
filter থেকে আলাদা — নিজের উপর না, পেছনের উপর।
Glassmorphism UI তৈরির মূল হাতিয়ার।
/* backdrop-filter — পেছনে ব্লার */
/* কাজ করতে background স্বচ্ছ থাকতে হবে */
.glass {
background-color: rgba(255, 255, 255, 0.15); /* আধা-স্বচ্ছ */
backdrop-filter: blur(12px); /* পেছনে blur */
-webkit-backdrop-filter: blur(12px); /* Safari-এর জন্য */
}
/* Glassmorphism Card */
.glass-card {
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px) saturate(1.5);
-webkit-backdrop-filter: blur(16px) saturate(1.5);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
box-shadow:
0 8px 32px rgba(0,0,0,0.15),
inset 0 1px 0 rgba(255,255,255,0.3);
color: white;
padding: 24px;
}
/* Frosted Glass Navbar */
.frosted-nav {
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255,255,255,0.3);
}
/* Dark Glass */
.dark-glass {
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px) brightness(0.8);
-webkit-backdrop-filter: blur(10px) brightness(0.8);
}
/* Modal Overlay-এ blur */
.modal-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
✅ backdrop-filter ব্যবহারের নিয়ম:
backdrop-filter কাজ করতে এলিমেন্টের background-color
আধা-স্বচ্ছ বা স্বচ্ছ হতে হবে — সম্পূর্ণ opaque হলে পেছন দেখা যায় না,
তাই blur দেখা যাবে না। সবসময় -webkit-backdrop-filter দাও Safari-এর জন্য।
🔷 ৬. mix-blend-mode — Layer মেশানো
mix-blend-mode দিয়ে এলিমেন্ট তার নিচের কন্টেন্টের সাথে
কীভাবে মিশবে তা নির্ধারণ করা হয় — Photoshop Blend Mode-এর মতো।
/* mix-blend-mode */
.text-overlay { mix-blend-mode: multiply; } /* সাদা = স্বচ্ছ, রঙ মেশে */
.text-overlay { mix-blend-mode: screen; } /* কালো = স্বচ্ছ, উজ্জ্বল হয় */
.text-overlay { mix-blend-mode: overlay; } /* contrast বাড়ে */
.text-overlay { mix-blend-mode: difference; }/* রঙ উল্টায় */
.text-overlay { mix-blend-mode: luminosity; }/* উজ্জ্বলতা নেয় */
/* বাস্তব উদাহরণ — লেখা ছবির উপর মিশিয়ে দেওয়া */
.hero-text {
color: white;
mix-blend-mode: overlay; /* ছবির রঙের সাথে মেশে */
}
/* Duotone Effect — ছবিকে দুই রঙে */
.duotone-wrap { position: relative; isolation: isolate; }
.duotone-wrap img { display: block; }
.duotone-wrap::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
mix-blend-mode: color; /* ছবিকে দুই রঙে দেখায় */
}
🔷 দ্রুত রেফারেন্স — Images ও Filters
| Property | কাজ | সাধারণ মান | ডিফল্ট |
|---|---|---|---|
object-fit |
ছবির ফিট পদ্ধতি | cover, contain, fill |
fill |
object-position |
ফোকাস পয়েন্ট | center, top, 50% 30% |
50% 50% |
filter: blur() |
ঝাপসা | blur(4px) |
none |
filter: brightness() |
উজ্জ্বলতা | brightness(0.8) |
brightness(1) |
filter: grayscale() |
ধূসর | grayscale(100%) |
grayscale(0) |
filter: drop-shadow() |
আকৃতি ছায়া | drop-shadow(0 4px 8px rgba(0,0,0,0.3)) |
none |
backdrop-filter |
পেছনে blur | blur(12px) |
none |
mix-blend-mode |
Layer মিশানো | multiply, screen, overlay |
normal |
ব্যবহার অনুযায়ী সেরা পদ্ধতি কখন কী
| পরিস্থিতি | CSS |
|---|---|
| Card Image সমান উচ্চতায় | object-fit: cover + height: 200px |
| Avatar গোল ছবি | border-radius: 50% + object-fit: cover |
| Logo সম্পূর্ণ দেখানো | object-fit: contain |
| মুখের ছবিতে ফোকাস | object-position: top center |
| Hover-এ ধূসর → রঙিন | filter: grayscale(100%) → grayscale(0) |
| PNG Icon-এ ছায়া | filter: drop-shadow() |
| Glassmorphism Card | rgba() bg + backdrop-filter: blur() |
| Dark Mode ছবি | filter: invert(1) hue-rotate(180deg) |
| Instagram-style filter | filter: brightness() contrast() saturate() |
✅ Images ও Filters-এর সেরা অভ্যাস:
সবসময়
সবসময়
img { max-width: 100%; height: auto; } দাও +
Card Image-এ object-fit: cover ব্যবহার করো +
PNG Icon-এ filter: drop-shadow() ব্যবহার করো, box-shadow নয় +
Glassmorphism-এ -webkit-backdrop-filter অবশ্যই দাও +
filter transition করা যায় — transition: filter 0.3s দাও।
🌊 CSS Flow Layout — সম্পূর্ণ নোট
এই সেকশনে CSS Normal Flow-এর সব বিষয় — Block Formatting Context, Inline Formatting Context, Block ও Inline এলিমেন্টের আচরণ, BFC তৈরির কারণ এবং বাস্তব ব্যবহার বিস্তারিত বোঝানো হয়েছে।
🔷 Normal Flow কী?
Normal Flow হলো HTML এলিমেন্ট পেজে ডিফল্টভাবে যেভাবে সাজানো হয়।
CSS-এ position, float বা display পরিবর্তন না করলে
প্রতিটি এলিমেন্ট Normal Flow-এ থাকে।
Normal Flow দুটি নিয়মে কাজ করে — Block Formatting Context (BFC): উপর থেকে নিচে সাজানো এবং Inline Formatting Context (IFC): বাম থেকে ডানে একই লাইনে সাজানো।
Flow Layout-এর সারসংক্ষেপ Overview
| ধারণা | আচরণ | উদাহরণ এলিমেন্ট |
|---|---|---|
| Block Element | পূর্ণ প্রস্থ নেয়, নতুন লাইনে শুরু | div, p, h1–h6, ul, section |
| Inline Element | কন্টেন্টের আকার, একই লাইনে | span, a, strong, em, code |
| Inline-Block | Inline + width/height কাজ করে | img, button, input |
| BFC | নিজস্ব Block formatting পরিবেশ | float, overflow, position: absolute |
| IFC | নিজস্ব Inline formatting পরিবেশ | Paragraph-এর ভেতরের লেখা |
🔷 ১. Block Formatting Context (BFC)
BFC কেন গুরুত্বপূর্ণ গুরুত্ব
Block Formatting Context (BFC) হলো Block এলিমেন্টের জন্য একটি স্বাধীন rendering পরিবেশ। BFC-এর ভেতরের এলিমেন্ট নিজেদের মধ্যে সাজানো হয় — বাইরের layout-এ প্রভাব পড়ে না। BFC তিনটি সমস্যার সমাধান করে:
| সমস্যা | BFC সমাধান করে |
|---|---|
| Margin Collapse | BFC-এর সন্তানের Margin বাইরে Collapse হয় না |
| Float ধারণ না করা | BFC parent, float সন্তানকে ঘিরে রাখে |
| Float-এর পাশে সরানো | BFC এলিমেন্ট float-এর নিচে না গিয়ে পাশে থাকে |
BFC তৈরি হওয়ার কারণ কারণ
| CSS Property/মান | BFC তৈরি করে? | পার্শ্বপ্রতিক্রিয়া |
|---|---|---|
display: flow-root |
হ্যাঁ ✅ | কোনো পার্শ্বপ্রতিক্রিয়া নেই — সেরা পদ্ধতি |
overflow: hidden/auto/scroll |
হ্যাঁ ✅ | কন্টেন্ট কেটে যেতে পারে (hidden-এ) |
display: flex বা grid |
হ্যাঁ ✅ | Layout পরিবর্তন হয় |
display: inline-block |
হ্যাঁ ✅ | Inline আচরণ |
float: left/right |
হ্যাঁ ✅ | Flow থেকে বের হয় |
position: absolute/fixed |
হ্যাঁ ✅ | Flow থেকে বের হয় |
contain: layout |
হ্যাঁ ✅ | Performance containment |
/* BFC তৈরির পদ্ধতি */
/* ১. display: flow-root — সবচেয়ে পরিষ্কার ✅ */
.bfc-container { display: flow-root; }
/* ২. overflow: hidden — সাধারণভাবে ব্যবহৃত */
.bfc-container { overflow: hidden; }
/* ৩. overflow: auto — scroll প্রয়োজনে */
.bfc-container { overflow: auto; }
/* ৪. display: flex বা grid — যদি layout পরিবর্তনও দরকার */
.bfc-container { display: flex; flex-direction: column; }
BFC ব্যবহার ১ — Margin Collapse এড়ানো Margin Collapse
/* সমস্যা: Parent ও সন্তানের Margin Collapse */
.parent { margin-top: 20px; background: lightblue; }
.child { margin-top: 40px; }
/* ফলাফল: parent ও child-এর margin একসাথে collapse হয়ে ৪০px হয়
parent-এর উপরে কোনো border/padding নেই বলে child-এর margin বাইরে চলে যায় */
/* সমাধান ১: Parent-এ padding-top দাও */
.parent { padding-top: 1px; }
/* সমাধান ২: Parent-এ border দাও */
.parent { border-top: 1px solid transparent; }
/* সমাধান ৩: BFC তৈরি করো — সেরা ✅ */
.parent { display: flow-root; }
/* এখন child-এর margin parent-এর ভেতরে থাকে */
/* সমস্যা: দুই Block-এর মাঝে Collapse */
.box-1 { margin-bottom: 30px; }
.box-2 { margin-top: 20px; }
/* মাঝে = 30px (50px নয়) — বড়টি জেতে */
/* সমাধান: একটিকে BFC-এর ভেতরে রাখো */
.wrapper { display: flow-root; }
/* wrapper-এর ভেতরে box-2 থাকলে এখন ৫০px */
BFC ব্যবহার ২ — Float সন্তান ধারণ Float Contain
/* সমস্যা: Float সন্তান থাকলে parent-এর উচ্চতা শূন্য */
.parent { background: lightblue; border: 2px solid blue; }
.child { float: left; width: 200px; height: 100px; }
/* parent-এর উচ্চতা = 0 — child float হওয়ায় flow থেকে বের */
/* সমাধান: Parent-এ BFC তৈরি */
.parent { display: flow-root; } /* ✅ উচ্চতা ঠিক হবে */
/* বা */
.parent { overflow: hidden; } /* ✅ সাধারণভাবে ব্যবহৃত */
BFC ব্যবহার ৩ — Float-এর পাশে দুই কলাম Two Column
/* Float + BFC = দুই Column Layout */
/* Sidebar float করা */
.sidebar {
float: left;
width: 200px;
margin-right: 20px;
}
/* Main content BFC করলে Sidebar-এর পাশে থাকে */
.main-content {
display: flow-root; /* BFC — Sidebar-এর পাশে column তৈরি ✅ */
/* overflow: hidden; — এটিও কাজ করে */
}
🔷 ২. Inline Formatting Context (IFC)
Inline Formatting Context (IFC)-এ Inline এলিমেন্ট বাম থেকে ডানে সাজানো হয় — জায়গা না হলে নতুন লাইনে যায়। প্রতিটি লাইনকে বলা হয় Line Box।
Line Box ও line-height Line Box
/* line-height — Line Box-এর উচ্চতা নির্ধারণ */
/* Unitless সংখ্যা — সেরা ✅ */
p { line-height: 1.5; } /* font-size-এর ১.৫ গুণ */
p { line-height: 1.6; } /* পড়ার জন্য সর্বোত্তম */
/* px দিয়ে — নির্দিষ্ট উচ্চতা */
p { line-height: 24px; }
/* % দিয়ে — font-size-এর % */
p { line-height: 150%; }
/* normal — browser ডিফল্ট (~1.2) */
p { line-height: normal; }
/* কখন কী ব্যবহার করবে */
body { line-height: 1.6; } /* Body text — পড়ার জন্য */
h1, h2 { line-height: 1.2; } /* Heading — ঘন */
.btn { line-height: 1; } /* Button — সংকুচিত */
.caption{ line-height: 1.4; } /* Caption */
vertical-align — Inline উল্লম্ব অবস্থান vertical-align
| মান | অবস্থান | কখন |
|---|---|---|
baseline |
Parent-এর baseline-এ — ডিফল্ট | সাধারণ inline |
top |
Line Box-এর উপরে | উপরে রাখতে |
bottom |
Line Box-এর নিচে | নিচে রাখতে |
middle |
x-height-এর মাঝে | Icon + Text মেলাতে |
text-top |
Font-এর উপরে | Superscript |
text-bottom |
Font-এর নিচে | Subscript |
px / % |
Baseline থেকে নির্দিষ্ট | সুনির্দিষ্ট অবস্থান |
/* vertical-align — Inline ও Table Cell-এ */
/* Icon ও লেখা মেলানো */
.icon-text img { vertical-align: middle; }
.icon-text span { vertical-align: middle; }
/* Superscript / Subscript */
sup { vertical-align: super; font-size: 0.75em; }
sub { vertical-align: sub; font-size: 0.75em; }
/* Inline Image-এর নিচের Gap সরানো */
img { display: block; } /* ✅ block করলে gap যায় */
img { vertical-align: bottom; } /* বা bottom দাও */
/* Table Cell-এ */
td { vertical-align: top; } /* Cell কন্টেন্ট উপরে */
td { vertical-align: middle; } /* Cell কন্টেন্ট মাঝে — ডিফল্ট */
white-space — লেখা মোড়ানোর নিয়ম white-space
| মান | Wrap | Space Collapse | Newline রাখে | কখন |
|---|---|---|---|---|
normal |
হ্যাঁ | হ্যাঁ | না | ডিফল্ট |
nowrap |
না | হ্যাঁ | না | Single line label ✅ |
pre |
না | না | হ্যাঁ | Code block |
pre-wrap |
হ্যাঁ | না | হ্যাঁ | Code + wrap |
pre-line |
হ্যাঁ | হ্যাঁ | হ্যাঁ | User input |
/* white-space ব্যবহার */
.tag { white-space: nowrap; } /* Tag লেখা ভাঙবে না ✅ */
.nav-item { white-space: nowrap; } /* Nav link একলাইনে */
pre, code { white-space: pre; } /* Code block */
.chat-msg { white-space: pre-wrap; } /* Chat-এ newline রাখা */
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* লেখা কাটলে ... দেখায় */
}
🔷 ৩. writing-mode ও direction — লেখার দিক
writing-mode writing-mode
/* writing-mode — লেখার প্রবাহ */
.normal { writing-mode: horizontal-tb; } /* বাম→ডান, উপর→নিচ — ডিফল্ট */
.vertical { writing-mode: vertical-rl; } /* উপর→নিচ, ডান→বাম — Japanese */
.sidebar-label { writing-mode: vertical-lr; } /* উপর→নিচ, বাম→ডান */
/* Rotated Tab/Label */
.tab-label {
writing-mode: vertical-rl;
text-orientation: mixed;
padding: 16px 8px;
}
/* Rotated Heading — Sidebar Title */
.section-label {
writing-mode: vertical-rl;
transform: rotate(180deg); /* পড়ার মতো উল্টো করা */
white-space: nowrap;
}
direction ও unicode-bidi direction
/* direction — লেখার দিক */
.ltr { direction: ltr; } /* Left to Right — ডিফল্ট */
.rtl { direction: rtl; } /* Right to Left — আরবি, হিব্রু */
/* HTML lang attribute দিয়ে ভালো */
/* <html lang="ar" dir="rtl"> */
/* unicode-bidi — Mixed direction text */
.mixed {
direction: rtl;
unicode-bidi: embed; /* inline element-এ দিক ঠিক রাখা */
}
/* logical property — direction-aware ✅ */
.box {
margin-inline-start: 20px; /* LTR-এ = margin-left, RTL-এ = margin-right */
padding-inline-end: 16px; /* LTR-এ = padding-right, RTL-এ = padding-left */
}
🔷 ৪. Containing Block — আকারের রেফারেন্স
Containing Block হলো যে এলিমেন্টের উপর ভিত্তি করে কোনো এলিমেন্টের
width, height, % মান এবং top/left
হিসেব হয়।
| Position | Containing Block |
|---|---|
static / relative |
নিকটতম Block Ancestor-এর Content এলাকা |
absolute |
নিকটতম positioned ancestor (padding এলাকা পর্যন্ত) |
fixed |
Viewport (transform থাকলে সেই ancestor) |
sticky |
Scroll Container |
/* Containing Block উদাহরণ */
/* Normal Flow — parent-এর content এলাকা */
.parent { width: 600px; padding: 20px; }
.child { width: 50%; }
/* child.width = 600px-এর ৫০% = 300px
padding এলাকা বাদে শুধু content এলাকা দেখে */
/* Absolute — positioned ancestor */
.box { position: relative; width: 400px; padding: 30px; }
.abs { position: absolute; width: 50%; left: 0; }
/* abs.width = 400px (padding-box) × ৫০% = 200px
absolute-এ containing block = padding-box পর্যন্ত */
/* Fixed — Viewport */
.fixed { position: fixed; width: 80%; }
/* width = viewport width-এর ৮০% */
🔷 ৫. display: flow-root — আধুনিক BFC
display: flow-root শুধুমাত্র BFC তৈরি করে —
অন্য কোনো পার্শ্বপ্রতিক্রিয়া নেই।
overflow: hidden-এর আধুনিক বিকল্প।
/* display: flow-root — পরিষ্কার BFC */
/* Float Clearfix-এর আধুনিক সমাধান */
.container { display: flow-root; } /* Float সন্তান ধারণ করবে ✅ */
/* দুই Column Layout */
.sidebar { float: left; width: 200px; }
.content {
display: flow-root; /* Sidebar-এর পাশে Column তৈরি */
}
/* Margin Collapse ঠেকানো */
.section {
display: flow-root; /* সন্তানের margin বাইরে যাবে না */
}
/* overflow: hidden বনাম display: flow-root */
.old { overflow: hidden; } /* কন্টেন্ট কাটতে পারে ❌ */
.new { display: flow-root; } /* কন্টেন্ট কাটে না ✅ */
✅ display: flow-root কখন ব্যবহার করবে:
Float সন্তান ধারণ করতে, Margin Collapse ঠেকাতে, Float-এর পাশে Column বানাতে —
এই তিনটি ক্ষেত্রে
overflow: hidden-এর পরিবর্তে
display: flow-root ব্যবহার করো।
🔷 দ্রুত রেফারেন্স — Flow Layout সব ধারণা
| ধারণা | কাজ | সমাধান |
|---|---|---|
| BFC তৈরি | Float ধারণ, Margin Collapse ঠেকানো | display: flow-root ✅ |
| Margin Collapse | Block-এর মাঝের Margin যোগ না হওয়া | BFC, padding বা border দাও |
| Float সন্তান ধারণ | Parent-এর উচ্চতা শূন্য | display: flow-root বা clearfix |
| Inline gap | img-এর নিচে অতিরিক্ত gap | display: block বা vertical-align: bottom |
| লেখা কাটানো | লম্বা লেখা কন্টেইনার ছাড়িয়ে যায় | overflow-wrap: break-word |
| Single line | লেখা wrap না করা | white-space: nowrap |
| Ellipsis | লম্বা লেখায় ... | nowrap + overflow:hidden + text-overflow:ellipsis |
✅ Flow Layout-এর সোনালি নিয়ম:
Float সন্তান ধারণ করতে parent-এ
Float সন্তান ধারণ করতে parent-এ
display: flow-root দাও +
Margin Collapse হলে BFC বা padding-top: 1px দাও +
img-এর নিচের gap সরাতে display: block দাও +
লেখা overflow ঠেকাতে overflow-wrap: break-word দাও।
🏄 CSS Floating Elements — সম্পূর্ণ নোট
এই সেকশনে CSS Float-এর সব বিষয় — float property, Float-এর আচরণ, Clearfix, clear property, shape-outside এবং আধুনিক বিকল্প বিস্তারিত বোঝানো হয়েছে।
🔷 CSS Float কী?
float এলিমেন্টকে Normal Flow থেকে বের করে বাম বা ডানে ভাসিয়ে দেয়।
পাশের Inline কন্টেন্ট Float-এর চারপাশে wrap করে — পত্রিকার ছবির মতো।
আধুনিক CSS-এ Layout-এর জন্য Float ব্যবহার এড়িয়ে চলো — Flexbox বা Grid ব্যবহার করো। তবে Image-এর পাশে Text wrap করানোর জন্য Float এখনো সেরা পদ্ধতি।
float-এর সব মান মান
| মান | আচরণ | কখন |
|---|---|---|
left |
বামে ভাসে, কন্টেন্ট ডানে wrap করে | ছবি বামে রাখতে ✅ |
right |
ডানে ভাসে, কন্টেন্ট বামে wrap করে | ছবি ডানে রাখতে ✅ |
none |
float সরানো — ডিফল্ট | float রিসেট করতে |
inline-start |
লেখার দিকের শুরুতে (LTR=left) | RTL সমর্থিত |
inline-end |
লেখার দিকের শেষে (LTR=right) | RTL সমর্থিত |
🔷 ১. Float-এর আচরণ — বিস্তারিত
Float করলে কী হয় আচরণ
/* Float-এর মূল আচরণ */
/* ১. Float এলিমেন্ট বাম/ডানে সরে যায় */
.image { float: left; margin-right: 16px; margin-bottom: 8px; }
/* ২. Inline কন্টেন্ট float-এর পাশে wrap করে */
/* ৩. Block এলিমেন্ট float-এর নিচে চলে যায় (overlap) */
/* ৪. Float এলিমেন্ট নিজেই block হয়ে যায় */
/* Float করলে Display স্বয়ংক্রিয়ভাবে block হয় */
span { float: left; } /* span inline হলেও float করলে block হয় */
/* তাই width/height কাজ করে */
/* Float-এর width ডিফল্টে কন্টেন্ট অনুযায়ী সংকুচিত */
.img-float {
float: left;
width: 200px; /* নির্দিষ্ট width দেওয়া ভালো */
margin: 0 16px 12px 0;
}
Float ও Inline কন্টেন্ট Inline Wrap
/* Image Float — Text Wrap */
article img {
float: left;
width: 300px;
margin: 0 24px 16px 0;
border-radius: 8px;
}
/* ডানে Float */
article img.right {
float: right;
margin: 0 0 16px 24px;
}
/* Image Caption-সহ */
figure {
float: left;
margin: 0 24px 16px 0;
width: 280px;
}
figure img { width: 100%; display: block; }
figure figcaption {
font-size: 0.875rem;
color: #64748b;
text-align: center;
padding: 8px 0;
}
Float-এর সমস্যা — Parent উচ্চতা শূন্য ⚠️ সমস্যা
/* সমস্যা: Float সন্তান থাকলে parent-এর উচ্চতা শূন্য */
.parent { background: lightblue; }
.child { float: left; height: 100px; width: 200px; }
/* parent-এর উচ্চতা = 0 — background দেখা যাবে না */
/* পরের block উপরে উঠে আসে */
.next-section { background: lightgreen; }
/* .next-section float-এর নিচে overlap করবে */
🔷 ২. clear — Float এড়িয়ে নিচে যাওয়া
clear-এর মান মান
| মান | আচরণ | কখন |
|---|---|---|
none |
Float এড়ায় না — ডিফল্ট | সাধারণ |
left |
বাম Float-এর নিচে যায় | left Float-এর পরে |
right |
ডান Float-এর নিচে যায় | right Float-এর পরে |
both |
উভয় Float-এর নিচে যায় | সবচেয়ে বেশি ✅ |
/* clear — Float-এর নিচে নামানো */
/* Footer Float-এর নিচে থাকবে */
.footer { clear: both; } /* বাম ও ডান উভয় Float-কে এড়ায় ✅ */
/* নির্দিষ্ট Float এড়ানো */
.after-left { clear: left; }
.after-right { clear: right; }
/* বাস্তব উদাহরণ */
article img { float: left; margin-right: 20px; }
article .cta { clear: left; margin-top: 20px; } /* CTA button Float-এর নিচে */
🔷 ৩. Clearfix — Float সন্তান ধারণের পদ্ধতি
পুরনো Clearfix পদ্ধতি Clearfix
/* পদ্ধতি ১: Empty div — HTML দূষণ ❌ */
/* <div class="clearfix"></div> — পুরনো, এড়িয়ে চলো */
/* পদ্ধতি ২: overflow: hidden — সহজ কিন্তু কন্টেন্ট কাটতে পারে */
.container { overflow: hidden; }
/* পদ্ধতি ৩: ::after Clearfix — প্রচলিত ✅ */
.clearfix::after {
content: "";
display: block; /* বা display: table */
clear: both;
}
/* সংক্ষিপ্ত version */
.cf::after { content: ""; display: block; clear: both; }
/* পদ্ধতি ৪: display: flow-root — সেরা আধুনিক পদ্ধতি ✅ */
.container { display: flow-root; }
/* কোনো extra HTML বা ::after লাগে না */
Clearfix — সম্পূর্ণ প্রচলিত Version প্রচলিত
/* Clearfix — পুরনো ব্রাউজারেও কাজ করে */
.clearfix::before,
.clearfix::after {
content: " ";
display: table; /* micro-clearfix */
}
.clearfix::after {
clear: both;
}
/* ব্যবহার */
.card-grid { /* clearfix */ }
.card-grid::after { content: ""; display: block; clear: both; }
.card {
float: left;
width: calc(33.33% - 16px);
margin-right: 16px;
margin-bottom: 16px;
}
.card:nth-child(3n) { margin-right: 0; }
আধুনিক পদ্ধতির তুলনা তুলনা
| পদ্ধতি | কাজ করে | পার্শ্বপ্রতিক্রিয়া | সুপারিশ |
|---|---|---|---|
Empty <div> |
হ্যাঁ | HTML দূষণ | এড়িয়ে চলো ❌ |
overflow: hidden |
হ্যাঁ | কন্টেন্ট কাটতে পারে | সতর্কে ব্যবহার করো |
::after clearfix |
হ্যাঁ | Extra pseudo-element | পুরনো প্রজেক্টে ঠিক আছে |
display: flow-root |
হ্যাঁ | কোনো পার্শ্বপ্রতিক্রিয়া নেই | সেরা আধুনিক পদ্ধতি ✅ |
| Flexbox / Grid | হ্যাঁ (Float ছাড়া) | Layout পরিবর্তন | নতুন Layout-এ ব্যবহার করো ✅ |
🔷 ৪. shape-outside — Float-এর চারপাশে Text Wrap
shape-outside Float এলিমেন্টের চারপাশে Text
আকৃতি অনুযায়ী wrap করায় — শুধু আয়তক্ষেত্র নয়,
বৃত্ত বা যেকোনো আকৃতিতে।
শুধুমাত্র Float এলিমেন্টে কাজ করে।
shape-outside-এর মান মান
| মান | আকৃতি | উদাহরণ |
|---|---|---|
circle() |
বৃত্ত | circle(50%) |
ellipse() |
উপবৃত্ত | ellipse(50% 40% at 50% 50%) |
polygon() |
বহুভুজ | polygon(0 0, 100% 0, 100% 75%, 0 100%) |
inset() |
আয়তক্ষেত্র (ভেতরে) | inset(10px round 20px) |
url() |
ছবির আকৃতি অনুযায়ী | url("shape.png") |
margin-box |
Margin Box আকৃতি | ডিফল্ট |
/* shape-outside — শুধু float-এ কাজ করে */
/* বৃত্তাকার ছবির পাশে Text Wrap */
.avatar-float {
float: left;
width: 200px;
height: 200px;
border-radius: 50%; /* ছবি গোল */
shape-outside: circle(); /* Text গোল আকৃতিতে wrap করবে ✅ */
margin-right: 20px;
}
/* নির্দিষ্ট বৃত্ত */
.circle-img {
float: left;
width: 200px; height: 200px;
shape-outside: circle(50% at 50% 50%); /* কেন্দ্রে ৫০% radius */
shape-margin: 12px; /* shape ও text-এর মাঝে ফাঁক */
}
/* Polygon — কোণাকুণি লেখা */
.angled {
float: left;
width: 200px; height: 300px;
shape-outside: polygon(0 0, 100% 0, 60% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%); /* ছবিও কাটা */
}
/* URL — ছবির স্বচ্ছ অংশ বাদ দিয়ে Wrap */
.png-float {
float: left;
shape-outside: url("transparent-shape.png");
width: 250px; height: 300px;
}
/* shape-margin — shape ও text-এর ফাঁক */
.shape-el {
float: left;
shape-outside: circle(40%);
shape-margin: 16px; /* চারপাশে ১৬px ফাঁক */
}
✅ shape-outside সতর্কতা:
shape-outside শুধু Float এলিমেন্টে কাজ করে।
Flex বা Grid item-এ কাজ করে না।
clip-path ও shape-outside একসাথে ব্যবহার করলে
ছবি ও Text উভয়ই আকৃতি অনুযায়ী হয়।
🔷 ৫. Float-এর বাস্তব ব্যবহার
Article-এ Image Float — সবচেয়ে প্রচলিত Article
/* Article Image Float */
.article { max-width: 800px; line-height: 1.7; }
.article img.float-left {
float: left;
width: 280px;
margin: 0 24px 16px 0;
border-radius: 8px;
}
.article img.float-right {
float: right;
width: 280px;
margin: 0 0 16px 24px;
border-radius: 8px;
}
/* Float সরিয়ে দেওয়া */
.article .clear { clear: both; }
/* Responsive — মোবাইলে float সরানো */
@media (max-width: 600px) {
.article img.float-left,
.article img.float-right {
float: none;
width: 100%;
margin: 0 0 16px 0;
}
}
Drop Cap — ::first-letter + Float Drop Cap
/* Drop Cap — Float দিয়ে প্রথম অক্ষর বড় করা */
.article-intro::first-letter {
float: left;
font-size: 4.5rem;
font-weight: 900;
line-height: 0.8;
margin: 4px 12px 0 0;
color: #3b82f6;
font-family: Georgia, serif;
}
/* বাক্সে Drop Cap */
.boxed-drop::first-letter {
float: left;
font-size: 3rem;
font-weight: 700;
line-height: 1;
margin: 0 12px 4px 0;
padding: 8px 12px;
background-color: #1e293b;
color: white;
border-radius: 4px;
}
Pull Quote — ম্যাগাজিন স্টাইল Pull Quote
/* Pull Quote — Float দিয়ে */
.pull-quote {
float: right;
width: 40%;
margin: 0 0 24px 32px;
padding: 20px 24px;
border-left: 4px solid #3b82f6;
background-color: #eff6ff;
font-size: 1.25rem;
font-style: italic;
color: #1e40af;
border-radius: 0 8px 8px 0;
}
/* Pull Quote বামে */
.pull-quote.left {
float: left;
margin: 0 32px 24px 0;
border-left: none;
border-right: 4px solid #3b82f6;
border-radius: 8px 0 0 8px;
}
Legacy Grid — Float দিয়ে Legacy Grid
/* Legacy Float Grid — পুরনো কোড maintenance-এ */
.row::after { content: ""; display: block; clear: both; }
.col { float: left; padding: 0 12px; }
.col-4 { width: 33.33%; }
.col-6 { width: 50%; }
.col-12 { width: 100%; }
/* Responsive */
@media (max-width: 768px) {
.col { float: none; width: 100%; }
}
/* আধুনিক বিকল্প — Float Grid-এর পরিবর্তে ✅ */
.modern-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
🔷 ৬. Float-এর আধুনিক বিকল্প
| Float-এর পুরনো ব্যবহার | আধুনিক বিকল্প | সুবিধা |
|---|---|---|
| Column Layout | CSS Grid / Flexbox | Clearfix লাগে না, সহজ ✅ |
| সমান উচ্চতার Column | Flexbox align-items: stretch |
স্বয়ংক্রিয়ভাবে সমান ✅ |
| Sidebar Layout | Grid template-areas |
পরিষ্কার কাঠামো ✅ |
| Centering | Flex place-items: center |
এক লাইনে centering ✅ |
| Image Text Wrap | Float এখনো সেরা | Shape-outside-ও পাওয়া যায় ✅ |
| Drop Cap | Float + ::first-letter |
Float-ই সেরা ✅ |
/* Float-এর পরিবর্তে আধুনিক পদ্ধতি */
/* ❌ পুরনো: Float Column */
.col { float: left; width: 33.33%; }
.row::after { content: ""; display: block; clear: both; }
/* ✅ আধুনিক: Grid */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* ❌ পুরনো: Float Sidebar */
.sidebar { float: left; width: 240px; }
.main { margin-left: 264px; }
/* ✅ আধুনিক: Grid Template Areas */
.layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 24px;
}
/* ❌ পুরনো: Float Centering */
.box { float: left; position: relative; left: 50%; }
.inner { position: relative; left: -50%; }
/* ✅ আধুনিক: Flex Centering */
.container { display: flex; place-items: center; }
/* ✅ Float এখনো সেরা: Image Text Wrap */
article img {
float: left;
shape-outside: circle(50%);
width: 200px; height: 200px;
border-radius: 50%;
margin-right: 20px;
}
🔷 দ্রুত রেফারেন্স — Float সব Property ও Pattern
| Property | কাজ | সাধারণ মান | ডিফল্ট |
|---|---|---|---|
float |
এলিমেন্ট ভাসানো | left, right, none |
none |
clear |
Float এড়িয়ে নিচে যাওয়া | both, left, right |
none |
shape-outside |
Text Wrap-এর আকৃতি | circle(), polygon(), url() |
none |
shape-margin |
Shape ও Text-এর ফাঁক | 16px |
0 |
display: flow-root |
Float ধারণ (BFC) | flow-root |
— |
Float সমস্যা ও সমাধান সমস্যা ও সমাধান
| সমস্যা | কারণ | সমাধান |
|---|---|---|
| Parent-এর উচ্চতা শূন্য | Float সন্তান Normal Flow-এর বাইরে | display: flow-root বা ::after clearfix ✅ |
| পরের block Float-এর নিচে | Block Float-কে দেখে না | clear: both পরের block-এ ✅ |
| Float-এর পাশে text না থামা | Next block BFC নয় | display: flow-root পরের block-এ |
| Responsive-এ Float ভাঙা | Fixed width + Float | Media Query-তে float: none; width: 100% |
| Image-এর নিচে বাড়তি জায়গা | Inline baseline gap | display: block বা vertical-align: bottom |
✅ Float-এর সোনালি নিয়ম:
নতুন Layout-এ Float ব্যবহার করো না — Flex বা Grid ব্যবহার করো + Image Text Wrap-এর জন্য Float এখনো সেরা + Float সন্তান ধারণে
নতুন Layout-এ Float ব্যবহার করো না — Flex বা Grid ব্যবহার করো + Image Text Wrap-এর জন্য Float এখনো সেরা + Float সন্তান ধারণে
display: flow-root ব্যবহার করো +
Float-এর পরে clear: both দাও +
shape-outside দিয়ে আকৃতি অনুযায়ী Text Wrap করো।
📐 CSS Layouts — সম্পূর্ণ নোট
এই সেকশনে CSS Layout-এর সব বিষয় — Flexbox (একমাত্রিক), CSS Grid (দ্বিমাত্রিক), Multi-column Layout, বাস্তব Layout Pattern এবং Responsive Design কৌশল বিস্তারিত বোঝানো হয়েছে।
🔷 CSS Layout পদ্ধতি — এক নজরে
আধুনিক CSS-এ Layout তৈরির প্রধান দুটি পদ্ধতি — Flexbox (একমাত্রিক: শুধু Row বা Column) এবং CSS Grid (দ্বিমাত্রিক: Row ও Column একসাথে)। দুটি ভিন্ন সমস্যার সমাধান — পরিস্থিতি বুঝে বেছে নিতে হয়।
| পদ্ধতি | মাত্রা | কখন ব্যবহার | উদাহরণ |
|---|---|---|---|
| Flexbox | একমাত্রিক (Row বা Column) | একটি সারিতে item সাজানো | Navbar, Button group, Card body |
| CSS Grid | দ্বিমাত্রিক (Row ও Column) | পূর্ণ Page বা Section layout | Card grid, Dashboard, Page layout |
| Multi-column | একমাত্রিক (Column) | লেখা পত্রিকার মতো ভাগ করা | Article, FAQ, Feature list |
Flexbox বনাম Grid — কোনটি কখন তুলনা
| বিষয় | Flexbox | Grid |
|---|---|---|
| মাত্রা | ১ মাত্রিক — Row বা Column | ২ মাত্রিক — Row ও Column |
| কন্টেন্ট-নির্ভর | হ্যাঁ — item-র আকার দেখে সাজায় | না — কাঠামো আগে ঠিক করে |
| সেরা ব্যবহার | Navigation, Toolbar, Card component | Page layout, Card grid, Dashboard |
| Alignment | একদিকে — বিপরীত দিকে সীমিত | উভয় দিকে নিখুঁত নিয়ন্ত্রণ |
| Gap | gap কাজ করে | gap কাজ করে ✅ |
🔷 FLEXBOX — একমাত্রিক Layout
display: flex দিলে Parent Flex Container হয়,
সরাসরি সন্তানরা Flex Item হয়।
দুটি অক্ষ — Main Axis (প্রধান দিক) ও
Cross Axis (আড়াআড়ি দিক)।
/* Flex Container শুরু */
.container {
display: flex; /* Container → Flex Container */
/* সন্তানরা স্বয়ংক্রিয়ভাবে Flex Item */
}
/* inline Flex */
.inline-container { display: inline-flex; } /* Inline + Flex */
🔷 ১. flex-direction — Main Axis নির্ধারণ
| মান | Main Axis | item সাজানো | কখন |
|---|---|---|---|
row |
অনুভূমিক → | বাম থেকে ডানে | ডিফল্ট — Navbar, Button Group ✅ |
row-reverse |
অনুভূমিক ← | ডান থেকে বামে | RTL Layout |
column |
উল্লম্ব ↓ | উপর থেকে নিচে | Card body, Form ✅ |
column-reverse |
উল্লম্ব ↑ | নিচ থেকে উপরে | Chat messages |
/* flex-direction */
.navbar { display: flex; flex-direction: row; } /* ডিফল্ট */
.sidebar { display: flex; flex-direction: column; } /* উপর-নিচে */
.chat { display: flex; flex-direction: column-reverse; } /* নতুন বার্তা নিচে */
/* direction অনুযায়ী Axis বদলায় */
/* row: Main=অনুভূমিক, Cross=উল্লম্ব */
/* column: Main=উল্লম্ব, Cross=অনুভূমিক */
🔷 ২. justify-content — Main Axis-এ সাজানো
| মান | আচরণ | কখন |
|---|---|---|
flex-start |
শুরুতে জড়ো — ডিফল্ট | সাধারণ ব্যবহার |
flex-end |
শেষে জড়ো | ডানে রাখতে |
center |
মাঝখানে | Centered content ✅ |
space-between |
প্রান্তে, মাঝে সমান ফাঁক | Navbar (logo ↔ links) ✅ |
space-around |
দুপাশে সমান (প্রান্ত অর্ধেক) | Tab bar |
space-evenly |
সব ফাঁক সমান | সুষম বিতরণ |
/* justify-content */
.center-items { display: flex; justify-content: center; }
.space-nav { display: flex; justify-content: space-between; } /* Navbar ✅ */
.end-align { display: flex; justify-content: flex-end; }
.evenly-spaced { display: flex; justify-content: space-evenly; }
/* বাস্তব — Navbar */
.navbar {
display: flex;
justify-content: space-between; /* Logo বামে, Links ডানে */
align-items: center;
padding: 0 24px;
height: 64px;
}
🔷 ৩. align-items ও align-content — Cross Axis-এ সাজানো
align-items — Single Line align-items
| মান | আচরণ | কখন |
|---|---|---|
stretch |
Cross Axis বরাবর প্রসারিত — ডিফল্ট | সমান উচ্চতার Column |
flex-start |
Cross Axis-এর শুরুতে | উপরে রাখতে |
flex-end |
Cross Axis-এর শেষে | নিচে রাখতে |
center |
Cross Axis-এর মাঝে | উল্লম্বে মাঝে ✅ |
baseline |
লেখার baseline-এ | বিভিন্ন আকারের লেখায় |
/* align-items */
.vcenter { display: flex; align-items: center; } /* উল্লম্বে মাঝে ✅ */
.vtop { display: flex; align-items: flex-start; }
.vbottom { display: flex; align-items: flex-end; }
.stretch { display: flex; align-items: stretch; } /* ডিফল্ট */
.baseline{ display: flex; align-items: baseline; }
/* সম্পূর্ণ কেন্দ্রে রাখা — সবচেয়ে সহজ পদ্ধতি ✅ */
.perfect-center {
display: flex;
justify-content: center; /* Main Axis-এ মাঝে */
align-items: center; /* Cross Axis-এ মাঝে */
min-height: 100dvh;
}
align-content — Multi Line (wrap-এ) align-content
/* align-content — flex-wrap: wrap থাকলে কাজ করে */
.multi-row {
display: flex;
flex-wrap: wrap;
align-content: flex-start; /* Row উপরে জড়ো */
align-content: center; /* Row মাঝখানে */
align-content: space-between; /* Row-এর মাঝে সমান ফাঁক */
align-content: stretch; /* Row প্রসারিত — ডিফল্ট */
}
🔷 ৪. flex-wrap ও gap — মোড়ানো ও ফাঁকা জায়গা
flex-wrap — নতুন লাইনে যাওয়া flex-wrap
/* flex-wrap */
.nowrap { display: flex; flex-wrap: nowrap; } /* ডিফল্ট — একলাইনে */
.wrap { display: flex; flex-wrap: wrap; } /* জায়গা না হলে নতুন লাইনে ✅ */
/* flex-flow = flex-direction + flex-wrap shorthand */
.container { flex-flow: row wrap; } /* row + wrap */
.container { flex-flow: column nowrap; } /* column + nowrap */
gap — item-এর মাঝে ফাঁক gap
/* gap — item-এর মাঝে ফাঁক */
.grid-4 { display: flex; gap: 24px; } /* সব দিকে ২৪px */
.grid-4 { display: flex; gap: 16px 24px; } /* row 16px, column 24px */
/* আলাদা আলাদা */
.cards { row-gap: 16px; column-gap: 24px; }
/* Margin-এর চেয়ে gap ভালো কারণ:
প্রথম ও শেষ item-এ extra margin লাগে না ✅ */
🔷 ৫. Flex Item Properties — item নিয়ন্ত্রণ
flex-grow — বাড়তি জায়গা নেওয়া flex-grow
/* flex-grow — বাড়তি জায়গা অনুপাতে ভাগ করে নেয় */
/* 0 = বাড়বে না — ডিফল্ট */
/* 1 = বাড়তি জায়গা নেবে */
.item-a { flex-grow: 1; } /* বাড়তি জায়গার ১ ভাগ */
.item-b { flex-grow: 2; } /* বাড়তি জায়গার ২ ভাগ */
/* item-b, item-a-এর দ্বিগুণ জায়গা পাবে */
/* সবাই সমান ভাগে জায়গা নিক */
.item { flex-grow: 1; } /* সমান প্রস্থ ✅ */
/* শুধু একটি item বাকি জায়গা নিক — Navbar Search */
.search-bar { flex-grow: 1; } /* Logo ও Button ছোট, Search বাকি সব জায়গা ✅ */
flex-shrink — ছোট হওয়ার নিয়ম flex-shrink
/* flex-shrink — জায়গা কম হলে কীভাবে কমবে */
/* 1 = কমবে — ডিফল্ট */
/* 0 = কমবে না */
.fixed-sidebar { flex-shrink: 0; width: 280px; } /* Sidebar সবসময় ২৮০px */
.main-content { flex-shrink: 1; } /* Content ছোট হবে */
/* Logo-কে ছোট হতে না দেওয়া */
.logo { flex-shrink: 0; }
flex-basis — ভিত্তি আকার flex-basis
/* flex-basis — grow/shrink হওয়ার আগের ভিত্তি আকার */
.item { flex-basis: 200px; } /* ভিত্তি ২০০px — grow/shrink হতে পারে */
.item { flex-basis: 25%; } /* ভিত্তি ২৫% */
.item { flex-basis: auto; } /* কন্টেন্টের আকার — ডিফল্ট */
.item { flex-basis: 0; } /* কন্টেন্ট বাদে শুধু grow অনুযায়ী */
flex Shorthand flex
/* flex: grow shrink basis */
.item { flex: 1; } /* flex: 1 1 0% — সবচেয়ে বেশি ব্যবহৃত ✅ */
.item { flex: auto; } /* flex: 1 1 auto */
.item { flex: none; } /* flex: 0 0 auto — সম্পূর্ণ নির্দিষ্ট */
.item { flex: 0 0 200px; } /* বাড়বে না, কমবে না, ভিত্তি ২০০px */
.item { flex: 1 0 auto; } /* বাড়বে, কমবে না */
/* সমান কলাম তৈরি */
.col { flex: 1; } /* সব column সমান প্রস্থ ✅ */
order — item-এর ক্রম order
/* order — দৃশ্যমান ক্রম পরিবর্তন (HTML পরিবর্তন ছাড়া) */
/* ডিফল্ট: সব item-এ order = 0 */
/* ছোট order = আগে, বড় order = পরে */
/* ঋণাত্মকও দেওয়া যায় */
.item-a { order: 2; } /* পরে দেখাবে */
.item-b { order: 1; } /* আগে দেখাবে */
.item-c { order: 3; } /* সবার শেষে */
/* মোবাইলে কন্টেন্ট আগে, Sidebar পরে */
@media (max-width: 768px) {
.main { order: 1; }
.sidebar { order: 2; }
}
align-self — নির্দিষ্ট item-এর Alignment align-self
/* align-self — Container-এর align-items override করে */
.container { display: flex; align-items: center; }
.special-item { align-self: flex-end; } /* শুধু এটি নিচে */
.another { align-self: flex-start; } /* শুধু এটি উপরে */
.stretch-me { align-self: stretch; } /* শুধু এটি প্রসারিত */
/* margin: auto দিয়েও alignment */
.push-right { margin-left: auto; } /* বামে সব ঠেলে ডানে যায় ✅ */
.push-down { margin-top: auto; } /* উপরে সব ঠেলে নিচে যায় */
🔷 ৬. Flexbox — বাস্তব Layout Pattern
Navbar Navbar
/* Navbar — Logo বামে, Links ডানে */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
height: 64px;
gap: 16px;
}
.nav-logo { flex-shrink: 0; } /* Logo ছোট হবে না */
.nav-links {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
}
.nav-search { flex-grow: 1; max-width: 400px; } /* Search বাড়বে */
Card Component Card
/* Card — flex-direction: column */
.card {
display: flex;
flex-direction: column;
height: 100%; /* Grid-এ সমান উচ্চতার জন্য */
}
.card-image { /* Image */ }
.card-body { flex: 1; padding: 20px; } /* বাড়তি জায়গা নেয় */
.card-footer {
padding: 16px 20px;
margin-top: auto; /* সবসময় নিচে থাকে ✅ */
}
Holy Grail Layout Holy Grail
/* Holy Grail — Header, Footer, Sidebar, Main, Aside */
body {
display: flex;
flex-direction: column;
min-height: 100dvh;
}
header, footer { flex-shrink: 0; }
.page-body {
display: flex;
flex: 1; /* বাকি উচ্চতা নেয় */
gap: 0;
}
.sidebar { width: 240px; flex-shrink: 0; }
.main { flex: 1; } /* বাকি প্রস্থ নেয় */
.aside { width: 200px; flex-shrink: 0; }
Centering — সব পদ্ধতি Center
/* উল্লম্ব ও অনুভূমিক — সম্পূর্ণ কেন্দ্রে */
.center-box {
display: flex;
justify-content: center;
align-items: center;
}
/* Hero Section-এ সম্পূর্ণ কেন্দ্রে */
.hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100dvh;
gap: 24px;
}
/* Flex + margin: auto */
.btn-row { display: flex; gap: 12px; }
.btn-row .last-btn { margin-left: auto; } /* ডানে ঠেলে দাওয়া ✅ */
🔷 CSS GRID — দ্বিমাত্রিক Layout
display: grid দিলে Parent Grid Container হয়।
grid-template-columns ও grid-template-rows দিয়ে
Column ও Row সংজ্ঞায়িত করা হয়।
fr একক — বাকি জায়গার অনুপাতে ভাগ করে।
/* Grid Container শুরু */
.container { display: grid; }
/* fr = fraction — বাকি জায়গার ভাগ */
.grid { grid-template-columns: 1fr 1fr 1fr; } /* তিন সমান column */
.grid { grid-template-columns: 1fr 2fr 1fr; } /* মাঝেরটা দ্বিগুণ */
.grid { grid-template-columns: 200px 1fr; } /* প্রথম নির্দিষ্ট, বাকি fluid */
.grid { grid-template-columns: 25% 75%; } /* শতাংশে */
🔷 ৭. grid-template-columns ও grid-template-rows
repeat() — Column/Row পুনরাবৃত্তি repeat()
/* repeat() — column বারবার লেখার বদলে */
.grid { grid-template-columns: repeat(3, 1fr); } /* 1fr 1fr 1fr */
.grid { grid-template-columns: repeat(4, 200px); } /* চারটি ২০০px column */
.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* overflow ঠেকাতে */
/* Row */
.grid { grid-template-rows: repeat(3, 100px); } /* তিনটি ১০০px row */
.grid { grid-template-rows: auto 1fr auto; } /* Header, Content, Footer */
minmax() — ন্যূনতম ও সর্বোচ্চ আকার minmax()
/* minmax() — ন্যূনতম ও সর্বোচ্চ */
.grid { grid-template-columns: minmax(200px, 1fr) 1fr; }
/* প্রথম column ন্যূনতম ২০০px, সর্বোচ্চ 1fr */
/* Responsive Grid — Media Query ছাড়াই ✅ */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
/* container ছোট হলে স্বয়ংক্রিয়ভাবে কম column হয় */
/* auto-fill বনাম auto-fit */
/* auto-fill: খালি column জায়গা ধরে রাখে */
/* auto-fit: খালি column collapse করে — item প্রসারিত হয় */
.fit-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
🔷 ৮. Grid Item Placement — item সাজানো
grid-column ও grid-row — অবস্থান Placement
/* Grid Line = ১ থেকে শুরু হয় */
/* ৩ column grid-এ Line: 1 | 2 | 3 | 4 */
.item { grid-column: 1 / 3; } /* Line ১ থেকে ৩ পর্যন্ত = ২ column জুড়ে */
.item { grid-column: 1 / -1; } /* শুরু থেকে শেষ পর্যন্ত — সব column ✅ */
.item { grid-row: 1 / 3; } /* ২ row জুড়ে */
/* span — কত cell জুড়ে */
.wide { grid-column: span 2; } /* ২ column জুড়ে */
.tall { grid-row: span 3; } /* ৩ row জুড়ে */
.big-item { grid-column: span 2; grid-row: span 2; } /* ২×২ cell */
/* নির্দিষ্ট অবস্থানে */
.item { grid-column: 2 / span 2; } /* ২য় line থেকে ২ column জুড়ে */
/* shorthand: grid-area = row-start / col-start / row-end / col-end */
.item { grid-area: 1 / 2 / 3 / 4; }
grid-template-areas — নামযুক্ত এলাকা areas
/* grid-template-areas — নামযুক্ত এলাকা */
.page-layout {
display: grid;
grid-template-columns: 240px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
min-height: 100dvh;
}
/* item-কে নামযুক্ত এলাকায় রাখা */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
/* Responsive — Mobile-এ একক Column */
@media (max-width: 768px) {
.page-layout {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"sidebar"
"aside"
"footer";
}
}
🔷 ৯. Grid Alignment — item ও track সাজানো
| Property | প্রযোজ্য | দিক | মান |
|---|---|---|---|
justify-items |
Container | অনুভূমিক (cell-এ) | start, end, center, stretch |
align-items |
Container | উল্লম্ব (cell-এ) | start, end, center, stretch |
justify-content |
Container | অনুভূমিক (grid-এ) | start, center, space-between... |
align-content |
Container | উল্লম্ব (grid-এ) | start, center, space-between... |
justify-self |
Item | অনুভূমিক (নির্দিষ্ট) | start, end, center, stretch |
align-self |
Item | উল্লম্ব (নির্দিষ্ট) | start, end, center, stretch |
/* place-items = align-items + justify-items shorthand */
.grid { place-items: center; } /* উভয় দিকে মাঝে */
.grid { place-items: center start; } /* উল্লম্ব মাঝে, অনুভূমিক শুরুতে */
/* place-content = align-content + justify-content */
.grid { place-content: center; }
/* place-self = align-self + justify-self (item-এ) */
.item { place-self: center; } /* নির্দিষ্ট item মাঝে */
/* বাস্তব */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: start; /* Card উচ্চতা ভিন্ন হলেও উপরে রাখে */
}
🔷 ১০. CSS Grid — বাস্তব Layout Pattern
Responsive Card Grid Card Grid
/* Responsive Card Grid — Media Query ছাড়াই ✅ */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
padding: 24px;
}
/* নির্দিষ্ট Breakpoint-এ Column সংখ্যা */
.card-grid-fixed {
display: grid;
grid-template-columns: 1fr; /* Mobile: ১ column */
gap: 16px;
}
@media (min-width: 640px) {
.card-grid-fixed { grid-template-columns: repeat(2, 1fr); } /* ২ column */
}
@media (min-width: 1024px) {
.card-grid-fixed { grid-template-columns: repeat(3, 1fr); } /* ৩ column */
}
@media (min-width: 1280px) {
.card-grid-fixed { grid-template-columns: repeat(4, 1fr); } /* ৪ column */
}
Magazine / Blog Layout Magazine
/* Magazine Layout — Featured + Small */
.magazine {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
gap: 20px;
}
.featured {
grid-column: span 2; /* ২ column জুড়ে */
grid-row: span 2; /* ২ row জুড়ে */
}
.article-wide { grid-column: span 2; } /* ২ column */
.article-tall { grid-row: span 2; } /* ২ row */
/* Masonry-style — column-fill দিয়ে */
.masonry {
columns: 3; /* ৩ column */
column-gap: 16px;
}
.masonry-item {
break-inside: avoid; /* item ভেঙে দুই column-এ যাবে না */
margin-bottom: 16px;
}
Dashboard Layout Dashboard
/* Dashboard — Sidebar + Main */
.dashboard {
display: grid;
grid-template-columns: 260px 1fr;
grid-template-rows: 64px 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
height: 100dvh;
}
.dashboard-header { grid-area: header; }
.dashboard-sidebar { grid-area: sidebar; overflow-y: auto; }
.dashboard-main { grid-area: main; overflow-y: auto; padding: 24px; }
/* Widget Grid */
.widget-grid {
display: grid;
grid-template-columns: repeat(12, 1fr); /* ১২ column system */
gap: 16px;
}
.widget-sm { grid-column: span 3; } /* ৩/১২ = ২৫% */
.widget-md { grid-column: span 6; } /* ৬/১২ = ৫০% */
.widget-lg { grid-column: span 9; } /* ৯/১২ = ৭৫% */
.widget-full { grid-column: span 12; } /* ১২/১২ = ১০০% */
Subgrid — Parent Grid থেকে উত্তরাধিকার subgrid
/* subgrid — Parent Grid-এর Track উত্তরাধিকার */
.parent-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Card নিজেও Grid হবে এবং parent-এর column ব্যবহার করবে */
.card {
grid-column: span 2; /* ২ column জুড়ে */
display: grid;
grid-template-columns: subgrid; /* parent-এর ২টি column track নেবে */
}
.card-image { grid-column: 1; }
.card-content{ grid-column: 2; }
🔷 ১১. Multi-column Layout — পত্রিকার মতো
Multi-column Layout-এ কন্টেন্ট পত্রিকার মতো column-এ ভাগ হয়। Flexbox বা Grid-এর বিকল্প নয় — Text কন্টেন্ট column-এ ভাগ করতে ব্যবহৃত।
/* Multi-column Layout */
/* column-count — নির্দিষ্ট column সংখ্যা */
.text-3col { column-count: 3; }
/* column-width — ন্যূনতম প্রস্থ, browser column সংখ্যা ঠিক করে */
.auto-col { column-width: 300px; } /* যতটুকু জায়গায় যত column ধরে */
/* columns = column-width + column-count shorthand */
.article { columns: 3 300px; } /* ৩টি column, প্রতিটি ন্যূনতম ৩০০px */
/* column-gap — column-এর মাঝে ফাঁক */
.article { column-gap: 32px; }
/* column-rule — column-এর মাঝে রেখা */
.article {
column-rule: 1px solid #e2e8f0; /* border-এর মতো সিনট্যাক্স */
column-rule: 2px dashed #94a3b8;
}
/* break-inside — item দুই column-এ ভাঙবে না */
.card { break-inside: avoid; }
figure { break-inside: avoid; }
blockquote { break-inside: avoid; }
/* column-span — item পুরো প্রস্থ জুড়ে */
h2 { column-span: all; } /* section heading সব column-এ */
/* বাস্তব উদাহরণ */
.feature-list {
columns: 2 280px;
column-gap: 40px;
column-rule: 1px solid #e2e8f0;
}
.feature-list li { break-inside: avoid; margin-bottom: 12px; }
🔷 ১২. Responsive Layout Patterns — আধুনিক পদ্ধতি
The Sidebar Pattern Sidebar
/* Sidebar Pattern — Flexbox দিয়ে */
.with-sidebar {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.sidebar {
flex-basis: 260px; /* ভিত্তি ২৬০px */
flex-grow: 1; /* জায়গা হলে বাড়বে */
}
.main-content {
flex-basis: 0;
flex-grow: 999; /* বাকি সব জায়গা নেয় — সবসময় Sidebar-এর চেয়ে বড় */
min-width: 50%; /* ন্যূনতম ৫০% — না হলে নতুন row-এ যাবে */
}
The RAM Pattern — Repeat, Auto, Minmax RAM
/* RAM Pattern — সবচেয়ে Responsive Grid ✅ */
.ram-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: 20px;
}
/* min(100%, 280px) = overflow ছাড়া সঠিকভাবে কাজ করে
ছোট screen-এ 100% = একক column
বড় screen-এ ২৮০px minimum = auto-fit column */
Fluid Typography — clamp() দিয়ে Fluid Type
/* Fluid Typography — Media Query ছাড়াই ✅ */
h1 { font-size: clamp(1.75rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 2rem); }
p { font-size: clamp(1rem, 2vw, 1.125rem); }
/* Fluid Spacing */
.section { padding-block: clamp(40px, 8vw, 120px); }
.container { padding-inline: clamp(16px, 5vw, 48px); }
/* Fluid Gap */
.grid { gap: clamp(16px, 3vw, 40px); }
Container Queries — Component-নির্ভর Responsive Container Query
/* Container Query — Viewport নয়, Parent দেখে ✅ */
/* Parent Container হিসেবে ঘোষণা */
.card-wrapper {
container-type: inline-size;
container-name: card; /* নামযুক্ত (ঐচ্ছিক) */
}
/* Container-এর প্রস্থ অনুযায়ী */
@container (min-width: 400px) {
.card {
display: flex;
flex-direction: row; /* চওড়া হলে horizontal */
}
}
@container card (min-width: 600px) {
.card-title { font-size: 1.5rem; }
}
/* cqi = container inline-size-এর ১% */
.card-title { font-size: clamp(1rem, 5cqi, 1.5rem); }
🔷 দ্রুত রেফারেন্স — Flexbox ও Grid সব Property
Flexbox Container Properties Flex Container
| Property | কাজ | সাধারণ মান | ডিফল্ট |
|---|---|---|---|
display |
Flex চালু | flex, inline-flex |
— |
flex-direction |
Main Axis | row, column |
row |
flex-wrap |
মোড়ানো | wrap, nowrap |
nowrap |
flex-flow |
direction + wrap | row wrap |
row nowrap |
justify-content |
Main Axis সাজানো | center, space-between |
flex-start |
align-items |
Cross Axis সাজানো | center, stretch |
stretch |
align-content |
Multi-row সাজানো | center, space-between |
stretch |
gap |
item-এর ফাঁক | 16px, 16px 24px |
0 |
Flexbox Item Properties Flex Item
| Property | কাজ | সাধারণ মান | ডিফল্ট |
|---|---|---|---|
flex-grow |
বাড়তি জায়গা | 0, 1 |
0 |
flex-shrink |
ছোট হওয়া | 0, 1 |
1 |
flex-basis |
ভিত্তি আকার | auto, 200px, 0 |
auto |
flex |
grow shrink basis | 1, auto, none |
0 1 auto |
order |
ক্রম পরিবর্তন | -1, 0, 1 |
0 |
align-self |
নির্দিষ্ট alignment | center, flex-end |
auto |
CSS Grid Container Properties Grid Container
| Property | কাজ | সাধারণ মান | ডিফল্ট |
|---|---|---|---|
display |
Grid চালু | grid, inline-grid |
— |
grid-template-columns |
Column সংজ্ঞা | repeat(3,1fr), 200px 1fr |
none |
grid-template-rows |
Row সংজ্ঞা | auto 1fr auto |
none |
grid-template-areas |
নামযুক্ত এলাকা | "header header" |
none |
gap |
Track-এর ফাঁক | 16px, 16px 24px |
0 |
justify-items |
Cell-এ অনুভূমিক | start, center, stretch |
stretch |
align-items |
Cell-এ উল্লম্ব | start, center, stretch |
stretch |
place-items |
align + justify | center |
stretch |
CSS Grid Item Properties Grid Item
| Property | কাজ | সাধারণ মান |
|---|---|---|
grid-column |
Column অবস্থান ও বিস্তার | 1 / 3, span 2, 1 / -1 |
grid-row |
Row অবস্থান ও বিস্তার | 1 / 3, span 2 |
grid-area |
নামযুক্ত এলাকা বা shorthand | header, 1/2/3/4 |
justify-self |
নির্দিষ্ট অনুভূমিক | start, center, end |
align-self |
নির্দিষ্ট উল্লম্ব | start, center, end |
place-self |
align + justify | center |
কোন পরিস্থিতিতে কোন Layout কখন কী
| পরিস্থিতি | সেরা পদ্ধতি | কারণ |
|---|---|---|
| Navbar / Toolbar | Flexbox | একটি সারি, space-between |
| Button Group | Flexbox + gap | সরল row layout |
| Card Body (Icon + Text) | Flexbox | align-items: center |
| Card Grid | Grid (auto-fill/fit) | 2D, Responsive |
| Page Layout | Grid (template-areas) | দৃশ্যমান কাঠামো |
| Dashboard | Grid (12-col system) | নমনীয় widget |
| Form Layout | Grid বা Flexbox column | Label + Input align |
| Modal Center | Flexbox (place-items: center) | সহজ centering |
| Article Text | Multi-column | Text flow column-এ |
| Responsive Card | Container Query + Grid | Component-নির্ভর |
✅ Layout-এর সোনালি নিয়ম:
একটি Row বা Column → Flexbox + দুই দিকের কাঠামো → Grid + Responsive Grid →
একটি Row বা Column → Flexbox + দুই দিকের কাঠামো → Grid + Responsive Grid →
repeat(auto-fill, minmax(280px, 1fr)) +
Item ফাঁক → সবসময় margin-এর বদলে gap +
সম্পূর্ণ কেন্দ্রে → display: flex; place-items: center +
Viewport নয়, Component দেখে Responsive → Container Query।
🎬 CSS Animations — সম্পূর্ণ নোট
এই সেকশনে CSS Animation-এর সব বিষয় — Transition, @keyframes, Animation Property, Transform (2D ও 3D), Timing Function, Performance এবং Accessibility কৌশল বিস্তারিত বোঝানো হয়েছে।
🔷 CSS Animation — দুটি পদ্ধতি
CSS-এ Animation দুটি পদ্ধতিতে করা হয় — Transition (দুটি state-এর মাঝে মসৃণ পরিবর্তন) এবং @keyframes Animation (একাধিক ধাপে স্বয়ংক্রিয় জটিল Animation)।
| বিষয় | Transition | @keyframes Animation |
|---|---|---|
| কখন শুরু | State পরিবর্তনে (hover, focus, class) | স্বয়ংক্রিয়ভাবে বা JS দিয়ে |
| ধাপ | দুটি — শুরু ও শেষ | যেকোনো সংখ্যক (0%–100%) |
| Loop | না | হ্যাঁ — infinite সম্ভব ✅ |
| জটিলতা | সহজ | জটিল ও নিয়ন্ত্রণযোগ্য |
| সেরা ব্যবহার | Button hover, Modal open, Menu | Loader, Skeleton, Hero animation |
🔷 ১. transition — মসৃণ State পরিবর্তন
transition Sub-Properties Sub-Properties
| Property | কাজ | সাধারণ মান | ডিফল্ট |
|---|---|---|---|
transition-property |
কোন property animate হবে | all, color, transform |
all |
transition-duration |
সময়কাল | 0.2s, 300ms |
0s |
transition-timing-function |
গতির বক্ররেখা | ease, linear, cubic-bezier() |
ease |
transition-delay |
শুরু হওয়ার আগে অপেক্ষা | 0s, 0.1s, 200ms |
0s |
/* transition Shorthand */
/* transition: property duration timing-function delay */
.btn {
background-color: #3b82f6;
transition: background-color 0.2s ease;
}
.btn:hover { background-color: #2563eb; }
/* একাধিক property — কমা দিয়ে */
.card {
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
opacity 0.2s ease;
}
/* সব property একসাথে */
.item { transition: all 0.3s ease; } /* সহজ কিন্তু performance-এ সতর্ক */
/* duration পরিচিত মান */
.fast { transition-duration: 100ms; } /* খুব দ্রুত — hover feedback */
.normal { transition-duration: 200ms; } /* সাধারণ — Button, Link ✅ */
.smooth { transition-duration: 300ms; } /* মসৃণ — Card, Menu ✅ */
.slow { transition-duration: 500ms; } /* ধীর — Modal, Page */
.enter { transition-duration: 400ms; } /* Enter — একটু ধীর */
.leave { transition-duration: 200ms; } /* Leave — দ্রুত ✅ */
transition-এর বাস্তব Pattern বাস্তব
/* Button hover */
.btn {
padding: 12px 24px;
background-color: #3b82f6;
color: white;
border-radius: 8px;
transition: background-color 0.2s ease,
transform 0.15s ease,
box-shadow 0.2s ease;
}
.btn:hover {
background-color: #2563eb;
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(59,130,246,0.4);
}
.btn:active {
transform: translateY(0);
box-shadow: none;
}
/* Card hover lift */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}
/* Link underline animate */
.nav-link {
position: relative;
text-decoration: none;
color: #1e293b;
}
.nav-link::after {
content: "";
position: absolute;
bottom: -2px; left: 0;
width: 0; height: 2px;
background-color: #3b82f6;
transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }
/* Color Scheme Toggle */
.theme-btn {
transition: background-color 0.4s ease,
color 0.4s ease;
}
/* Input focus */
.input {
border: 1px solid #e2e8f0;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59,130,246,0.25);
}
/* Image zoom */
.img-wrap { overflow: hidden; border-radius: 12px; }
.img-wrap img {
transition: transform 0.4s ease;
}
.img-wrap:hover img { transform: scale(1.08); }
transition — কী animate করা যায়, কী যায় না ⚠️ সীমা
/* animate করা যায় ✅ */
/* color, background-color, opacity, transform */
/* width, height (নির্দিষ্ট মান), padding, margin */
/* border-radius, box-shadow, font-size */
/* left, top, right, bottom (positioned) */
/* flex-grow, gap (কিছু browser-এ) */
/* animate করা যায় না ❌ */
.el { transition: display 0.3s; } /* display: none ↔ block — কাজ করে না */
.el { transition: height 0.3s; } /* height: 0 ↔ auto — কাজ করে না */
/* সমাধান — height: auto animate */
.accordion {
overflow: hidden;
max-height: 0;
transition: max-height 0.4s ease;
}
.accordion.open { max-height: 500px; } /* নির্দিষ্ট মান দিতে হবে */
/* display পরিবর্তনে Animation */
/* CSS @starting-style (Chrome 117+) বা JS class toggle ব্যবহার করো */
.modal {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal.open {
opacity: 1;
visibility: visible;
}
🔷 ২. timing-function — গতির বক্ররেখা
পূর্বনির্ধারিত Timing Function Preset
| মান | গতি | কখন ব্যবহার |
|---|---|---|
ease |
ধীরে শুরু → দ্রুত → ধীরে শেষ | ডিফল্ট — সাধারণ ব্যবহার ✅ |
linear |
সমান গতি সবসময় | Spinner, Progress bar ✅ |
ease-in |
ধীরে শুরু → দ্রুত শেষ | Element সরে যাওয়া (exit) |
ease-out |
দ্রুত শুরু → ধীরে শেষ | Element আসা (enter) ✅ |
ease-in-out |
ধীরে শুরু → দ্রুত → ধীরে শেষ | Accordion, Slide ✅ |
step-start |
শুরুতে instant jump | বিরল |
step-end |
শেষে instant jump | বিরল |
cubic-bezier() — কাস্টম গতি cubic-bezier
/* cubic-bezier(x1, y1, x2, y2) */
/* পূর্বনির্ধারিত মানের সমতুল্য */
.ease { transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
.linear { transition-timing-function: cubic-bezier(0, 0, 1, 1); }
.ease-in { transition-timing-function: cubic-bezier(0.42, 0, 1, 1); }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.58, 1); }
/* জনপ্রিয় কাস্টম Easing */
.spring {
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
/* overshoot — spring effect ✅ */
}
.snappy {
transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
/* দ্রুত শুরু, ধীরে শেষ */
}
.material {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
/* Material Design-এর standard easing */
}
.anticipate {
transition-timing-function: cubic-bezier(0.36, -0.64, 0.34, 1.56);
/* পেছনে গিয়ে সামনে আসে */
}
steps() — ধাপে ধাপে steps()
/* steps() — ধাপে ধাপে instant পরিবর্তন */
/* Typewriter Effect */
.typewriter {
width: 0;
overflow: hidden;
white-space: nowrap;
animation: typing 3s steps(30, end) forwards;
}
@keyframes typing {
from { width: 0; }
to { width: 20ch; }
}
/* Sprite Animation */
.sprite {
width: 64px; height: 64px;
background-image: url("sprite-sheet.png");
animation: run 0.6s steps(8) infinite;
}
@keyframes run {
from { background-position: 0 0; }
to { background-position: -512px 0; } /* ৮ frame × ৬৪px */
}
🔷 ৩. transform — 2D রূপান্তর
transform এলিমেন্টকে ঘোরানো, সরানো, বড়-ছোট করা বা বাঁকানো যায়।
Normal Flow পরিবর্তন হয় না — অন্য এলিমেন্ট সরে না।
GPU-accelerated হওয়ায় performance সেরা।
translate() — সরানো translate
/* translate — সরানো */
.el { transform: translateX(20px); } /* ডানে ২০px */
.el { transform: translateX(-20px); } /* বামে ২০px */
.el { transform: translateY(30px); } /* নিচে ৩০px */
.el { transform: translateY(-30px); } /* উপরে ৩০px */
.el { transform: translate(20px, 30px); } /* X ও Y একসাথে */
.el { transform: translate(-50%, -50%); } /* নিজের আকারের ৫০% ✅ */
/* % = নিজের আকারের % — centering-এ অত্যন্ত কার্যকর */
.centered {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%); /* সম্পূর্ণ কেন্দ্রে ✅ */
}
/* আধুনিক — translate property (Chrome 104+) */
.el { translate: 20px 30px; } /* transform: translate() ছাড়াই ✅ */
rotate() — ঘোরানো rotate
/* rotate — ঘোরানো */
.el { transform: rotate(45deg); } /* ঘড়ির কাঁটার দিকে ৪৫° */
.el { transform: rotate(-45deg); } /* বিপরীত দিকে ৪৫° */
.el { transform: rotate(180deg); } /* উল্টানো */
.el { transform: rotate(1turn); } /* পুরো এক চক্কর */
.el { transform: rotate(0.5turn); } /* অর্ধ চক্কর */
/* Dropdown Arrow */
.arrow { transition: transform 0.3s ease; }
.open .arrow { transform: rotate(180deg); }
/* Loading Spinner */
.spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* আধুনিক property */
.el { rotate: 45deg; } /* transform: rotate() ছাড়াই ✅ */
scale() — বড়-ছোট করা scale
/* scale — আকার পরিবর্তন */
.el { transform: scale(1.1); } /* ১০% বড় */
.el { transform: scale(0.9); } /* ১০% ছোট */
.el { transform: scale(1.1, 0.9); } /* X বড়, Y ছোট */
.el { transform: scaleX(1.2); } /* শুধু প্রস্থ বড় */
.el { transform: scaleY(0.8); } /* শুধু উচ্চতা ছোট */
.el { transform: scale(0); } /* সম্পূর্ণ অদৃশ্য */
.el { transform: scale(-1); } /* উল্টো (mirror) */
/* Button Press Effect */
.btn:active { transform: scale(0.96); }
/* Card hover zoom */
.card:hover { transform: scale(1.02); }
/* Icon hover */
.icon { transition: transform 0.2s ease; }
.icon:hover { transform: scale(1.2); }
/* আধুনিক property */
.el { scale: 1.1; } /* transform: scale() ছাড়াই ✅ */
skew() — বাঁকানো skew
/* skew — তির্যক করা */
.el { transform: skewX(15deg); } /* X অক্ষ বরাবর বাঁকানো */
.el { transform: skewY(10deg); } /* Y অক্ষ বরাবর বাঁকানো */
.el { transform: skew(15deg, 5deg); } /* উভয় দিকে */
/* Diagonal Section Divider */
.section {
position: relative;
padding: 80px 0;
}
.section::after {
content: "";
position: absolute;
bottom: -40px; left: -5%; right: -5%;
height: 80px;
background-color: white;
transform: skewY(-3deg);
z-index: 1;
}
transform-origin — রূপান্তরের কেন্দ্র transform-origin
/* transform-origin — কোথা থেকে transform হবে */
.el { transform-origin: center; } /* মাঝ থেকে — ডিফল্ট */
.el { transform-origin: top left; } /* উপর-বাম থেকে */
.el { transform-origin: bottom center; }/* নিচ-মাঝ থেকে */
.el { transform-origin: 0% 100%; } /* নিচ-বাম কোণ থেকে */
/* দরজার মতো খোলা */
.door {
transform-origin: left center; /* বাম দিক থেকে ঘোরে */
transition: transform 0.4s ease;
}
.door.open { transform: rotateY(-90deg); }
/* Scale animation — নিচ থেকে উপরে বড় হওয়া */
.popup {
transform-origin: bottom center;
transform: scale(0);
animation: pop 0.3s ease-out forwards;
}
@keyframes pop {
to { transform: scale(1); }
}
একাধিক transform — ক্রম গুরুত্বপূর্ণ ⚠️ ক্রম
/* একাধিক transform — ডান থেকে বামে প্রয়োগ হয় */
/* প্রথমে rotate, তারপর translate */
.el { transform: translate(100px, 0) rotate(45deg); }
/* = rotate(45deg) প্রথমে, তারপর rotated axis বরাবর translate */
/* প্রথমে translate, তারপর rotate */
.el { transform: rotate(45deg) translate(100px, 0); }
/* = translate প্রথমে (মূল axis-এ), তারপর rotate */
/* সাধারণ নিয়ম: translate সবার শেষে (বামে) রাখো */
.card:hover {
transform: translateY(-4px) scale(1.02); /* উপরে উঠে বড় হয় ✅ */
}
/* আধুনিক individual properties — ক্রমের সমস্যা নেই */
.el {
translate: 0 -4px;
scale: 1.02;
rotate: 0deg;
}
🔷 ৪. transform 3D — ত্রিমাত্রিক রূপান্তর
perspective — 3D দেখার দূরত্ব perspective
/* perspective — 3D effect-এর গভীরতা */
/* ছোট মান = বেশি dramatic 3D */
/* বড় মান = কম dramatic, সূক্ষ্ম */
/* পদ্ধতি ১: Parent-এ perspective */
.scene {
perspective: 800px; /* Parent-এ দিলে সব সন্তান একই দৃষ্টিকোণ থেকে */
perspective-origin: 50% 50%; /* দৃষ্টিকোণের কেন্দ্র */
}
.card { transform: rotateY(30deg); }
/* পদ্ধতি ২: perspective() function — নিজের উপর */
.card { transform: perspective(800px) rotateY(30deg); }
/* প্রতিটি element নিজস্ব perspective পায় */
3D rotate ও translate 3D Transform
/* 3D ঘোরানো */
.el { transform: perspective(600px) rotateX(30deg); } /* সামনে-পেছনে */
.el { transform: perspective(600px) rotateY(45deg); } /* বাম-ডান */
.el { transform: perspective(600px) rotateZ(30deg); } /* rotate()-এর মতো */
.el { transform: perspective(600px) rotate3d(1, 1, 0, 45deg); } /* কাস্টম অক্ষ */
/* 3D সরানো */
.el { transform: translateZ(50px); } /* সামনে আসে */
.el { transform: translateZ(-50px); } /* পেছনে যায় */
.el { transform: translate3d(20px, 30px, 50px); } /* X, Y, Z একসাথে */
/* 3D বড়-ছোট */
.el { transform: scale3d(1.1, 1.1, 1); }
.el { transform: scaleZ(2); }
Card Flip — 3D-র সেরা ব্যবহার Card Flip
/* Card Flip — সম্পূর্ণ বাস্তব উদাহরণ */
.flip-card {
width: 300px; height: 200px;
perspective: 1000px; /* 3D দৃষ্টিকোণ */
}
.flip-card-inner {
width: 100%; height: 100%;
position: relative;
transform-style: preserve-3d; /* সন্তানরা 3D-তে থাকবে ✅ */
transition: transform 0.6s ease;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg); /* Hover-এ উল্টানো */
}
.flip-card-front,
.flip-card-back {
position: absolute;
inset: 0;
border-radius: 12px;
backface-visibility: hidden; /* উল্টো দিক লুকানো ✅ */
}
.flip-card-front {
background-color: #3b82f6;
color: white;
}
.flip-card-back {
background-color: #1e293b;
color: white;
transform: rotateY(180deg); /* পেছনটা শুরুতেই উল্টানো */
}
🔷 ৫. @keyframes — Animation সংজ্ঞায়ন
@keyframes দিয়ে Animation-এর ধাপগুলো সংজ্ঞায়িত করা হয়।
animation property দিয়ে এলিমেন্টে প্রয়োগ করা হয়।
/* @keyframes সংজ্ঞা */
@keyframes fadeIn {
from { opacity: 0; } /* 0% */
to { opacity: 1; } /* 100% */
}
/* একাধিক ধাপ */
@keyframes slideUp {
0% { opacity: 0; transform: translateY(30px); }
60% { opacity: 1; transform: translateY(-5px); } /* overshoot */
100% { opacity: 1; transform: translateY(0); }
}
/* একই % মান একাধিক property */
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.8; }
}
/* প্রয়োগ */
.card { animation: fadeIn 0.4s ease-out; }
.hero-text { animation: slideUp 0.6s ease-out; }
.badge { animation: pulse 2s ease-in-out infinite; }
🔷 ৬. animation — সব Sub-Property
সব Sub-Property Properties
| Property | কাজ | সাধারণ মান | ডিফল্ট |
|---|---|---|---|
animation-name |
@keyframes-এর নাম | fadeIn, spin |
none |
animation-duration |
সময়কাল | 0.3s, 1s, 500ms |
0s |
animation-timing-function |
গতির বক্ররেখা | ease, linear |
ease |
animation-delay |
শুরুর দেরি | 0s, 0.2s |
0s |
animation-iteration-count |
কতবার চলবে | 1, 3, infinite |
1 |
animation-direction |
কোন দিকে | normal, reverse, alternate |
normal |
animation-fill-mode |
শুরু/শেষের style | none, forwards, backwards, both |
none |
animation-play-state |
চালু বা বন্ধ | running, paused |
running |
animation Shorthand Shorthand
/* animation: name duration timing-function delay iteration-count direction
fill-mode */
.el { animation: fadeIn 0.4s ease-out; } /* সহজ */
.el { animation: spin 1s linear infinite; } /* Spinner */
.el { animation: slideUp 0.6s ease-out 0.2s forwards; } /* delay + fill-mode */
.el { animation: pulse 2s ease-in-out infinite alternate; } /* পিছিয়ে আসে */
/* একাধিক animation — কমা দিয়ে */
.el {
animation:
fadeIn 0.4s ease-out,
slideUp 0.5s ease-out;
}
animation-fill-mode — শুরু/শেষের অবস্থা fill-mode
/* animation-fill-mode */
/* none — ডিফল্ট: animation শেষে মূল style-এ ফিরে যায় */
.flash { animation: highlight 0.5s ease; }
/* animation শেষে highlight সরে যায় */
/* forwards — animation শেষের style ধরে রাখে ✅ */
.fade-in {
opacity: 0; /* শুরু: অদৃশ্য */
animation: fadeIn 0.4s ease-out forwards;
/* শেষে opacity: 1 ধরে রাখে — না দিলে আবার ০-তে ফিরে যায় */
}
/* backwards — delay-এর সময়ও প্রথম frame style */
.delayed {
animation: fadeIn 0.5s ease-out 1s backwards;
/* 1s delay-এর সময় opacity: 0 থাকবে (fadeIn-এর from) */
}
/* both = forwards + backwards */
.complete { animation: slideUp 0.5s ease-out 0.3s both; }
animation-direction direction
/* animation-direction */
.el { animation-direction: normal; } /* 0% → 100% — ডিফল্ট */
.el { animation-direction: reverse; } /* 100% → 0% */
.el { animation-direction: alternate; } /* 0%→100%, তারপর 100%→0% — bounce ✅ */
.el { animation-direction: alternate-reverse; } /* 100%→0%, তারপর 0%→100% */
/* bounce Effect */
.bounce {
animation: bounceUp 1s ease alternate infinite;
}
@keyframes bounceUp {
from { transform: translateY(0); }
to { transform: translateY(-20px); }
}
animation-play-state — Pause ও Resume play-state
/* animation-play-state */
.spinner { animation: spin 1s linear infinite; }
/* Hover-এ Pause */
.spinner:hover { animation-play-state: paused; }
/* JS দিয়ে Pause/Resume */
/* el.style.animationPlayState = 'paused'; */
/* el.style.animationPlayState = 'running'; */
/* Prefers-reduced-motion-এ pause */
@media (prefers-reduced-motion: reduce) {
.spinner { animation-play-state: paused; }
}
🔷 ৭. Staggered Animation — ধাপে ধাপে আসা
/* Staggered Animation — :nth-child দিয়ে */
.item { animation: fadeInUp 0.5s ease-out both; }
.item:nth-child(1) { animation-delay: 0.0s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }
.item:nth-child(4) { animation-delay: 0.3s; }
.item:nth-child(5) { animation-delay: 0.4s; }
/* CSS Custom Property দিয়ে — সবচেয়ে নমনীয় ✅ */
.item { animation: fadeInUp 0.5s ease-out calc(var(--i) * 0.1s) both; }
/* HTML-এ inline style দিয়ে */
/* <li class="item" style="--i: 1"> */
/* <li class="item" style="--i: 2"> */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Grid Card-এ Stagger */
.card-grid .card {
animation: scaleIn 0.4s ease-out both;
animation-delay: calc(var(--card-index, 0) * 80ms);
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
🔷 ৮. জনপ্রিয় Animation Pattern
Skeleton Loading Skeleton
/* Skeleton Loading — Content লোড হওয়ার আগে */
.skeleton {
background: linear-gradient(
90deg,
#f1f5f9 25%,
#e2e8f0 50%,
#f1f5f9 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
border-radius: 4px;
}
@keyframes shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
.skeleton-text { height: 1rem; margin-bottom: 8px; border-radius: 4px; }
.skeleton-title { height: 1.5rem; width: 60%; border-radius: 4px; }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }
Loader ও Spinner Loader
/* CSS Spinner */
.spinner {
width: 40px; height: 40px;
border: 4px solid #e2e8f0;
border-top-color: #3b82f6;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Dot Loader */
.dots { display: flex; gap: 8px; }
.dot {
width: 10px; height: 10px;
background-color: #3b82f6;
border-radius: 50%;
animation: bounce 1.2s ease-in-out infinite;
}
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
.dot:nth-child(3) { animation-delay: 0s; }
@keyframes bounce {
0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
40% { transform: scale(1); opacity: 1; }
}
/* Progress Bar */
.progress-bar {
height: 4px;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
animation: progress 2s ease-in-out infinite;
transform-origin: left;
}
@keyframes progress {
0% { transform: scaleX(0); }
50% { transform: scaleX(0.7); }
100% { transform: scaleX(1); }
}
Notification ও Toast Toast
/* Toast Notification */
.toast {
animation: toastIn 0.3s ease-out both;
}
.toast.removing {
animation: toastOut 0.2s ease-in forwards;
}
@keyframes toastIn {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes toastOut {
to {
opacity: 0;
transform: translateX(100%);
}
}
/* Shake — Error Feedback */
.shake { animation: shake 0.4s ease-in-out; }
@keyframes shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-8px); }
40% { transform: translateX(8px); }
60% { transform: translateX(-5px); }
80% { transform: translateX(5px); }
}
/* Heartbeat */
.heart {
display: inline-block;
animation: heartbeat 1.4s ease-in-out infinite;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
14% { transform: scale(1.3); }
28% { transform: scale(1); }
42% { transform: scale(1.3); }
70% { transform: scale(1); }
}
Page Enter Animation Page Enter
/* Page Entrance — Hero Section */
.hero-title {
animation: fadeInDown 0.6s ease-out both;
}
.hero-subtitle {
animation: fadeInDown 0.6s ease-out 0.15s both;
}
.hero-btn {
animation: fadeInUp 0.5s ease-out 0.3s both;
}
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Scroll-triggered Animation — Intersection Observer + CSS */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* JS: IntersectionObserver দিয়ে .visible class যোগ করো */
🔷 ৯. Animation Performance — GPU-Friendly
CSS Animation-এ performance সবচেয়ে গুরুত্বপূর্ণ।
ভুল property animate করলে পেজ Lag করে।
transform ও opacity GPU-এ চলে —
কোনো Layout পরিবর্তন করে না।
কোন Property animate করবে, কোনটি করবে না Performance
| Property | Performance | কারণ | বিকল্প |
|---|---|---|---|
transform |
✅ সেরা | GPU-accelerated, Reflow নেই | — |
opacity |
✅ সেরা | GPU-accelerated, Repaint নেই | — |
filter |
✅ ভালো | GPU-accelerated | — |
background-color |
⚠️ ঠিক আছে | Repaint করে (Reflow নয়) | — |
width / height |
❌ খারাপ | Reflow তৈরি করে | transform: scale() |
top / left |
❌ খারাপ | Reflow তৈরি করে | transform: translate() |
margin / padding |
❌ খারাপ | Reflow তৈরি করে | transform: translate() |
font-size |
❌ খারাপ | Reflow তৈরি করে | transform: scale() |
/* ❌ খারাপ — Reflow তৈরি করে */
.box:hover {
left: 20px; /* position পরিবর্তন — Reflow */
width: 200px; /* আকার পরিবর্তন — Reflow */
margin-top: 20px; /* margin পরিবর্তন — Reflow */
}
/* ✅ ভালো — GPU-accelerated */
.box:hover {
transform: translateX(20px); /* translate — GPU */
transform: scale(1.1); /* scale — GPU */
}
/* ❌ খারাপ — top/left animate */
@keyframes move-bad {
from { top: 0; left: 0; }
to { top: 100px; left: 100px; }
}
/* ✅ ভালো — transform animate */
@keyframes move-good {
from { transform: translate(0, 0); }
to { transform: translate(100px, 100px); }
}
will-change — Browser-কে আগাম জানানো will-change
/* will-change — সতর্কে ব্যবহার করো */
/* ✅ সঠিক: Hover-এ */
.card:hover { will-change: transform; }
/* ✅ সঠিক: JS দিয়ে animation আগে যোগ, পরে সরাও */
/* el.style.willChange = 'transform'; // শুরুর আগে */
/* el.style.willChange = 'auto'; // শেষে সরাও */
/* ❌ ভুল: সব element-এ সবসময় */
* { will-change: transform; } /* Memory waste */
/* will-change-এর পরিবর্তে */
.animated { transform: translateZ(0); } /* GPU layer তৈরি */
/* বা */
.animated { transform: translate3d(0, 0, 0); } /* পুরনো কৌশল */
🔷 ১০. Accessibility — সবার জন্য Animation
কিছু ব্যবহারকারীর জন্য অতিরিক্ত animation মাথা ঘোরা বা Epilepsy
ঘটাতে পারে। prefers-reduced-motion দিয়ে তাদের জন্য animation
কমিয়ে দেওয়া অত্যন্ত গুরুত্বপূর্ণ।
/* prefers-reduced-motion — সবচেয়ে গুরুত্বপূর্ণ Accessibility Rule */
/* পদ্ধতি ১: Reduce করা */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* পদ্ধতি ২: শুধু অনুমোদিত animation চালাও (সেরা পদ্ধতি ✅) */
.spinner { animation: none; } /* ডিফল্টে বন্ধ */
@media (prefers-reduced-motion: no-preference) {
/* motion ঠিক আছে — animation চালাও */
.spinner { animation: spin 1s linear infinite; }
.card { transition: transform 0.3s ease; }
.hero { animation: fadeInUp 0.6s ease-out both; }
}
/* পদ্ধতি ৩: Transform-এর বদলে opacity */
@media (prefers-reduced-motion: reduce) {
.animate-in {
animation: fadeOnly 0.3s ease-out both; /* transform বাদে শুধু fade */
}
}
@keyframes fadeOnly {
from { opacity: 0; }
to { opacity: 1; }
}
/* Scroll-triggered-এ */
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
/* Infinite Animation বন্ধ */
@media (prefers-reduced-motion: reduce) {
.pulsing, .bouncing, .spinning {
animation: none;
}
}
🔷 দ্রুত রেফারেন্স — Animation সব Property
transition দ্রুত রেফারেন্স transition
| Property | কাজ | সাধারণ মান | ডিফল্ট |
|---|---|---|---|
transition-property |
কোন property | all, transform, opacity |
all |
transition-duration |
সময়কাল | 200ms, 0.3s |
0s |
transition-timing-function |
গতির বক্ররেখা | ease, ease-out |
ease |
transition-delay |
শুরুর দেরি | 0s, 100ms |
0s |
animation দ্রুত রেফারেন্স animation
| Property | কাজ | সাধারণ মান | ডিফল্ট |
|---|---|---|---|
animation-name |
@keyframes নাম | fadeIn, spin |
none |
animation-duration |
সময়কাল | 0.4s, 1s |
0s |
animation-iteration-count |
পুনরাবৃত্তি | 1, infinite |
1 |
animation-direction |
দিক | normal, alternate |
normal |
animation-fill-mode |
শুরু/শেষ style | forwards, both |
none |
animation-delay |
শুরুর দেরি | 0s, 0.2s |
0s |
animation-play-state |
চালু/বন্ধ | running, paused |
running |
transform দ্রুত রেফারেন্স transform
| Function | কাজ | উদাহরণ |
|---|---|---|
translate(x, y) |
সরানো | translate(-50%, -50%) |
translateX/Y/Z() |
এক অক্ষে সরানো | translateY(-4px) |
rotate(deg) |
ঘোরানো | rotate(45deg) |
rotateX/Y/Z() |
3D ঘোরানো | rotateY(180deg) |
scale(n) |
বড়-ছোট | scale(1.1) |
scaleX/Y() |
এক দিকে বড়-ছোট | scaleX(-1) (mirror) |
skew(x, y) |
বাঁকানো | skewX(15deg) |
perspective() |
3D দৃষ্টিকোণ | perspective(800px) |
✅ Animation-এর সোনালি নিয়ম:
সবসময়
সবসময়
transform ও opacity animate করো — top/left/width নয়
+
Enter animation → ease-out, Exit → ease-in +
Hover-এ 200–300ms, Modal-এ 300–400ms +
animation-fill-mode: forwards প্রায়ই লাগে — ভুলো না +
Stagger-এ --i Custom Property ব্যবহার করো +
সবসময় prefers-reduced-motion সমর্থন করো।
🔧 CSS Variables — সম্পূর্ণ নোট
এই সেকশনে CSS Custom Properties (Variables)-এর সব বিষয় — ঘোষণা, ব্যবহার, scope, fallback, JavaScript সংযোগ, Design Token ও Dark Mode ব্যবস্থাপনা বিস্তারিত বোঝানো হয়েছে।
🔷 CSS Variable কী?
CSS Custom Properties (সাধারণত CSS Variables বলা হয়) হলো CSS-এ
নিজের ভেরিয়েবল তৈরির পদ্ধতি।
-- দিয়ে ঘোষণা করা হয় এবং var() দিয়ে ব্যবহার করা হয়।
সহজ ভাষায় — CSS Variable হলো একটি নামযুক্ত ধারণপাত্র। একটি মান একবার সংরক্ষণ করো, পুরো পেজে ব্যবহার করো। পরিবর্তন করতে শুধু একটি জায়গায় মান বদলাও।
CSS Variable বনাম SASS Variable তুলনা
| বিষয় | CSS Variable | SASS Variable ($var) |
|---|---|---|
| Runtime | Browser-এ — চলার সময় পরিবর্তন হয় ✅ | Compile time — CSS-এ fixed হয় |
| JavaScript | JS দিয়ে পড়া ও লেখা যায় ✅ | JS দিয়ে পরিবর্তন করা যায় না |
| Inheritance | Cascade ও Inheritance মেনে চলে ✅ | না — compile-time only |
| Scope | Selector scope | Block scope |
| Media Query | ভেতরে পরিবর্তন করা যায় ✅ | না |
🔷 ১. ঘোষণা ও ব্যবহার — মূল নিয়ম
মূল সিনট্যাক্স Syntax
/* ঘোষণা: -- দিয়ে শুরু */
:root {
--color-primary: #3b82f6;
--spacing-md: 16px;
--font-size-base: 1rem;
--border-radius: 8px;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
--transition: 0.3s ease;
}
/* ব্যবহার: var() দিয়ে */
.btn {
background-color: var(--color-primary);
padding: var(--spacing-md);
font-size: var(--font-size-base);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
transition: all var(--transition);
}
/* নাম নিয়মাবলি */
--my-color: #ff0; /* ✅ ভালো */
--my_color: #ff0; /* ✅ underscore */
--myColor: #ff0; /* ✅ camelCase */
--my-color-1: #ff0; /* ✅ সংখ্যা */
/* --1color: #ff0; ❌ সংখ্যা দিয়ে শুরু হওয়া যাবে না */
/* Case-sensitive */
--color: red;
--Color: blue; /* এটি ভিন্ন Variable! */
যেকোনো মান সংরক্ষণ মান
/* যেকোনো CSS মান রাখা যায় */
:root {
/* রঙ */
--color-bg: #f8fafc;
--color-text: hsl(222, 47%, 11%);
--color-accent: oklch(0.6 0.2 250);
/* সংখ্যা — একক ছাড়া */
--ratio: 1.618;
--columns: 12;
/* একক সহ */
--gap: 24px;
--font-size: 1rem;
/* স্বচ্ছতা */
--opacity: 0.8;
/* Duration */
--duration-fast: 150ms;
--duration-base: 250ms;
/* Shadow */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
/* Gradient */
--gradient-primary: linear-gradient(135deg, #3b82f6, #8b5cf6);
/* Z-index scale */
--z-dropdown: 100;
--z-modal: 400;
--z-toast: 500;
}
🔷 ২. Scope — পরিধি ও উত্তরাধিকার
:root — Global Scope :root
/* :root = html element — সর্বোচ্চ scope */
/* পুরো পেজে পাওয়া যায় */
:root {
--color-primary: #3b82f6;
--font-size: 1rem;
}
/* যেকোনো জায়গায় ব্যবহার করা যায় */
.header { color: var(--color-primary); }
.footer { color: var(--color-primary); }
.sidebar { font-size: var(--font-size); }
Local Scope — নির্দিষ্ট এলিমেন্টে Local
/* Local Scope — শুধু এই element ও সন্তানে */
.card {
--card-bg: white;
--card-padding: 24px;
--card-radius: 12px;
background-color: var(--card-bg);
padding: var(--card-padding);
border-radius: var(--card-radius);
}
.card .title {
/* --card-bg এখানেও পাওয়া যায় — Inheritance */
color: var(--color-primary); /* :root থেকে আসে */
}
/* card-এর বাইরে --card-bg পাওয়া যাবে না */
.other { background: var(--card-bg); } /* undefined — initial value */
Override — সন্তানে নতুন মান Override
/* :root-এ default */
:root { --color-primary: #3b82f6; }
/* Dark section-এ override */
.dark-section {
--color-primary: #60a5fa; /* এই section-এ override */
background-color: #0f172a;
}
/* .dark-section-এর সব সন্তান নতুন মান পাবে */
.dark-section .btn { background-color: var(--color-primary); } /* #60a5fa */
.other-section .btn { background-color: var(--color-primary); } /* #3b82f6 */
/* Variant — Component-এ Local Override */
:root { --btn-bg: #3b82f6; --btn-color: white; }
.btn { background-color: var(--btn-bg); color: var(--btn-color); }
.btn-danger {
--btn-bg: #ef4444; /* শুধু এই variant-এ লাল */
--btn-color: white;
}
.btn-outline {
--btn-bg: transparent;
--btn-color: #3b82f6;
}
🔷 ৩. Fallback — ডিফল্ট মান
/* var(--variable, fallback) */
/* সহজ fallback */
.btn { color: var(--btn-color, white); } /* --btn-color না থাকলে white */
/* Nested fallback */
.text {
color: var(--color-custom,
var(--color-primary, /* প্রথম fallback */
#3b82f6)); /* দ্বিতীয় fallback */
}
/* Component Default Pattern ✅ */
/* component নিজে ডিফল্ট দেয়, user override করতে পারে */
.card {
background-color: var(--card-bg, white);
border-radius: var(--card-radius, 12px);
padding: var(--card-padding, 24px);
box-shadow: var(--card-shadow, var(--shadow-md));
}
/* user override করতে পারে */
.special-card { --card-bg: #eff6ff; --card-radius: 20px; }
/* Fallback-এ comma ব্যবহার — সতর্কতা */
/* প্রথম comma-র পরে সব fallback হিসেবে গণ্য */
.el { background: var(--bg, red, blue); }
/* fallback = "red, blue" — gradient শর্টহ্যান্ড হিসেবে কাজ করবে না */
🔷 ৪. JavaScript — Variable পড়া ও লেখা
/* JavaScript দিয়ে CSS Variable পড়া */
// :root-এর Variable পড়া
const root = document.documentElement;
const primaryColor = getComputedStyle(root)
.getPropertyValue('--color-primary').trim();
console.log(primaryColor); // "#3b82f6"
// নির্দিষ্ট element-এর Variable পড়া
const card = document.querySelector('.card');
const cardBg = getComputedStyle(card)
.getPropertyValue('--card-bg').trim();
/* JavaScript দিয়ে CSS Variable পরিবর্তন */
// :root-এ পরিবর্তন — পুরো পেজে প্রভাব ✅
root.style.setProperty('--color-primary', '#ef4444');
// নির্দিষ্ট element-এ
card.style.setProperty('--card-bg', '#eff6ff');
// মুছে দেওয়া (inherit করবে)
root.style.removeProperty('--color-primary');
/* Theme Switching */
const themeToggle = document.querySelector('#theme-toggle');
themeToggle.addEventListener('click', () => {
const current = root.getAttribute('data-theme');
root.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');
});
/* Dynamic Variable — Slider দিয়ে */
const slider = document.querySelector('#hue-slider');
slider.addEventListener('input', (e) => {
root.style.setProperty('--hue', e.target.value);
/* CSS: --color: hsl(var(--hue), 80%, 50%); */
});
/* Animation-এ JS + CSS Variable */
// Mouse Position-নির্ভর Gradient
document.addEventListener('mousemove', (e) => {
const x = (e.clientX / window.innerWidth) * 100;
const y = (e.clientY / window.innerHeight) * 100;
root.style.setProperty('--mouse-x', `${x}%`);
root.style.setProperty('--mouse-y', `${y}%`);
});
/* CSS: */
/* .gradient-bg {
background: radial-gradient(
circle at var(--mouse-x) var(--mouse-y),
#3b82f6, #8b5cf6
);
} */
/* Stagger Animation — index দিয়ে */
document.querySelectorAll('.item').forEach((el, i) => {
el.style.setProperty('--i', i);
});
/* CSS: animation-delay: calc(var(--i) * 100ms); */
🔷 ৫. Dark Mode — CSS Variable দিয়ে
পদ্ধতি ১ — Media Query Media Query
/* Light Mode — ডিফল্ট */
:root {
--color-bg: #f8fafc;
--color-surface: #ffffff;
--color-text: #1e293b;
--color-text-muted: #64748b;
--color-border: #e2e8f0;
--color-primary: #3b82f6;
--color-primary-hover: #2563eb;
}
/* Dark Mode — সিস্টেম সেটিং অনুযায়ী */
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #0f172a;
--color-surface: #1e293b;
--color-text: #f1f5f9;
--color-text-muted: #94a3b8;
--color-border: #334155;
--color-primary: #60a5fa;
--color-primary-hover: #93c5fd;
}
}
/* এখন সব component স্বয়ংক্রিয়ভাবে পরিবর্তন হবে */
body { background-color: var(--color-bg); color: var(--color-text); }
.card { background-color: var(--color-surface); border: 1px solid var(--color-border); }
.btn { background-color: var(--color-primary); color: white; }
.muted { color: var(--color-text-muted); }
পদ্ধতি ২ — data-theme Attribute (সেরা ✅) data-theme
/* data-theme দিয়ে — JS Toggle সমর্থিত */
/* Light Mode */
[data-theme="light"],
:root {
--color-bg: #f8fafc;
--color-surface: #ffffff;
--color-text: #1e293b;
--color-border: #e2e8f0;
}
/* Dark Mode */
[data-theme="dark"] {
--color-bg: #0f172a;
--color-surface: #1e293b;
--color-text: #f1f5f9;
--color-border: #334155;
}
/* HTML: <html data-theme="light"> */
/* JS Toggle */
const html = document.documentElement;
const toggle = document.querySelector('#theme-btn');
toggle.addEventListener('click', () => {
const isDark = html.getAttribute('data-theme') === 'dark';
html.setAttribute('data-theme', isDark ? 'light' : 'dark');
localStorage.setItem('theme', isDark ? 'light' : 'dark');
});
/* Saved preference */
const saved = localStorage.getItem('theme') || 'light';
html.setAttribute('data-theme', saved);
🔷 ৬. Design Token — সম্পূর্ণ Design System
/* Design Token System — দুই স্তরে */
/* স্তর ১: Primitive Token — Raw Value */
:root {
/* Color Palette */
--blue-50: #eff6ff;
--blue-100: #dbeafe;
--blue-200: #bfdbfe;
--blue-300: #93c5fd;
--blue-400: #60a5fa;
--blue-500: #3b82f6; /* Base */
--blue-600: #2563eb;
--blue-700: #1d4ed8;
--blue-800: #1e40af;
--blue-900: #1e3a8a;
--slate-50: #f8fafc;
--slate-100: #f1f5f9;
--slate-200: #e2e8f0;
--slate-300: #cbd5e1;
--slate-400: #94a3b8;
--slate-500: #64748b;
--slate-600: #475569;
--slate-700: #334155;
--slate-800: #1e293b;
--slate-900: #0f172a;
/* Spacing Scale */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
/* Font Size Scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl:24px;
--radius-full: 9999px;
/* Font Weight */
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-black: 900;
}
/* স্তর ২: Semantic Token — Context-based */
:root {
/* Color — Semantic */
--color-primary: var(--blue-500);
--color-primary-hover: var(--blue-600);
--color-primary-light: var(--blue-50);
--color-success: #22c55e;
--color-warning: #f59e0b;
--color-danger: #ef4444;
--color-info: var(--blue-400);
/* Text */
--color-text: var(--slate-800);
--color-text-muted: var(--slate-500);
--color-text-subtle: var(--slate-400);
--color-text-inverse: white;
/* Background */
--color-bg: var(--slate-50);
--color-surface: white;
--color-surface-hover: var(--slate-50);
--color-overlay: rgba(0, 0, 0, 0.5);
/* Border */
--color-border: var(--slate-200);
--color-border-strong: var(--slate-300);
--color-focus-ring: rgba(59, 130, 246, 0.3);
/* Spacing — Semantic */
--spacing-component-sm: var(--space-3);
--spacing-component-md: var(--space-4);
--spacing-component-lg: var(--space-6);
--spacing-section: var(--space-20);
/* Typography */
--font-heading: 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'Fira Code', 'Cascadia Code', monospace;
/* Shadow */
--shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
--shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
/* Transition */
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 350ms;
--transition-base: var(--duration-base) var(--ease-in-out);
}
🔷 ৭. @property — Type-safe CSS Variable
@property দিয়ে CSS Variable-এর type ঘোষণা করা যায়।
সবচেয়ে বড় সুবিধা — Typed Variable animate করা যায়।
/* @property — Type-safe Custom Property */
@property --hue {
syntax: ""; /* type: সংখ্যা */
inherits: false; /* Inherit হবে না */
initial-value: 220; /* ডিফল্ট মান */
}
@property --angle {
syntax: ""; /* type: ডিগ্রি */
inherits: false;
initial-value: 0deg;
}
@property --opacity-val {
syntax: "";
inherits: true;
initial-value: 1;
}
/* Animated Gradient — @property দিয়ে ✅ */
@property --gradient-angle {
syntax: "";
inherits: false;
initial-value: 0deg;
}
.animated-gradient {
background: linear-gradient(var(--gradient-angle), #3b82f6, #8b5cf6);
animation: rotate-gradient 4s linear infinite;
}
@keyframes rotate-gradient {
to { --gradient-angle: 360deg; }
/* Typed Variable বলে animate হয়! সাধারণ Variable-এ হতো না */
}
/* Color Hue Animation */
@property --color-hue {
syntax: "";
inherits: false;
initial-value: 220;
}
.rainbow-text {
color: hsl(var(--color-hue), 80%, 50%);
animation: hue-shift 3s linear infinite;
}
@keyframes hue-shift {
to { --color-hue: 580; } /* 220 থেকে 580 = পুরো রঙ চাকা */
}
🔷 দ্রুত রেফারেন্স — CSS Variable সব নিয়ম
| বিষয় | সিনট্যাক্স / নিয়ম |
|---|---|
| ঘোষণা | --variable-name: value; |
| ব্যবহার | property: var(--variable-name); |
| Fallback | var(--variable, fallback-value) |
| Global Scope | :root { --var: value; } |
| JS পড়া | getComputedStyle(el).getPropertyValue('--var') |
| JS লেখা | el.style.setProperty('--var', value) |
| Typed Variable | @property --var { syntax: "<color>"; } |
| Dark Mode | [data-theme="dark"] { --var: newValue; } |
✅ CSS Variable-এর সোনালি নিয়ম:
Global মান →
Global মান →
:root-এ রাখো +
Component ডিফল্ট → Local Variable + Fallback দাও +
Dark Mode → data-theme attribute পদ্ধতি ব্যবহার করো +
Design Token → Primitive ও Semantic দুটি স্তরে আলাদা করো +
Animation করতে → @property দিয়ে Typed Variable বানাও।
🎯 CSS Selector Functions — সম্পূর্ণ নোট
এই সেকশনে CSS Selector Function-এর সব বিষয় — :is(), :not(), :has(), :where(), :nth-child(), :nth-of-type() এবং অন্যান্য Pseudo-class Function বিস্তারিত ব্যাখ্যা ও বাস্তব ব্যবহার সহ বোঝানো হয়েছে।
🔷 CSS Selector Function কী?
CSS Selector Function হলো Selector-এর ভেতরে ফাংশনের মতো যুক্তি গ্রহণকারী বিশেষ Pseudo-class। এগুলো দিয়ে জটিল Selector সহজে লেখা যায় এবং পুনরাবৃত্তি কমানো যায়।
| Function | কাজ | Specificity | সমর্থন |
|---|---|---|---|
:is() |
যেকোনো একটি match হলে | সবচেয়ে নির্দিষ্ট argument-এর মান | সব আধুনিক browser ✅ |
:not() |
match না হলে | argument-এর মান | সব browser ✅ |
:has() |
নির্দিষ্ট সন্তান থাকলে | argument-এর মান | Chrome 105+, Safari 15.4+, Firefox 121+ ✅ |
:where() |
:is() এর মতো কিন্তু Specificity = 0 | সবসময় 0 | সব আধুনিক browser ✅ |
:nth-child() |
n-তম সন্তান | Pseudo-class (0,1,0) | সব browser ✅ |
:nth-of-type() |
ঐ ধরনের n-তম | Pseudo-class (0,1,0) | সব browser ✅ |
🔷 ১. :is() — যেকোনো একটি match
:is() দিয়ে একাধিক Selector-এর যেকোনো একটি match হলে
style প্রযোজ্য হয়। দীর্ঘ পুনরাবৃত্তিমূলক Selector
সংক্ষিপ্ত করার সেরা পদ্ধতি।
/* :is() — যেকোনো একটি match হলে */
/* পুরনো পদ্ধতি — পুনরাবৃত্তি */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }
/* :is() দিয়ে — সংক্ষিপ্ত ✅ */
:is(h1, h2, h3, h4, h5, h6) a { color: inherit; }
/* Nested :is() */
:is(section, article, aside) :is(h1, h2, h3) {
font-size: 1.5rem;
margin-bottom: 1rem;
}
/* State Selector-এ */
/* পুরনো */
.btn:hover, .btn:focus, .btn:active { background-color: #2563eb; }
/* :is() দিয়ে */
.btn:is(:hover, :focus, :active) { background-color: #2563eb; }
/* Form Element */
:is(input, textarea, select):is(:focus, :focus-visible) {
outline: 3px solid #3b82f6;
outline-offset: 2px;
}
/* Dark Mode-এ */
:is([data-theme="dark"], .dark) :is(p, li, td) {
color: #e2e8f0;
}
/* :is() Specificity — সবচেয়ে নির্দিষ্ট argument-এর মান */
:is(#id, .class) a { color: red; }
/* Specificity = (1,0,1) — #id-এর মান নেয় */
:is(h1, .heading) { color: blue; }
/* Specificity = (0,1,0) — .heading-এর মান নেয় */
✅ :is() কখন ব্যবহার করবে:
একই style একাধিক Selector-এ দিতে হলে +
Heading-এর (h1–h6) সব ধরনে style দিতে +
Form element-এর সব ধরনে একসাথে style দিতে +
Hover/Focus/Active একসাথে দিতে।
🔷 ২. :not() — বাদ দিয়ে
:not() নির্দিষ্ট Selector বাদ দিয়ে
বাকি সবকিছুতে style প্রযোজ্য করে।
আধুনিক CSS-এ একাধিক Selector দেওয়া যায়।
/* :not() — বাদ দিয়ে বাকি সব */
/* শেষেরটি বাদে সব */
li:not(:last-child) { margin-bottom: 12px; }
/* = প্রতিটি li-তে margin, শেষেরটিতে নয় ✅ */
/* প্রথমটি বাদে সব */
p:not(:first-child) { margin-top: 16px; }
/* নির্দিষ্ট class বাদে */
.btn:not(.btn-primary) { border: 1px solid #e2e8f0; }
/* Disabled বাদে */
.btn:not(:disabled) { cursor: pointer; }
.btn:not(:disabled):hover { background-color: #2563eb; }
/* একাধিক বাদ দেওয়া */
input:not([type="submit"], [type="reset"], [type="button"]) {
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 10px 14px;
}
/* :not() দিয়ে Border-এর মাঝের রেখা */
.nav-item:not(:last-child) {
border-right: 1px solid #e2e8f0;
}
/* Visited link বাদে */
a:not(:visited) { color: #3b82f6; }
/* Table-এ Header বাদে */
tr:not(:first-child) td { border-top: 1px solid #f1f5f9; }
/* :not() Specificity */
p:not(.special) { color: #374151; } /* (0,1,1) — .special-এর মান */
div:not(#main) { padding: 20px; } /* (1,0,1) — #main-এর মান */
:not() — বাস্তব Pattern বাস্তব
/* Separator — শেষেরটিতে নয় */
.breadcrumb-item:not(:last-child)::after {
content: " / ";
color: #94a3b8;
margin: 0 6px;
}
/* Stack — উপরে margin, প্রথমটিতে নয় */
.stack > *:not(:first-child) { margin-top: var(--stack-gap, 16px); }
/* Placeholder বাদে সব Input */
input:not([placeholder]) { /* Placeholder নেই এমন */ }
/* Empty বাদে — :not(:empty) */
.message:not(:empty) { display: block; }
.badge:not(:empty) { padding: 2px 8px; }
/* Focused item বাদে dim করা */
.gallery-img:not(:hover) { opacity: 0.7; }
/* Link যা Button নয় */
a:not([class]) { color: #3b82f6; text-decoration: underline; }
/* class নেই এমন link — Component class-ওয়ালা বাদে */
🔷 ৩. :has() — Parent Selector (CSS-এর বিপ্লব)
:has() হলো CSS-এর সবচেয়ে শক্তিশালী নতুন Selector।
নির্দিষ্ট সন্তান থাকলে parent-এ style দেওয়া যায় —
CSS-এ এতদিন এটি সম্ভব ছিল না। "Parent Selector" নামে পরিচিত।
/* :has() — Parent Selector */
/* Image থাকলে Card ভিন্ন দেখাবে */
.card:has(img) { padding: 0; } /* Image Card-এ padding নয় */
.card:has(img) .card-body { padding: 20px; }
/* Empty হলে লুকানো */
.sidebar:not(:has(*)) { display: none; } /* সন্তান না থাকলে লুকাও */
/* Checkbox checked হলে label স্টাইল */
.form-group:has(input:checked) label {
color: #22c55e;
font-weight: 600;
}
/* Input-এ error থাকলে */
.field:has(input:invalid) {
background-color: #fef2f2;
border-color: #ef4444;
}
.field:has(input:invalid) label { color: #ef4444; }
.field:has(input:focus) { box-shadow: 0 0 0 3px rgba(59,130,246,0.25); }
/* Video বা বড় কন্টেন্ট থাকলে Layout পরিবর্তন */
article:has(video, iframe) {
max-width: 100%; /* পুরো প্রস্থ */
}
article:has(blockquote) {
font-size: 1.1rem; /* উদ্ধৃতি আছে — বড় font */
}
/* Navigation-এ Active link আছে কিনা */
.nav:has(a.active) { border-bottom: 2px solid #3b82f6; }
/* Grid/Flex — সন্তান সংখ্যায় Layout */
.auto-grid:has(> :nth-child(4)) {
grid-template-columns: repeat(2, 1fr); /* ৪+ সন্তান থাকলে ২ column */
}
.auto-grid:has(> :nth-child(7)) {
grid-template-columns: repeat(3, 1fr); /* ৭+ সন্তান থাকলে ৩ column */
}
:has() — Sibling Selector Sibling
/* :has() — Sibling ও Descendant Selector হিসেবে */
/* h2-এর পরে সরাসরি p আছে কিনা */
h2:has(+ p) { margin-bottom: 8px; } /* পরে p আছে — margin কম */
h2:not(:has(+ p)) { margin-bottom: 24px; } /* পরে p নেই — margin বেশি */
/* Figure-এ figcaption থাকলে */
figure:has(figcaption) img {
border-radius: 8px 8px 0 0; /* নিচে Caption আছে */
}
figure:not(:has(figcaption)) img {
border-radius: 8px; /* নিচে Caption নেই — গোল */
}
/* li-তে ul থাকলে — Nested */
li:has(ul) > a {
font-weight: 600; /* Sub-menu আছে — Bold */
}
li:has(ul) > a::after {
content: " ▾"; /* Dropdown indicator */
}
✅ :has()-এর সেরা ব্যবহার:
Form validation state (input:invalid, :checked) +
Content-নির্ভর Layout (img আছে কিনা) +
Empty element লুকানো +
Navigation active state +
সন্তান সংখ্যায় Grid layout পরিবর্তন।
🔷 ৪. :where() — Specificity-মুক্ত :is()
:where() ঠিক :is()-এর মতো কাজ করে —
তবে Specificity সবসময় (0,0,0)।
CSS Reset ও Base Style-এ ব্যবহার করলে যেকোনো জায়গায় সহজে override করা যায়।
/* :where() — Specificity = 0 */
/* CSS Reset — সহজে override যোগ্য */
:where(h1, h2, h3, h4, h5, h6) {
margin: 0;
line-height: 1.2;
}
/* যেকোনো simple selector override করতে পারবে */
.page h1 { margin-bottom: 24px; } /* (0,1,1) > (0,0,0) — জেতে ✅ */
/* :is() বনাম :where() Specificity */
:is(h1, .heading) { color: blue; } /* (0,1,0) — .heading-এর মান */
:where(h1, .heading) { color: blue; } /* (0,0,0) — সবসময় ০ */
/* কোনো p-ই override করতে পারবে */
p { color: red; } /* (0,0,1) — :where()-এর (0,0,0)-এর চেয়ে বেশি */
/* Base Button Style — সহজে override */
:where(button, [role="button"]) {
cursor: pointer;
border: none;
background: transparent;
font-family: inherit;
font-size: inherit;
padding: 0;
}
/* Component Class দিয়ে সহজে override */
.btn { padding: 12px 24px; background: #3b82f6; color: white; }
/* Form Reset */
:where(input, textarea, select, button) {
font: inherit; /* font inherit করা */
color: inherit;
margin: 0;
padding: 0;
border: 0;
background: none;
appearance: none;
}
/* Link Reset */
:where(a) {
color: inherit;
text-decoration: none;
}
/* নির্দিষ্ট style-এ override */
.content a { color: #3b82f6; text-decoration: underline; }
:is() বনাম :where() বনাম :not() — পার্থক্য তুলনা
| Function | Match | Specificity | সেরা ব্যবহার |
|---|---|---|---|
:is() |
যেকোনো একটি match হলে | সবচেয়ে নির্দিষ্ট argument | Component Style, State |
:where() |
যেকোনো একটি match হলে | সবসময় 0 ✅ | Reset, Base Style, Framework |
:not() |
কোনোটি match না হলে | argument-এর মান | বাদ দিয়ে, Separator |
:has() |
সন্তান/sibling match হলে | argument-এর মান | Parent Selector, Layout |
🔷 ৫. :nth-child() ও সংখ্যাভিত্তিক Selector
:nth-child() — সংখ্যা অনুযায়ী nth-child
/* :nth-child(formula) */
/* নির্দিষ্ট সংখ্যা */
li:nth-child(1) { /* প্রথম */ }
li:nth-child(3) { /* তৃতীয় */ }
li:nth-child(-n+3) { /* প্রথম তিনটি */ }
li:nth-child(n+4) { /* চতুর্থ থেকে শেষ পর্যন্ত */ }
/* জোড় ও বিজোড় */
tr:nth-child(even) { background-color: #f8fafc; } /* Zebra Striping */
tr:nth-child(odd) { background-color: white; }
tr:nth-child(2n) { background-color: #f8fafc; } /* even-এর সমতুল্য */
tr:nth-child(2n+1) { background-color: white; } /* odd-এর সমতুল্য */
/* প্রতি তিনটি */
li:nth-child(3n) { color: #3b82f6; } /* 3, 6, 9, 12... */
li:nth-child(3n+1) { font-weight: bold; } /* 1, 4, 7, 10... */
/* শেষ থেকে গণনা */
li:nth-last-child(1) { /* শেষেরটি */ }
li:nth-last-child(2) { /* শেষ থেকে দ্বিতীয় */ }
li:nth-last-child(-n+3) { /* শেষ তিনটি */ }
/* আধুনিক: of syntax — নির্দিষ্ট class-এর মধ্যে n-তম */
/* Chrome 111+ */
li:nth-child(2 of .featured) { /* .featured-এর মধ্যে ২য় */ }
/* Stagger Animation-এ */
.item:nth-child(1) { animation-delay: 0ms; }
.item:nth-child(2) { animation-delay: 100ms; }
.item:nth-child(3) { animation-delay: 200ms; }
:nth-of-type() — ধরন অনুযায়ী nth-of-type
/* :nth-of-type() — ঐ type-এর মধ্যে n-তম */
/* article-এর মধ্যে প্রতিটি p আলাদাভাবে */
p:nth-of-type(1) { font-size: 1.1rem; font-weight: 500; } /* প্রথম p */
p:nth-of-type(2) { font-style: italic; } /* দ্বিতীয় p */
/* Mixed content-এ p ও h2 একসাথে */
.content h2 { font-size: 1.5rem; }
.content p { line-height: 1.7; }
/* h2 ও p-র মাঝে img থাকলেও গণনা আলাদা */
.content p:first-of-type { font-size: 1.1rem; } /* প্রথম p বড় */
/* :nth-child বনাম :nth-of-type */
/*
*/
/* :first-child, :last-child, :only-child */
li:first-child { border-radius: 8px 8px 0 0; }
li:last-child { border-radius: 0 0 8px 8px; }
li:only-child { border-radius: 8px; } /* একটিমাত্র */
/* :first-of-type, :last-of-type */
p:first-of-type { margin-top: 0; }
p:last-of-type { margin-bottom: 0; }
প্রথম
— p:nth-of-type(1), p:nth-child(1) span — span, nth-child(2)দ্বিতীয়
— p:nth-of-type(2), p:nth-child(3)অন্যান্য Pseudo-class Selector অন্যান্য
/* Structural Selectors */
:empty { display: none; } /* কন্টেন্ট নেই এমন */
:blank { /* Whitespace-only */ }
:root { /* html element */ }
/* Form State Selectors */
:checked { /* Checkbox/Radio checked */ }
:unchecked { /* Checked নয় */ }
:disabled { opacity: 0.5; cursor: not-allowed; }
:enabled { /* Disabled নয় */ }
:read-only { background-color: #f8fafc; }
:read-write { background-color: white; }
:required { border-left: 3px solid #ef4444; }
:optional { /* Required নয় */ }
:valid { border-color: #22c55e; }
:invalid { border-color: #ef4444; }
:placeholder-shown { /* Placeholder দেখা যাচ্ছে — input খালি */ }
:focus-within { /* এলিমেন্টের যেকোনো সন্তানে focus */ }
:focus-visible { /* Keyboard focus — mouse-এ নয় */ }
:indeterminate { /* Checkbox-এর indeterminate state */ }
:default { /* Default form element */ }
:in-range { /* Range input-এর মধ্যে */ }
:out-of-range { /* Range-এর বাইরে */ }
:autofill { /* Browser autofill করেছে */ }
/* Link Selectors */
:link { color: #3b82f6; } /* Unvisited */
:visited { color: #8b5cf6; } /* Visited */
/* Tree Structural */
:scope { /* Reference element */ }
:host { /* Shadow DOM host */ }
:root { /* Document root */ }
🔷 দ্রুত রেফারেন্স — Selector Functions
| Selector | কাজ | উদাহরণ |
|---|---|---|
:is(A, B) |
A বা B match হলে | :is(h1,h2,h3) a |
:not(A, B) |
A ও B match না হলে | li:not(:last-child) |
:has(A) |
A সন্তান/sibling থাকলে | .card:has(img) |
:where(A, B) |
A বা B match, Specificity=0 | :where(h1,h2) { margin:0 } |
:nth-child(n) |
n-তম সন্তান | tr:nth-child(even) |
:nth-of-type(n) |
ঐ type-এর n-তম | p:nth-of-type(1) |
:first-child |
প্রথম সন্তান | li:first-child |
:last-child |
শেষ সন্তান | li:last-child |
:focus-visible |
Keyboard focus | .btn:focus-visible |
:focus-within |
সন্তানে focus | .form:focus-within |
:empty |
কন্টেন্ট নেই | .badge:empty { display:none } |
:placeholder-shown |
Input খালি | input:placeholder-shown |
✅ Selector Function-এর সোনালি নিয়ম:
পুনরাবৃত্তি কমাতে →
পুনরাবৃত্তি কমাতে →
:is() +
Reset/Base Style-এ → :where() (Specificity 0) +
বাদ দিতে → :not() +
Parent Selector দরকার → :has() +
Keyboard Accessibility → :focus-visible ব্যবহার করো, :focus নয়।
🔢 CSS Functions — সম্পূর্ণ নোট
এই সেকশনে CSS-এর সব Built-in Function — Math, Color, Gradient, Shape, Grid, Transform, Filter, Variable, Image, Timing এবং Content Function প্রতিটি বাস্তব উদাহরণ সহ বিস্তারিত বোঝানো হয়েছে।
🔷 CSS Function — এক নজরে
CSS Function হলো CSS-এ built-in গণনা ও প্রক্রিয়াকরণের পদ্ধতি।
name(argument) আকারে CSS Property-র মান হিসেবে ব্যবহার হয়।
ফাংশনগুলো নেস্ট করা যায় — একটির মধ্যে আরেকটি।
| ধরন | প্রধান Functions | কোথায় ব্যবহার |
|---|---|---|
| Math |
calc, min, max, clamp, round, mod, rem, abs, sin, cos, tan, pow, sqrt, log, exp, sign, hypot, atan2
|
যেকোনো সংখ্যামূলক property |
| Color | rgb, hsl, hwb, lab, lch, oklab, oklch, color, color-mix |
color, background-color, border-color |
| Gradient | linear-gradient, radial-gradient, conic-gradient, repeating-* |
background-image |
| Shape | circle, ellipse, polygon, inset, path, xywh, rect |
clip-path, shape-outside, offset-path |
| Grid | repeat, minmax, fit-content |
grid-template-columns/rows |
| Transform | translate, rotate, scale, skew, perspective, matrix, rotate3d |
transform |
| Filter |
blur, brightness, contrast, grayscale, sepia, hue-rotate, invert, saturate, opacity, drop-shadow
|
filter, backdrop-filter |
| Variable | var, env |
যেকোনো property |
| Content | attr, counter, counters, format, symbols |
content, list-style-type |
| Image | url, image-set, cross-fade, element, image |
background-image, content |
| Timing | cubic-bezier, steps, linear |
transition-timing-function, animation-timing-function |
🔷 ১. Math Functions — গণনা
① calc() — মিশ্র একক গণনা calc()
/* calc(expression) */
/* মিশ্র একক — calc()-এর সবচেয়ে শক্তিশালী দিক */
.el { width: calc(100% - 240px); } /* Parent - Sidebar */
.el { padding: calc(var(--space) * 2); } /* Variable গুণ */
.el { min-height: calc(100dvh - 64px); } /* Full screen - Navbar */
.el { font-size: calc(1rem + 0.5vw); } /* Fixed + Fluid */
.el { gap: calc(var(--grid-gap) / 2); } /* Variable ভাগ */
/* ⚠️ নিয়ম: + ও - এর দুপাশে space অবশ্যই */
.el { width: calc(100% - 20px); } /* ✅ */
.el { width: calc(100%-20px); } /* ❌ কাজ করে না */
/* * ও / এ space ঐচ্ছিক */
.el { width: calc(100% / 3); } /* ✅ */
/* Nested calc */
.el { width: calc((100% - 48px) / 3); } /* ✅ nested ছাড়াই */
/* বাস্তব Pattern */
/* Full-bleed — Container ভেঙে পূর্ণ প্রস্থ */
.full-bleed {
width: 100vw;
margin-inline: calc(50% - 50vw);
}
/* Equal columns — gap বাদ দিয়ে */
.col-3 { width: calc((100% - 2 * var(--gap)) / 3); }
/* Sticky Sidebar height */
.sidebar {
max-height: calc(100vh - var(--navbar-height) - 2 * var(--page-padding));
overflow-y: auto;
}
/* CSS Grid-এ calc */
.grid { grid-template-columns: calc(var(--sidebar-width)) 1fr; }
/* Relative color-mix-এ calc */
.el { opacity: calc(var(--base-opacity) * 0.8); }
/* Clamp-এর ভেতরে calc */
h1 { font-size: clamp(1.5rem, calc(1rem + 3vw), 4rem); }
② min(), max(), clamp() — তুলনামূলক গণনা Comparison
/* min(a, b, ...) — সবচেয়ে ছোট মান */
.container { width: min(100%, 1280px); } /* max-width বিকল্প ✅ */
.img { width: min(400px, 100%); } /* ছবি কখনো parent ছাড়াবে না */
.font { font-size: min(5vw, 2rem); } /* বড় screen-এ সীমাবদ্ধ */
.el { padding: min(5%, 40px); }
/* একাধিক */
.el { width: min(100%, 600px, 80vw); } /* তিনটির মধ্যে সবচেয়ে ছোট */
/* max(a, b, ...) — সবচেয়ে বড় মান */
.el { padding: max(16px, 5%); } /* ন্যূনতম 16px ✅ */
.hero{ min-height: max(400px, 50vh); } /* দুটির মধ্যে বড়টি */
.txt { font-size: max(1rem, 0.5vw + 0.8rem); } /* ন্যূনতম 1rem */
/* একাধিক */
.el { margin: max(8px, 2%, 1rem); }
/* clamp(min, preferred, max) — সবচেয়ে বেশি ব্যবহৃত ✅ */
/* preferred = fluid মান (vw, %, calc) হওয়া উচিত */
/* Fluid Typography */
h1 { font-size: clamp(1.75rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 2rem); }
p { font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem); }
/* Fluid Spacing */
.section { padding-block: clamp(48px, 10vw, 120px); }
.hero { padding-inline: clamp(16px, 5vw, 80px); }
.grid { gap: clamp(12px, 3vw, 32px); }
/* Fluid Width */
.card { width: clamp(280px, 40%, 480px); }
.container { width: clamp(320px, 90%, 1280px); }
.sidebar { width: clamp(200px, 20vw, 300px); }
/* clamp() = max(min, min(preferred, max)) */
/* clamp(16px, 5vw, 48px) ↔ max(16px, min(5vw, 48px)) */
/* Nested — min, max, clamp একসাথে */
.el { width: max(min(100%, 800px), 320px); }
/* সর্বোচ্চ 800px, সর্বনিম্ন 320px */
/* Media Query ছাড়া Responsive Container */
.container {
width: min(100% - 32px, 1280px); /* padding ও max-width একসাথে ✅ */
margin-inline: auto;
}
③ Advanced Math — round(), mod(), abs(), Trigonometry Advanced Math
/* round(strategy, value, step) — গোলাকার */
/* strategy: nearest (ডিফল্ট), up, down, to-zero */
.el { width: round(nearest, 33.33%, 1px); } /* নিকটতম 1px-এ */
.el { width: round(up, 33.33%, 10px); } /* উপরে গোল করা */
.el { font-size: round(nearest, 1.333rem, 0.25rem); } /* Scale-এ */
/* mod(a, b) — ভাগশেষ */
.el { rotate: mod(540deg, 360deg); } /* 180deg */
.el { --hue: mod(var(--base-hue) + 30, 360); } /* Color Wheel */
/* rem(a, b) — ভাগশেষ (বিকল্প) */
.el { width: rem(100%, 30px); }
/* abs(value) — পরম মান */
.el { margin: abs(var(--offset, -20px)); } /* সবসময় ধনাত্মক */
.el { width: abs(calc(var(--a) - var(--b))); } /* পার্থক্যের পরম মান */
/* sign(value) */
.el { --direction: sign(var(--offset)); } /* 1, -1, বা 0 */
/* Trigonometry — বৃত্তাকার Layout */
/* প্রতিটি item বৃত্তের উপর সমান ব্যবধানে */
:root { --count: 6; --radius: 120px; }
.orbit-item {
--angle: calc(var(--i) / var(--count) * 360deg);
position: absolute;
left: calc(50% + var(--radius) * cos(var(--angle)) - 20px);
top: calc(50% + var(--radius) * sin(var(--angle)) - 20px);
}
/* HTML: style="--i: 0", style="--i: 1" ... */
/* pow(base, exp) — ঘাত */
.el { font-size: calc(pow(1.25, var(--level)) * 1rem); }
/* Modular Scale: 1rem, 1.25rem, 1.5625rem... */
/* sqrt() — বর্গমূল */
.el { width: calc(sqrt(2) * 100px); } /* ≈ 141.4px */
/* hypot(a, b) — কর্ণ */
.diagonal { width: hypot(3px, 4px); } /* 5px */
/* log() ও exp() */
.el { opacity: calc(exp(calc(-1 * var(--depth)))); } /* Exponential falloff */
🔷 ২. Color Functions — রঙ তৈরি
① rgb(), hsl(), hwb() — ক্লাসিক Color Function rgb hsl hwb
/* rgb(red green blue / alpha) */
/* মান: 0-255 বা 0%-100% */
.el { color: rgb(59, 130, 246); } /* কমা — পুরনো */
.el { color: rgb(59 130 246); } /* স্পেস — আধুনিক ✅ */
.el { color: rgb(59 130 246 / 0.8); } /* Alpha: 0-1 */
.el { color: rgb(59 130 246 / 80%); } /* Alpha: % */
.el { color: rgb(23% 51% 96%); } /* % মান */
.el { color: rgba(59, 130, 246, 0.5); } /* পুরনো alpha */
/* hsl(hue saturation lightness / alpha) */
/* hue: 0-360deg, sat: 0-100%, lit: 0-100% */
.el { color: hsl(220, 90%, 56%); } /* কমা — পুরনো */
.el { color: hsl(220 90% 56%); } /* স্পেস — আধুনিক ✅ */
.el { color: hsl(220 90% 56% / 0.8); } /* Alpha */
.el { color: hsl(220deg 90% 56%); } /* deg স্পষ্ট */
.el { color: hsl(0.611turn 90% 56%); } /* turn একক */
/* Dynamic HSL — Variable দিয়ে */
:root { --hue: 220; --sat: 90%; --lit: 56%; }
.primary { color: hsl(var(--hue) var(--sat) var(--lit)); }
.primary-light { color: hsl(var(--hue) var(--sat) 80%); } /* Tint */
.primary-dark { color: hsl(var(--hue) var(--sat) 30%); } /* Shade */
/* hwb(hue whiteness blackness / alpha) */
/* hue: 0-360deg, white: 0-100%, black: 0-100% */
/* Designers-এর কাছে সহজবোধ্য */
.el { color: hwb(220 10% 0%); } /* নীল — ১০% সাদা মেশানো */
.el { color: hwb(220 0% 40%); } /* নীল — ৪০% কালো মেশানো */
.el { color: hwb(0 0% 0%); } /* বিশুদ্ধ লাল */
.el { color: hwb(220 50% 50%); } /* ধূসর — সমান সাদা ও কালো */
② oklab(), oklch(), lab(), lch() — আধুনিক Perceptual Color oklab oklch
/* oklch(lightness chroma hue / alpha) */
/* lightness: 0(কালো) - 1(সাদা) */
/* chroma: 0(ধূসর) - 0.4(বিশুদ্ধ রঙ) */
/* hue: 0-360deg */
.el { color: oklch(0.60 0.20 250); } /* নীল */
.el { color: oklch(0.60 0.20 25); } /* লাল */
.el { color: oklch(0.60 0.20 145); } /* সবুজ */
.el { color: oklch(0.60 0.20 300); } /* বেগুনী */
.el { color: oklch(0.60 0.20 250 / 0.8); } /* আধা-স্বচ্ছ */
.el { color: oklch(none 0.20 250); } /* none = missing component */
/* oklch Shade System — একই Hue, Lightness পরিবর্তন */
:root {
--primary-50: oklch(0.97 0.03 250);
--primary-100: oklch(0.93 0.07 250);
--primary-200: oklch(0.87 0.11 250);
--primary-300: oklch(0.78 0.15 250);
--primary-400: oklch(0.68 0.18 250);
--primary-500: oklch(0.58 0.20 250); /* Base */
--primary-600: oklch(0.48 0.19 250);
--primary-700: oklch(0.38 0.17 250);
--primary-800: oklch(0.28 0.13 250);
--primary-900: oklch(0.18 0.08 250);
}
/* oklab(lightness a-axis b-axis / alpha) */
/* a: -0.4(সবুজ) - +0.4(লাল) */
/* b: -0.4(নীল) - +0.4(হলুদ) */
.el { color: oklab(0.60 -0.10 0.10); } /* সবুজাভ-হলুদ */
.el { color: oklab(0.60 0.10 -0.10); } /* লালাভ-নীল */
/* lab(lightness a-axis b-axis / alpha) */
/* lightness: 0-100 */
.el { color: lab(50 20 -30); }
/* lch(lightness chroma hue / alpha) */
.el { color: lch(50 40 250); }
.el { color: lch(50 40 250 / 0.7); }
③ color(), color-mix() এবং Relative Color Syntax color color-mix
/* color(colorspace r g b / alpha) — Wide Gamut */
/* Display P3 — iPhone/Mac-এর wider color gamut */
.el { color: color(display-p3 0.50 0.20 0.80); }
.el { color: color(display-p3 0.50 0.20 0.80 / 0.8); }
.el { color: color(srgb 0.23 0.51 0.96); } /* 0-1 range */
.el { color: color(srgb-linear 0.05 0.26 0.92); }
.el { color: color(a98-rgb 0.40 0.20 0.70); } /* Adobe RGB */
.el { color: color(rec2020 0.35 0.15 0.65); } /* Ultra HD */
.el { color: color(xyz 0.20 0.15 0.65); } /* XYZ color space */
/* Fallback দিয়ে */
@supports (color: color(display-p3 0 0 0)) {
.vivid { color: color(display-p3 0.80 0.20 0.20); }
}
/* color-mix(in colorspace, color1 %, color2 %) */
/* Chrome 111+, Firefox 113+, Safari 16.2+ */
/* Tint — সাদা মেশানো (হালকা) */
.tint-20 { color: color-mix(in srgb, #3b82f6 80%, white); }
.tint-40 { color: color-mix(in srgb, #3b82f6 60%, white); }
.tint-60 { color: color-mix(in srgb, #3b82f6 40%, white); }
/* Shade — কালো মেশানো (গাঢ়) */
.shade-20 { color: color-mix(in srgb, #3b82f6 80%, black); }
.shade-40 { color: color-mix(in srgb, #3b82f6 60%, black); }
/* দুটি রঙ মেশানো */
.mixed { background: color-mix(in srgb, #3b82f6, #8b5cf6); }
.warm { background: color-mix(in oklch, #ef4444, #f59e0b); } /* oklch-এ সুন্দর */
/* Variable দিয়ে Dynamic */
.btn:hover {
background: color-mix(in srgb, var(--btn-bg) 85%, black);
}
.subtle-bg {
background: color-mix(in srgb, var(--color-primary), transparent 80%);
}
/* Opacity variant */
.el-10 { background: color-mix(in srgb, #3b82f6 10%, transparent); }
.el-25 { background: color-mix(in srgb, #3b82f6 25%, transparent); }
/* Relative Color Syntax — Chrome 119+, Safari 16.4+ */
/* color(from base-color colorspace channel1 channel2 channel3) */
/* hsl-এর Lightness বদলানো */
:root { --primary: hsl(220 90% 56%); }
.lighter { color: hsl(from var(--primary) h s calc(l + 20%)); }
.darker { color: hsl(from var(--primary) h s calc(l - 20%)); }
.muted { color: hsl(from var(--primary) h calc(s - 30%) l); }
/* oklch-এর Chroma বদলানো */
.el { color: oklch(from var(--primary) l calc(c * 0.5) h); } /* কম vibrant */
/* Alpha পরিবর্তন */
.el { color: rgb(from var(--color) r g b / 0.5); } /* ৫০% স্বচ্ছ */
/* সব channel বদলানো */
.complement {
color: hsl(from var(--primary) calc(h + 180deg) s l); /* Complementary রঙ */
}
.analogous-1 {
color: hsl(from var(--primary) calc(h + 30deg) s l); /* Analogous */
}
.analogous-2 {
color: hsl(from var(--primary) calc(h - 30deg) s l);
}
🔷 ৩. Gradient Functions — রঙের ধাপ
① linear-gradient() — সরল রেখায় linear-gradient
/* linear-gradient(direction, color-stop1, color-stop2, ...) */
/* Direction */
.el { background: linear-gradient(to right, red, blue); } /* বাম→ডান */
.el { background: linear-gradient(to bottom, red, blue); } /* উপর→নিচ */
.el { background: linear-gradient(to top right, red, blue); } /* কোণাকুণি */
.el { background: linear-gradient(45deg, red, blue); } /* ডিগ্রি */
.el { background: linear-gradient(0.25turn, red, blue); } /* turn একক */
/* Color Stop */
.el { background: linear-gradient(red, blue); } /* ডিফল্ট: top→bottom */
.el { background: linear-gradient(red 0%, blue 100%); } /* নির্দিষ্ট % */
.el { background: linear-gradient(red 0%, yellow 30%, blue 100%); } /* তিনটি রঙ */
/* Hint (midpoint) — রঙের মাঝের বিন্দু */
.el { background: linear-gradient(red, 30%, blue); } /* মাঝের বিন্দু ৩০% */
/* Hard Stop — ধারালো পরিবর্তন */
.el { background: linear-gradient(red 50%, blue 50%); } /* ঠিক মাঝখানে */
.el { background: linear-gradient(red 0 50%, blue 50% 100%); } /* দুটি band */
/* জনপ্রিয় Gradient */
.sunset { background: linear-gradient(135deg, #f5a623, #e63946); }
.ocean { background: linear-gradient(180deg, #0099f7, #f11712); }
.violet { background: linear-gradient(90deg, #7b2ff7, #f107a3); }
.aurora { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.dark { background: linear-gradient(180deg, #1a1a2e, #16213e, #0f3460); }
/* Gradient Text ✅ */
.gradient-text {
background: linear-gradient(90deg, #e63946, #3b82f6);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
/* Hero Overlay */
.hero-overlay {
background: linear-gradient(
to bottom,
transparent 0%,
rgba(0,0,0,0.3) 50%,
rgba(0,0,0,0.8) 100%
);
}
/* Diagonal Stripe Pattern */
.stripe {
background: repeating-linear-gradient(
45deg,
#f0f0f0,
#f0f0f0 10px,
white 10px,
white 20px
);
}
/* Dot Grid Pattern */
.grid-pattern {
background:
linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
background-size: 20px 20px;
}
② radial-gradient() ও conic-gradient() radial conic
/* radial-gradient(shape size at position, colors) */
.el { background: radial-gradient(circle, red, blue); }
.el { background: radial-gradient(ellipse, red, blue); }
.el { background: radial-gradient(circle at center, red, blue); } /* ডিফল্ট */
.el { background: radial-gradient(circle at top left, red, blue); } /* কোণে */
.el { background: radial-gradient(circle at 30% 70%, red, blue); } /* % অবস্থান */
/* Size কীওয়ার্ড */
.el { background: radial-gradient(circle closest-side, red, blue); }
.el { background: radial-gradient(circle farthest-corner, red, blue); }
.el { background: radial-gradient(circle 100px, red, blue); } /* px */
.el { background: radial-gradient(ellipse 80% 60%, red, blue); }
/* Glow Effect */
.glow {
background: radial-gradient(
circle at center,
rgba(59,130,246,0.4) 0%,
rgba(59,130,246,0) 70%
);
}
/* Spotlight */
.spotlight {
background: radial-gradient(
ellipse 60% 50% at 50% 40%,
rgba(255,255,255,0.15),
transparent
);
}
/* Repeating Radial */
.rings {
background: repeating-radial-gradient(
circle at center,
#1d3557,
#1d3557 10px,
white 10px,
white 20px
);
}
/* conic-gradient(from angle at position, colors) */
.el { background: conic-gradient(red, blue); }
.el { background: conic-gradient(from 0deg, red, yellow, green, blue, red); }
.el { background: conic-gradient(from 45deg, red, blue); } /* 45° থেকে শুরু */
.el { background: conic-gradient(from 0deg at 30% 50%, red, blue); } /* অবস্থান */
/* Pie Chart */
.pie {
background: conic-gradient(
#e63946 0% 30%, /* ৩০% লাল */
#3b82f6 30% 65%, /* ৩৫% নীল */
#22c55e 65% 100% /* ৩৫% সবুজ */
);
border-radius: 50%;
width: 200px; height: 200px;
}
/* Color Wheel */
.color-wheel {
background: conic-gradient(
hsl(0deg, 100%, 50%),
hsl(60deg, 100%, 50%),
hsl(120deg, 100%, 50%),
hsl(180deg, 100%, 50%),
hsl(240deg, 100%, 50%),
hsl(300deg, 100%, 50%),
hsl(360deg, 100%, 50%)
);
border-radius: 50%;
}
/* Angular Loading Spinner */
.spinner-ring {
background: conic-gradient(
from 0deg,
transparent 0deg 270deg,
#3b82f6 270deg 360deg
);
border-radius: 50%;
-webkit-mask: radial-gradient(farthest-side, transparent 60%, black 61%);
}
🔷 ৪. Shape Functions — আকৃতি নির্ধারণ
/* Shape Functions — clip-path, shape-outside, offset-path-এ */
/* circle(radius at cx cy) */
.el { clip-path: circle(50%); } /* মাঝখান থেকে ৫০% */
.el { clip-path: circle(80px); } /* ৮০px radius */
.el { clip-path: circle(40% at 50% 50%); } /* কেন্দ্র নির্দিষ্ট */
.el { clip-path: circle(50% at top center); } /* কীওয়ার্ড */
/* ellipse(rx ry at cx cy) */
.el { clip-path: ellipse(50% 30%); }
.el { clip-path: ellipse(150px 100px at 50% 50%); }
.el { clip-path: ellipse(50% 40% at center); }
/* polygon(x1 y1, x2 y2, ...) */
.triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.arrow-right { clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); }
.diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.chevron { clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%); }
.notch-card { clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
.parallelogram{ clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%); }
/* inset(top right bottom left round border-radius) */
.el { clip-path: inset(10px); } /* চারদিকে ১০px */
.el { clip-path: inset(10px 20px); } /* উপর-নিচ | বাম-ডান */
.el { clip-path: inset(10px round 16px); } /* গোল কোণ সহ */
.el { clip-path: inset(0 0 50% 0); } /* নিচের অর্ধেক কাটা */
.el { clip-path: inset(20% round 10px 20px 30px 40px); }/* আলাদা radius */
/* path() — SVG path string */
.el { clip-path: path("M 0 0 L 100 0 L 100 80 Q 50 100 0 80 Z"); }
.el { clip-path: path("M50 0 A50 50 0 1 1 50 0.001"); } /* বৃত্ত */
/* xywh() — x, y, width, height */
.el { clip-path: xywh(10px 10px 80% 80% round 8px); } /* Chrome 111+ */
/* rect() — logical coordinates */
.el { clip-path: rect(10px 90% 90% 10px round 8px); }
/* Animate clip-path */
.reveal {
clip-path: inset(0 100% 0 0); /* 처음에 오른쪽이 막혀 있음 */
transition: clip-path 0.6s ease-out;
}
.reveal.visible {
clip-path: inset(0 0% 0 0); /* 완전히 보임 */
}
/* shape-outside — Float Text Wrap */
.avatar {
float: left;
width: 200px; height: 200px;
shape-outside: circle(50%);
shape-margin: 16px;
clip-path: circle(50%);
}
.polygon-float {
float: left;
shape-outside: polygon(0 0, 100% 0, 60% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%);
width: 200px; height: 300px;
}
🔷 ৫. Grid Functions — Track তৈরি
/* repeat(count, track-size) */
/* নির্দিষ্ট সংখ্যা */
.grid { grid-template-columns: repeat(3, 1fr); }
.grid { grid-template-columns: repeat(4, 200px); }
.grid { grid-template-columns: repeat(12, 1fr); } /* 12-column system */
.grid { grid-template-columns: repeat(3, 1fr 2fr); } /* Pattern: 1fr 2fr 1fr 2fr 1fr 2fr */
/* auto-fill ও auto-fit — Responsive Grid */
.grid { grid-template-columns: repeat(auto-fill, 200px); }
/* Container-এ যতটি ২০০px column ধরে, ততটি */
.grid { grid-template-columns: repeat(auto-fit, 200px); }
/* auto-fill-এর মতো, কিন্তু খালি column collapse হয় */
/* minmax() — Responsive-র মূল কৌশল */
.grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
/* ন্যূনতম ২৮০px, সর্বোচ্চ 1fr — Breakpoint ছাড়া Responsive ✅ */
}
/* RAM Pattern — সবচেয়ে শক্তিশালী ✅ */
.grid {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
/* min(100%, 280px) — overflow ছাড়া সঠিক */
}
/* minmax(min, max) — track-এর সীমা */
.grid { grid-template-columns: minmax(200px, 1fr) 1fr; }
.grid { grid-template-columns: minmax(0, 1fr); } /* overflow ঠেকাতে */
.grid { grid-template-rows: minmax(100px, auto); } /* Row ন্যূনতম ১০০px */
/* max-এ fr দেওয়া যায়, min-এ fr দেওয়া যায় না */
/* fit-content(max) — কন্টেন্ট অনুযায়ী, সীমা আছে */
.grid { grid-template-columns: fit-content(300px) 1fr; }
/* = min(max-content, max(auto, 300px)) */
/* কন্টেন্ট অনুযায়ী, সর্বোচ্চ ৩০০px */
/* Complex Layout */
.dashboard {
grid-template-columns:
[sidebar-start] 260px [sidebar-end main-start]
minmax(0, 1fr)
[main-end aside-start] minmax(0, 200px) [aside-end];
}
/* Named Line দিয়ে */
.layout {
grid-template-columns: [left] 1fr [center] 2fr [right] 1fr [end];
}
🔷 ৬. Variable ও Reference Functions
① var() — CSS Variable ব্যবহার var()
/* var(--variable, fallback) */
/* সহজ ব্যবহার */
.el { color: var(--color-primary); }
/* Fallback — Variable না থাকলে */
.el { color: var(--color-custom, #3b82f6); }
/* Nested Fallback */
.el { color: var(--color-brand, var(--color-primary, #3b82f6)); }
/* Computed Value-এ */
.el { padding: calc(var(--space-4) * 2); }
.el { background: hsl(var(--hue) var(--sat) var(--lit)); }
.el { font-size: clamp(var(--text-sm), 3vw, var(--text-xl)); }
/* Property-র অংশ হিসেবে */
.el { border: var(--border-width) var(--border-style) var(--color-border); }
.el { box-shadow: 0 var(--shadow-y) var(--shadow-blur) var(--shadow-color); }
/* Animation-এ */
.el { animation-duration: var(--duration-base); }
.el { transition: transform var(--duration-fast) var(--ease-out); }
/* কাজ করে না */
.el { var(--property): red; } /* Property name হিসেবে নয় */
.el { background: var(--number)px; } /* শুধু number-এ suffix নয় */
/* সমাধান: পুরো মান variable-এ */
:root { --size: 20px; }
.el { width: var(--size); } /* ✅ */
② env() — Environment Variable env()
/* env(variable, fallback) — Browser/Device Variable */
/* Safe Area — iPhone Notch ও Home Indicator */
.app-header {
padding-top: env(safe-area-inset-top, 0px); /* Status bar */
}
.app-footer {
padding-bottom: env(safe-area-inset-bottom, 16px); /* Home indicator */
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
}
/* Full padding সহ */
.sticky-bottom {
bottom: 0;
padding: 16px;
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
/* PWA Titlebar */
.titlebar {
height: env(titlebar-area-height, 32px);
width: env(titlebar-area-width, 100%);
left: env(titlebar-area-x, 0);
top: env(titlebar-area-y, 0);
position: absolute;
app-region: drag;
}
/* Virtual Keyboard */
@media (height < env(keyboard-inset-height, 0px)) { .input-panel { transform: translateY(calc(-1 *
env(keyboard-inset-height))); } }
③ attr() — HTML Attribute থেকে মান attr()
/* attr(attribute-name type, fallback) */
/* content-এ — নির্ভরযোগ্য */
/* HTML: <button data-count="5">Like</button> */
.btn[data-count]::after {
content: " (" attr(data-count) ")"; /* "Like (5)" */
}
/* Tooltip */
/* HTML: <abbr title="CSS Cascading Style Sheets">CSS</abbr> */
abbr[title] {
position: relative;
text-decoration: underline dotted;
}
abbr[title]:hover::after {
content: attr(title);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #1e293b;
color: white;
padding: 4px 10px;
border-radius: 4px;
font-size: 0.75rem;
white-space: nowrap;
}
/* data-tooltip */
/* HTML: <span data-tooltip="আরও তথ্য"> */
[data-tooltip]::after { content: attr(data-tooltip); }
/* Responsive Table */
/* HTML: <td data-label="নাম">Farid</td> */
@media (max-width: 640px) {
td::before { content: attr(data-label) ": "; font-weight: 600; }
}
/* Typed attr() — আসছে (আধুনিক CSS) */
/* .el { width: attr(data-width px); } -- type নির্দিষ্ট করা */
🔷 ৭. Content ও Counter Functions
/* counter(name, style) — CSS Counter */
/* ব্যবহারের ধাপ:
১. counter-reset = counter তৈরি বা শূন্যে সেট
২. counter-increment = প্রতিটি item-এ বাড়ানো
৩. content: counter() = দেখানো */
/* সহজ নম্বর */
.list { counter-reset: item; list-style: none; }
.list li { counter-increment: item; }
.list li::before {
content: counter(item) ". ";
}
/* Style পরিবর্তন */
.roman-list li::before {
content: counter(item, upper-roman) ". "; /* I. II. III. */
}
.alpha-list li::before {
content: counter(item, lower-alpha) ") "; /* a) b) c) */
}
/* Step Indicator */
.steps { counter-reset: step; }
.step { counter-increment: step; }
.step::before {
content: counter(step);
width: 32px; height: 32px;
display: inline-flex;
align-items: center; justify-content: center;
background: #3b82f6; color: white;
border-radius: 50%;
font-weight: 700;
font-size: 0.875rem;
}
/* counters(name, separator, style) — Nested Counter */
.toc { counter-reset: chapter; }
.chapter { counter-reset: section; counter-increment: chapter; }
.section { counter-reset: subsection; counter-increment: section; }
.subsection { counter-increment: subsection; }
.chapter::before {
content: counter(chapter) ". "; /* 1. 2. 3. */
}
.section::before {
content: counter(chapter) "." counter(section) " "; /* 1.1 1.2 */
}
.subsection::before {
content: counters(subsection, ".") " "; /* 1.1.1 1.1.2 */
}
/* counter() Style Options */
/* decimal, decimal-leading-zero, lower-alpha, upper-alpha */
/* lower-roman, upper-roman, lower-greek, bengali, devanagari */
/* disc, circle, square */
/* symbols() — Custom List Marker */
.custom-list {
list-style-type: symbols(cyclic "→" "•" "◦");
}
/* অথবা */
.check-list {
list-style-type: symbols(fixed "✓" "✗" "–");
}
/* format() — @font-face-এ */
@font-face {
font-family: 'Inter';
src: url('inter.woff2') format('woff2'),
url('inter.woff') format('woff'),
url('inter.ttf') format('truetype');
}
🔷 ৮. Image Functions — ছবি ও URL
/* url(path) — ফাইল reference */
.hero { background-image: url("images/hero.jpg"); }
.icon { background-image: url("icons/star.svg"); }
.cursor { cursor: url("cursor.cur"), auto; }
/* Absolute URL */
.el { background-image: url("https://example.com/bg.jpg"); }
/* Data URL — inline ছবি */
.el { background-image: url("data:image/svg+xml,..."); }
.el { background-image: url("data:image/png;base64,..."); }
/* SVG inline — background-image-এ */
.check::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24
24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
/* image-set() — Retina ও WebP সমর্থন */
.logo {
background-image: image-set(
url("logo.png") 1x, /* Normal screen */
url("logo@2x.png") 2x, /* Retina */
url("logo@3x.png") 3x /* 3x Retina */
);
}
/* WebP + JPEG fallback */
.hero {
background-image: image-set(
url("hero.webp") type("image/webp"), /* WebP সমর্থিত হলে */
url("hero.jpg") type("image/jpeg") /* Fallback */
);
}
/* AVIF + WebP + JPEG */
.el {
background-image: image-set(
url("img.avif") type("image/avif"),
url("img.webp") type("image/webp"),
url("img.jpg") 1x /* Fallback */
);
}
/* Resolution + Format */
.el {
background-image: image-set(
url("logo.avif") type("image/avif") 1x,
url("logo.avif") type("image/avif") 2x,
url("logo.png") 1x
);
}
/* -webkit- prefix (পুরনো Safari) */
.logo {
background-image: -webkit-image-set(url("logo.png") 1x, url("logo@2x.png") 2x);
background-image: image-set(url("logo.png") 1x, url("logo@2x.png") 2x);
}
/* cross-fade() — দুটি ছবি মেশানো */
.blend {
background-image: cross-fade(
url("image1.jpg") 60%,
url("image2.jpg") 40%
);
}
/* Animation-এ cross-fade */
.slideshow {
animation: fade-images 4s infinite;
}
@keyframes fade-images {
0%, 45% { background-image: cross-fade(url("a.jpg") 100%, url("b.jpg") 0%); }
55%, 100%{ background-image: cross-fade(url("a.jpg") 0%, url("b.jpg") 100%); }
}
/* element() — Firefox only */
/* .mirror { background: -moz-element(#original-element); } */
/* image() — Modern, limited support */
/* .el { background: image(url("bg.png"), red); } */
/* Fallback color সহ */
🔷 ৯. Timing Functions — Animation গতি
① cubic-bezier() — কাস্টম গতি বক্ররেখা cubic-bezier
/* cubic-bezier(x1, y1, x2, y2) */
/* চারটি control point — Bezier curve নির্ধারণ */
/* x: 0-1, y: যেকোনো (0-1 এর বাইরেও) */
/* পূর্বনির্ধারিত মানের সমতুল্য */
.ease { transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0); }
.linear { transition-timing-function: cubic-bezier(0, 0, 1, 1 ); }
.ease-in { transition-timing-function: cubic-bezier(0.42, 0, 1, 1 ); }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.58, 1 ); }
.ease-in-out { transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1 ); }
/* জনপ্রিয় Custom Easing */
/* Spring — overshoot effect */
.spring { transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
/* Material Design Standard */
.material-standard { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
/* Material Design Decelerate (Enter) */
.material-enter { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
/* Material Design Accelerate (Exit) */
.material-exit { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
/* Snappy — দ্রুত শুরু, ধীরে শেষ */
.snappy { transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
/* Anticipate — পেছনে গিয়ে সামনে আসে */
.anticipate { transition-timing-function: cubic-bezier(0.36, -0.64, 0.34, 1.56); }
/* Bounce */
.bounce { transition-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
/* Swoosh */
.swoosh { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
/* CSS Variable-এ রেখে পুনরব্যবহার */
:root {
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-snappy: cubic-bezier(0.2, 0, 0, 1);
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-enter: cubic-bezier(0, 0, 0.2, 1);
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
}
② steps() — ধাপে ধাপে পরিবর্তন steps()
/* steps(count, direction) */
/* count = ধাপের সংখ্যা */
/* direction: start, end (ডিফল্ট), none, both, jump-start, jump-end, jump-none, jump-both */
/* ৮ ধাপে — Sprite Animation */
.sprite {
animation: run 0.8s steps(8, end) infinite;
}
@keyframes run {
from { background-position: 0 0; }
to { background-position: -512px 0; } /* 8 × 64px */
}
/* Typewriter Effect */
.typewriter {
width: 0; overflow: hidden; white-space: nowrap;
border-right: 2px solid;
animation:
typing 3s steps(25, end) forwards,
blink 0.7s step-end infinite;
}
@keyframes typing { to { width: 25ch; } }
@keyframes blink { 50% { border-color: transparent; } }
/* steps() Shorthand */
/* step-start = steps(1, jump-start) */
/* step-end = steps(1, jump-end) */
/* Clock Animation */
.clock-second {
animation: tick 60s steps(60, end) infinite;
}
@keyframes tick {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Flip Book */
.flipbook {
animation: flip 3s steps(30) infinite;
}
/* Blinking Cursor */
.cursor {
animation: blink-cursor 1s step-end infinite;
}
@keyframes blink-cursor {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
③ linear() — Custom Easing Keyframe linear()
/* linear(output-value input-percentage, ...) */
/* Chrome 113+, Firefox 112+, Safari 17.2+ */
/* সহজ linear — পয়েন্ট দিয়ে কাস্টম curve */
.el { transition-timing-function: linear(0, 0.5, 1); } /* তিনটি পয়েন্ট */
/* Spring Effect — linear() দিয়ে ✅ */
.spring {
transition-timing-function: linear(
0,
0.009, 0.035 2.1%, 0.141,
0.281 6.7%, 0.723 12.9%,
0.938 16.7%, 1.04,
1.077 22.3%, 1.1 24.4%,
1.092, 1.066 29.4%,
1.008 35.4%, 0.985 37.8%,
0.985, 1.001 45.3%,
1 50%, 1 /* শেষে 1 */
);
}
/* Bounce Effect */
.bounce {
transition-timing-function: linear(
0,
0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191,
0.25, 0.316, 0.391, 0.473, 0.563, 0.66, 0.765,
0.876, 0.994,
1.067, 1.121, 1.157, 1.175, 1.175,
1.159, 1.129, 1.086, 1.033,
0.977 84.4%, 0.956, 0.945, 0.945, 0.955, 0.975,
1 100%
);
}
🔷 ১০. Transform Functions — সম্পূর্ণ রেফারেন্স
2D Transform Functions 2D
/* translate(x, y) — সরানো */
.el { transform: translate(20px, 30px); }
.el { transform: translate(-50%, -50%); } /* Centering কৌশল */
.el { transform: translateX(20px); } /* শুধু X */
.el { transform: translateY(-4px); } /* শুধু Y (hover lift) */
/* rotate(angle) — ঘোরানো */
.el { transform: rotate(45deg); }
.el { transform: rotate(-90deg); }
.el { transform: rotate(0.25turn); } /* turn একক */
.el { transform: rotate(1.57rad); } /* radian */
/* scale(sx, sy) — বড়-ছোট */
.el { transform: scale(1.1); } /* সমান */
.el { transform: scale(1.2, 0.8); } /* X বড়, Y ছোট */
.el { transform: scaleX(1.5); }
.el { transform: scaleY(0.5); }
.el { transform: scale(-1, 1); } /* Mirror X */
.el { transform: scale(1, -1); } /* Mirror Y */
.el { transform: scale(-1, -1); } /* ১৮০° উল্টানো */
/* skew(ax, ay) — বাঁকানো */
.el { transform: skew(15deg, 5deg); }
.el { transform: skewX(20deg); }
.el { transform: skewY(10deg); }
/* matrix(a, b, c, d, e, f) — সব একসাথে */
.el { transform: matrix(1, 0, 0, 1, 30, 50); } /* translate(30, 50) */
.el { transform: matrix(2, 0, 0, 2, 0, 0); } /* scale(2) */
3D Transform Functions 3D
/* 3D সরানো */
.el { transform: translateZ(50px); } /* সামনে আসে */
.el { transform: translateZ(-50px); } /* পেছনে যায় */
.el { transform: translate3d(20px, 30px, 50px); }
/* 3D ঘোরানো */
.el { transform: rotateX(30deg); } /* সামনে-পেছনে */
.el { transform: rotateY(45deg); } /* বাম-ডান */
.el { transform: rotateZ(30deg); } /* rotate() এর মতো */
.el { transform: rotate3d(1, 1, 0, 45deg); } /* কাস্টম অক্ষ */
/* 3D বড়-ছোট */
.el { transform: scaleZ(2); }
.el { transform: scale3d(1.1, 1.1, 1); }
/* perspective() — 3D দৃষ্টিকোণ */
.el { transform: perspective(800px) rotateY(45deg); }
/* নিজের উপর perspective */
/* matrix3d() */
/* সব 3D transform একটিতে */
/* একাধিক Transform — ডান থেকে বামে প্রয়োগ */
.el { transform: translateY(-4px) scale(1.02); }
.el { transform: perspective(800px) rotateY(20deg) scale(1.05); }
/* আধুনিক Individual Properties (Chrome 104+) */
.el { translate: 20px 30px; }
.el { rotate: 45deg; }
.el { scale: 1.1; }
/* ক্রমের সমস্যা নেই — সবসময় translate → rotate → scale */
🔷 ১১. Filter Functions — ভিজ্যুয়াল ইফেক্ট
/* filter: function1() function2() ... */
/* একাধিক filter স্পেস দিয়ে */
/* blur(length) — ঝাপসা */
.el { filter: blur(4px); }
.el { filter: blur(0); } /* স্পষ্ট — transition-এ শুরু */
/* brightness(number|%) — উজ্জ্বলতা */
.el { filter: brightness(0); } /* সম্পূর্ণ কালো */
.el { filter: brightness(0.5); } /* ৫০% উজ্জ্বল */
.el { filter: brightness(1); } /* স্বাভাবিক */
.el { filter: brightness(1.5); } /* ১৫০% উজ্জ্বল */
.el { filter: brightness(200%); } /* % মান */
/* contrast(number|%) — বৈসাদৃশ্য */
.el { filter: contrast(0); } /* ধূসর */
.el { filter: contrast(1); } /* স্বাভাবিক */
.el { filter: contrast(2); } /* দ্বিগুণ বৈসাদৃশ্য */
/* grayscale(number|%) — ধূসর */
.el { filter: grayscale(0); } /* রঙিন */
.el { filter: grayscale(0.5); } /* আধা ধূসর */
.el { filter: grayscale(1); } /* সম্পূর্ণ ধূসর */
.el { filter: grayscale(100%); } /* % মান */
/* sepia(number|%) — পুরনো ছবির রঙ */
.el { filter: sepia(0.8); }
/* hue-rotate(angle) — রঙ ঘোরানো */
.el { filter: hue-rotate(90deg); }
.el { filter: hue-rotate(-45deg); }
.el { filter: hue-rotate(180deg); } /* Complementary রঙ */
/* invert(number|%) — রঙ উল্টানো */
.el { filter: invert(1); } /* সম্পূর্ণ উল্টানো */
.el { filter: invert(0.5); } /* আধা উল্টানো */
/* opacity(number|%) — স্বচ্ছতা */
.el { filter: opacity(0.5); } /* opacity property-র মতো */
/* saturate(number|%) — রঙের তীব্রতা */
.el { filter: saturate(0); } /* ধূসর */
.el { filter: saturate(1); } /* স্বাভাবিক */
.el { filter: saturate(2); } /* অত্যন্ত রঙিন */
/* drop-shadow(offset-x offset-y blur-radius color) */
.el { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
.el { filter: drop-shadow(0 0 12px rgba(59,130,246,0.7)); } /* Glow */
/* box-shadow-এর চেয়ে আলাদা: PNG-র আকৃতি অনুসরণ করে ✅ */
/* একাধিক filter */
.instagram {
filter: brightness(1.1) contrast(1.1) saturate(1.3) sepia(0.1);
}
.noir {
filter: grayscale(1) contrast(1.3) brightness(0.9);
}
.vintage {
filter: sepia(0.5) hue-rotate(-20deg) saturate(1.5) brightness(1.1);
}
/* Hover Effect */
.photo {
filter: grayscale(1) brightness(0.8);
transition: filter 0.4s ease;
}
.photo:hover { filter: grayscale(0) brightness(1); }
/* Dark Mode-এ ছবি Invert */
@media (prefers-color-scheme: dark) {
.diagram { filter: invert(1) hue-rotate(180deg); }
}
/* backdrop-filter — পেছনে ভিজ্যুয়াল ইফেক্ট */
/* সব filter function কাজ করে */
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px) saturate(1.5);
-webkit-backdrop-filter: blur(12px) saturate(1.5);
}
.frosted-dark {
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(20px) brightness(0.7);
-webkit-backdrop-filter: blur(20px) brightness(0.7);
}
🔷 দ্রুত রেফারেন্স — CSS Functions সম্পূর্ণ গাইড
Function → Property মানচিত্র কোথায় কী
| Property | ব্যবহারযোগ্য Functions |
|---|---|
width, height, padding, margin, gap |
calc(), min(), max(), clamp(),
var(), env()
|
font-size, line-height |
clamp(), calc(), var(), max() |
color, background-color, border-color |
rgb(), hsl(), hwb(), oklab(),
oklch(), lab(), lch(), color(),
color-mix(), var()
|
background-image |
url(), linear-gradient(), radial-gradient(),
conic-gradient(), repeating-*-gradient(), image-set(),
cross-fade()
|
clip-path |
circle(), ellipse(), polygon(), inset(),
path(), xywh(), rect()
|
shape-outside |
circle(), ellipse(), polygon(), inset(),
url()
|
transform |
translate(), translateX/Y/Z(), translate3d(),
rotate(), rotateX/Y/Z(), rotate3d(),
scale(), scaleX/Y/Z(), skew(), skewX/Y(),
perspective(), matrix(), matrix3d()
|
filter, backdrop-filter |
blur(), brightness(), contrast(),
grayscale(), sepia(), hue-rotate(),
invert(), saturate(), opacity(),
drop-shadow()
|
grid-template-columns/rows |
repeat(), minmax(), fit-content() |
transition-timing-function, animation-timing-function |
cubic-bezier(), steps(), linear() |
content |
attr(), counter(), counters(), url() |
list-style-type |
symbols() |
cursor |
url() |
পরিস্থিতি → সেরা Function কখন কী
| পরিস্থিতি | সেরা Function | উদাহরণ |
|---|---|---|
| max-width বিকল্প | min() |
width: min(100%, 1280px) |
| min-width বিকল্প | max() |
padding: max(16px, 5%) |
| Fluid Typography | clamp() |
font-size: clamp(1rem, 4vw, 3rem) |
| Mixed-unit Layout | calc() |
width: calc(100% - 280px) |
| Hover রঙ | color-mix() |
color-mix(in srgb, var(--bg) 85%, black) |
| Shade System | oklch() |
oklch(0.6 0.2 250) |
| Responsive Grid | repeat() + minmax() |
repeat(auto-fill, minmax(280px, 1fr)) |
| Pie Chart | conic-gradient() |
conic-gradient(red 30%, blue 65%) |
| Glow Effect | radial-gradient() |
radial-gradient(circle, rgba(...,0.4), transparent) |
| Retina Image | image-set() |
image-set(url("2x.png") 2x) |
| Tooltip Content | attr() |
content: attr(data-tooltip) |
| Step Counter | counter() |
content: counter(step) |
| Spring Animation | cubic-bezier() |
cubic-bezier(0.34, 1.56, 0.64, 1) |
| Sprite Animation | steps() |
steps(8, end) |
| PNG Icon Shadow | drop-shadow() |
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)) |
| Glass UI | backdrop-filter: blur() |
backdrop-filter: blur(12px) |
| iPhone Safe Area | env() |
padding-bottom: env(safe-area-inset-bottom) |
| Custom Shape | polygon() |
clip-path: polygon(50% 0%, 0% 100%, 100% 100%) |
| Animated Gradient | @property + conic-gradient() |
Typed variable animate |
| Bৃত্তাকার Layout | sin() + cos() |
left: calc(50% + 120px * cos(var(--angle))) |
✅ CSS Functions-এর সোনালি নিয়ম:
Fluid Design →
Fluid Design →
clamp(min, vw, max) +
max-width → min(100%, 1280px) +
Mixed unit → calc() +
Responsive Grid → repeat(auto-fill, minmax(280px, 1fr)) +
আধুনিক রঙ → oklch() +
Hover রঙ → color-mix() +
Spring animation → cubic-bezier(0.34, 1.56, 0.64, 1) +
Functions নেস্ট করা যায় → min(calc(100% - 32px), 1280px)।
✅ CSS Best Practices — সম্পূর্ণ নোট
এই সেকশনে CSS লেখার সেরা অভ্যাস — কোড সংগঠন, Naming Convention, Performance, Maintainability, Accessibility এবং আধুনিক CSS কৌশল বিস্তারিত বোঝানো হয়েছে।
🔷 ১. CSS Reset ও Base Style
Modern CSS Reset — শুরুতেই দাও Reset
/* Modern CSS Reset — প্রতিটি প্রজেক্টে শুরুতে দাও */
/* Box Sizing — সবচেয়ে গুরুত্বপূর্ণ */
*, *::before, *::after {
box-sizing: border-box;
}
/* Margin ও Padding Reset */
* { margin: 0; padding: 0; }
/* Root Font & Color */
:root { font-size: 100%; } /* px নয় — Accessibility */
/* Body Base */
body {
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: 1rem;
line-height: 1.6;
color: var(--color-text, #1e293b);
background-color: var(--color-bg, #f8fafc);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeSpeed;
}
/* Media Reset */
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
/* Form Reset */
input, button, textarea, select { font: inherit; }
/* Link */
a { color: inherit; text-decoration: inherit; }
/* List Reset */
ul[role="list"], ol[role="list"] { list-style: none; }
/* Smooth Scroll */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* Accessible Hidden */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
🔷 ২. Naming Convention — নামকরণের নিয়ম
BEM — Block Element Modifier BEM
/* BEM — Block__Element--Modifier */
/* Block = স্বাধীন Component */
.card { }
.nav { }
.btn { }
/* Element = Block-এর অংশ — __ দিয়ে */
.card__image { }
.card__body { }
.card__title { }
.card__footer { }
.nav__item { }
.nav__link { }
/* Modifier = ভিন্নতা বা অবস্থা — -- দিয়ে */
.card--featured { } /* Featured variant */
.card--dark { } /* Dark variant */
.btn--primary { }
.btn--large { }
.btn--disabled { }
.nav__item--active { }
/* ✅ BEM-এর সুবিধা */
/* Specificity সবসময় (0,1,0) — সমান */
/* Nesting ছাড়াই কাঠামো বোঝা যায় */
/* HTML দেখেই CSS বোঝা যায় */
/* ❌ এড়িয়ে চলো */
.card .title { } /* Nesting — Specificity বাড়ে */
.card > .card__title { } /* Unnecessary nesting */
Utility-First — Tailwind পদ্ধতি Utility
/* Custom Utility Class — নিজেই বানাও */
/* Spacing Utilities */
.mt-4 { margin-top: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.p-4 { padding: 1rem; }
.px-4 { padding-inline: 1rem; }
.py-4 { padding-block: 1rem; }
.gap-4 { gap: 1rem; }
/* Display Utilities */
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
/* Flex Utilities */
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
/* Text Utilities */
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.text-sm { font-size: 0.875rem; }
.truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Visibility Utilities */
.sr-only { /* Screen reader only */ }
.pointer { cursor: pointer; }
.select-none { user-select: none; }
CSS Naming — সাধারণ নিয়মাবলী নিয়ম
/* ✅ ভালো নামকরণ */
.user-profile { } /* kebab-case — CSS-এ প্রচলিত ✅ */
.nav-primary { }
.card-featured { }
.btn-submit { }
/* ❌ খারাপ নামকরণ */
.userProfile { } /* camelCase — HTML-এ দেখতে খারাপ */
.UserProfile { } /* PascalCase */
.user_profile { } /* underscore — BEM ছাড়া এড়াও */
.red { } /* রঙের নাম — রঙ বদলালে নাম মিলবে না */
.left-sidebar { } /* অবস্থানের নাম — Layout বদলালে ভুল */
.a { } /* একক অক্ষর — অর্থহীন */
/* ✅ Semantic নাম — কী করে, কোথায় নয় */
.sidebar { } /* ✅ */
.primary-nav { } /* ✅ */
.hero-section { } /* ✅ */
.alert-danger { } /* ✅ */
.text-muted { } /* ✅ */
/* State নামকরণ */
.is-active { } /* is- prefix — state */
.is-open { }
.is-loading { }
.has-error { } /* has- prefix — কন্টেন্ট সম্পর্কিত */
.js-toggle { } /* js- prefix — JavaScript সংযুক্ত, CSS নয় */
🔷 ৩. CSS কোড সংগঠন ও File Structure
File Structure — বড় প্রজেক্টে Structure
/* CSS File Structure — বড় প্রজেক্ট */
/*
styles/
├── base/
│ ├── reset.css — Browser reset
│ ├── typography.css — Font, heading, paragraph
│ └── variables.css — CSS Custom Properties
│
├── components/
│ ├── button.css
│ ├── card.css
│ ├── modal.css
│ ├── form.css
│ └── navigation.css
│
├── layout/
│ ├── container.css
│ ├── grid.css
│ └── sidebar.css
│
├── pages/
│ ├── home.css
│ ├── about.css
│ └── contact.css
│
├── utilities/
│ └── helpers.css — Utility classes
│
└── main.css — সব import করো
*/
/* main.css */
@import './base/variables.css';
@import './base/reset.css';
@import './base/typography.css';
@import './components/button.css';
@import './layout/container.css';
/* ... */
একটি CSS ফাইলের ভেতরের ক্রম ক্রম
/* একটি Component CSS ফাইলের ক্রম */
/* ১. Custom Properties / Variables */
.card {
--card-bg: white;
--card-padding: 24px;
--card-radius: 12px;
}
/* ২. Layout Properties */
.card {
display: flex;
flex-direction: column;
position: relative;
}
/* ৩. Box Model */
.card {
width: 100%;
padding: var(--card-padding);
margin-bottom: 24px;
border: 1px solid #e2e8f0;
border-radius: var(--card-radius);
}
/* ৪. Visual */
.card {
background-color: var(--card-bg);
box-shadow: var(--shadow-md);
overflow: hidden;
}
/* ৫. Typography */
.card {
font-size: 0.875rem;
color: var(--color-text);
line-height: 1.6;
}
/* ৬. State */
.card:hover { box-shadow: var(--shadow-lg); }
.card.is-active { border-color: var(--color-primary); }
/* ৭. Children */
.card__title { font-size: 1.25rem; font-weight: 700; }
.card__body { flex: 1; }
/* ৮. Media Query */
@media (max-width: 640px) {
.card { padding: 16px; }
}
🔷 ৪. Selector-এর সেরা অভ্যাস
Specificity কম রাখো Specificity
/* ❌ উচ্চ Specificity — debug কঠিন */
#main .sidebar ul li a.active { color: #3b82f6; } /* (1,2,3) */
body header nav ul li { color: #333; } /* (0,0,5) */
/* ✅ কম Specificity — পরিষ্কার */
.nav-link { color: #374151; } /* (0,1,0) */
.nav-link.is-active { color: #3b82f6; } /* (0,2,0) */
/* ✅ ID-এর বদলে Attribute Selector */
[id="main-nav"] { } /* (0,1,0) — ID নয় */
/* ✅ :where() দিয়ে Specificity শূন্য */
:where(.reset) * { margin: 0; }
/* Selector Performance — ডান থেকে বামে পড়া হয় */
/* ❌ ধীর — Universal Selector শেষে */
div * { color: red; }
/* ✅ দ্রুত — নির্দিষ্ট Class */
.nav-link { color: red; }
!important এড়িয়ে চলো ⚠️ !important
/* ❌ !important — cascade ভাঙে */
.card h2 { color: red !important; }
/* ✅ Specificity বাড়িয়ে override */
.card.is-featured h2 { color: red; } /* (0,2,1) — জেতে */
/* !important শুধু এই ক্ষেত্রে গ্রহণযোগ্য */
.hidden { display: none !important; } /* Utility — সবসময় */
.sr-only { /* Screen reader */ }
/* Accessibility CSS */
🔷 ৫. Performance — দ্রুত CSS
Critical CSS — Render-blocking কমানো Critical
/* Critical CSS — Above-the-fold style inline দাও */
/* HTML-এ */
/* <style>
body { margin: 0; font-family: system-ui; }
.hero { min-height: 100vh; }
.navbar { position: sticky; top: 0; }
/* ... শুধু প্রথমে দেখা যায় এমন style */
</style> */
/* বাকি CSS async লোড */
/* <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'"> */
/* Font preload */
/* <link rel="preload" href="font.woff2" as="font" crossorigin> */
Animation Performance Animation
/* ✅ GPU-accelerated Property */
.el { transform: translateY(-4px); } /* GPU */
.el { opacity: 0.8; } /* GPU */
.el { filter: blur(4px); } /* GPU */
/* ❌ Layout-triggering Property */
.el { top: 20px; } /* Reflow */
.el { width: 200px; } /* Reflow */
.el { margin-top: 20px; } /* Reflow */
/* Transition শুধু নির্দিষ্ট Property-তে */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
/* transition: all 0.3s — এড়িয়ে চলো, সব property check করে */
}
/* contain — Layout Isolation */
.widget { contain: layout; } /* ভেতরের layout বাইরে প্রভাব ফেলে না */
.avatar { contain: paint; } /* Paint এলাকা সীমিত */
.card { contain: strict; } /* Layout + Paint + Size */
/* content-visibility — Off-screen render skip */
.below-fold { content-visibility: auto; }
/* viewport-এর বাইরে থাকলে render হবে না — পেজ load দ্রুত ✅ */
Font Loading ও FOUT এড়ানো Font
/* Font Loading সেরা অভ্যাস */
/* ১. font-display: swap — FOUT কিন্তু FOIT নয় */
@font-face {
font-family: 'Inter';
src: url('inter.woff2') format('woff2');
font-display: swap; /* System font দেখাবে, তারপর swap */
font-weight: 400 700; /* Variable font — একটিতে সব weight */
}
/* ২. system-ui — Font লোডের আগে */
body { font-family: 'Inter', system-ui, sans-serif; }
/* system-ui = OS-এর ডিফল্ট sans-serif */
/* ৩. size-adjust — FOUT-এ layout shift কমানো */
@font-face {
font-family: 'FallbackFont';
src: local('Arial');
size-adjust: 100.06%; /* Inter-এর সাথে মেলানো */
ascent-override: 100%;
}
/* ৪. Variable Font — একটি ফাইলে সব weight */
@font-face {
font-family: 'Inter';
src: url('Inter-Variable.woff2') format('woff2');
font-weight: 100 900; /* সব weight range */
}
🔷 ৬. Accessibility — সবার জন্য
/* Focus Visible — Keyboard Navigation */
/* browser default outline সরানোর পর নিজের দাও */
:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
border-radius: 3px;
}
/* Focus-কে Hide করো না */
/* ❌ ভুল */
:focus { outline: none; } /* Keyboard user-এর জন্য বিপজ্জনক */
/* ✅ শুধু Mouse-এ hide */
:focus:not(:focus-visible) { outline: none; }
/* Color Contrast — ন্যূনতম 4.5:1 */
/* ✅ ভালো */
.text { color: #1e293b; background: #f8fafc; } /* ratio: ~18:1 */
/* ❌ খারাপ */
.text { color: #94a3b8; background: #f8fafc; } /* ratio: ~3.4:1 */
/* Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* Color Blindness — শুধু রঙে নির্ভর করো না */
/* ❌ শুধু রঙ দিয়ে status */
.error { color: red; }
/* ✅ Icon বা লেখাও দাও */
.error::before { content: "⚠ "; }
.error { color: red; }
/* Touch Target — মোবাইলে ন্যূনতম 44×44px */
.btn { min-width: 44px; min-height: 44px; }
.icon-btn {
padding: 12px; /* icon 20px + padding 12px×2 = 44px */
}
/* Skip Link — Keyboard দিয়ে main-এ যাওয়া */
.skip-link {
position: absolute;
top: -100%;
left: 0;
background: white;
color: #3b82f6;
padding: 16px;
z-index: 9999;
text-decoration: none;
font-weight: 700;
}
.skip-link:focus { top: 0; } /* Focus-এ দেখাবে */
🔷 ৭. Maintainability — রক্ষণাবেক্ষণযোগ্য CSS
/* ১. Magic Number এড়াও — Variable ব্যবহার করো */
/* ❌ Magic Number */
.header { top: 64px; }
.hero { min-height: calc(100vh - 64px); }
.fixed-content { margin-top: 64px; }
/* ✅ Variable */
:root { --navbar-height: 64px; }
.header { top: 0; height: var(--navbar-height); }
.hero { min-height: calc(100vh - var(--navbar-height)); }
.fixed-content { margin-top: var(--navbar-height); }
/* ২. Comment দিয়ে জটিল CSS ব্যাখ্যা করো */
/* Full-bleed container — sidebar-এর বাইরে যাওয়া */
.full-bleed {
width: 100vw;
margin-inline: calc(50% - 50vw);
}
/* Clearfix — Float সন্তান ধারণ */
.clearfix::after { content: ""; display: block; clear: both; }
/* ৩. DRY — নিজেকে পুনরাবৃত্তি করো না */
/* ❌ পুনরাবৃত্তি */
.btn-primary { padding: 12px 24px; border-radius: 8px; cursor: pointer; background: #3b82f6; }
.btn-danger { padding: 12px 24px; border-radius: 8px; cursor: pointer; background: #ef4444; }
/* ✅ Base + Modifier */
.btn {
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
}
.btn-primary { background: #3b82f6; color: white; }
.btn-danger { background: #ef4444; color: white; }
/* ৪. Logical Properties — RTL সমর্থন */
/* ❌ Physical */
.el { margin-left: 20px; padding-right: 16px; }
/* ✅ Logical */
.el { margin-inline-start: 20px; padding-inline-end: 16px; }
/* ৫. Modern CSS — পুরনো হ্যাক এড়াও */
/* ❌ পুরনো Centering Hack */
.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
/* ✅ আধুনিক */
.center { display: grid; place-items: center; }
/* ৬. @layer দিয়ে Cascade পরিচালনা */
@layer reset, base, components, utilities;
@layer reset { * { box-sizing: border-box; } }
@layer base { body { font-family: system-ui; } }
@layer components { .btn { padding: 12px 24px; } }
@layer utilities { .hidden { display: none !important; } }
🔷 দ্রুত রেফারেন্স — Best Practice Checklist
| বিভাগ | সেরা অভ্যাস | এড়িয়ে চলো |
|---|---|---|
| Reset | box-sizing: border-box সবসময় |
Browser default-এ ভরসা |
| Font | font-size: 100% :root-এ |
font-size: 16px fix করা |
| Specificity | Class-level Selector ব্যবহার | ID Selector, !important |
| Variable | Magic Number-এর বদলে Variable | Hardcoded মান |
| Animation | transform, opacity |
top, width animate |
| Layout | Flex/Grid | Float-based Layout |
| Naming | BEM বা kebab-case | অর্থহীন নাম (a, b, red) |
| Accessibility | :focus-visible style |
outline: none |
| Motion | prefers-reduced-motion |
Infinite animation সবসময় |
| Maintenance | @layer, Comment | Deep nesting |
✅ Best Practices-এর সোনালি নিয়ম:
প্রতিটি প্রজেক্টে Modern CSS Reset দিয়ে শুরু করো + CSS Variable দিয়ে Design Token তৈরি করো + Specificity কম রাখো — Class-level-এ কাজ করো + Animation-এ শুধু
প্রতিটি প্রজেক্টে Modern CSS Reset দিয়ে শুরু করো + CSS Variable দিয়ে Design Token তৈরি করো + Specificity কম রাখো — Class-level-এ কাজ করো + Animation-এ শুধু
transform ও opacity +
prefers-reduced-motion সমর্থন করো +
:focus-visible দিয়ে Keyboard navigation সহজ করো।
📱 CSS Responsiveness — সম্পূর্ণ নোট
এই সেকশনে CSS Responsive Design-এর সব বিষয় — Viewport Meta, Media Query, Breakpoint, Mobile-First পদ্ধতি, Fluid Design, Responsive Typography, Responsive Image ও Container Query বিস্তারিত বোঝানো হয়েছে।
🔷 Responsive Design কী?
Responsive Web Design মানে একটি ওয়েবসাইট সব ডিভাইসে — মোবাইল, ট্যাবলেট, ডেস্কটপ — সঠিকভাবে দেখানো। CSS দিয়ে layout, typography ও image স্ক্রিনের আকার অনুযায়ী পরিবর্তন করা হয়।
| পদ্ধতি | কাজ | CSS কৌশল |
|---|---|---|
| Fluid Layout | % ও fr দিয়ে নমনীয় layout | Flexbox, Grid, % |
| Flexible Images | ছবি container-এর চেয়ে বড় হবে না | max-width: 100% |
| Media Query | স্ক্রিনের আকার অনুযায়ী CSS | @media |
| Fluid Typography | Font স্বয়ংক্রিয়ভাবে মাপ বদলায় | clamp() |
| Container Query | Viewport নয়, Parent দেখে | @container |
🔷 ১. Viewport Meta Tag
/* HTML <head>-এ অবশ্যই দাও */
/* <meta name="viewport" content="width=device-width, initial-scale=1"> */
/* ছাড়া মোবাইলে Desktop site দেখাবে — Responsive কাজ করবে না ❌ */
/* user-scalable=no — এড়িয়ে চলো (Accessibility ক্ষতি) */
/* <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> ❌ */
/* CSS-এ Viewport Unit */
.hero { min-height: 100vh; } /* Full screen */
.section { width: 100vw; } /* Full width */
.sidebar { height: 100dvh; } /* Dynamic — মোবাইলে সঠিক ✅ */
/* মোবাইলে vh-এর সমস্যা */
/* মোবাইল browser-এর address bar লুকালে/দেখালে vh বদলায় */
/* সমাধান: dvh ব্যবহার করো */
.hero {
min-height: 100vh; /* Fallback */
min-height: 100dvh; /* আধুনিক ✅ */
}
🔷 ২. Media Query — স্ক্রিন অনুযায়ী CSS
Media Query সিনট্যাক্স Syntax
/* @media (condition) { CSS } */
/* Viewport প্রস্থ */
@media (min-width: 768px) { } /* ৭৬৮px বা বড় */
@media (max-width: 767px) { } /* ৭৬৭px বা ছোট */
/* Range — নতুন সিনট্যাক্স (CSS Media Queries Level 4) */
@media (width >= 768px) { } /* min-width-এর সমতুল্য ✅ */
@media (width <= 767px) { } /* max-width-এর সমতুল্য */ @media (768px <=width <=1024px) { } /* নির্দিষ্ট
range */ /* উচ্চতা */ @media (min-height: 600px) { } @media (height>= 600px) { }
/* Orientation */
@media (orientation: portrait) { } /* উল্লম্ব — মোবাইল সাধারণত */
@media (orientation: landscape) { } /* অনুভূমিক */
/* Pointer Type */
@media (hover: hover) { } /* Mouse আছে */
@media (hover: none) { } /* Touch-only */
@media (pointer: coarse) { } /* Touch screen — বড় target */
@media (pointer: fine) { } /* Mouse — সঠিক pointer */
/* Display Mode */
@media (display-mode: standalone) { } /* PWA */
@media (display-mode: fullscreen) { }
/* AND, OR, NOT */
@media (min-width: 768px) and (orientation: landscape) { }
@media (max-width: 600px), (max-height: 400px) { } /* OR */
@media not (min-width: 768px) { } /* NOT */
/* User Preference */
@media (prefers-color-scheme: dark) { } /* Dark Mode */
@media (prefers-reduced-motion: reduce) { } /* Reduced Motion */
@media (prefers-contrast: high) { } /* High Contrast */
@media (forced-colors: active) { } /* Windows High Contrast */
@media (prefers-reduced-data: reduce) { } /* Data Saver */
@media print { } /* Print */
Breakpoint — Standard স্ক্রিন আকার Breakpoint
/* Common Breakpoint System */
/* Tailwind CSS-অনুপ্রাণিত */
:root {
--bp-sm: 640px; /* Small Mobile → Tablet */
--bp-md: 768px; /* Tablet */
--bp-lg: 1024px; /* Laptop */
--bp-xl: 1280px; /* Desktop */
--bp-2xl: 1536px; /* Large Desktop */
}
/* Mobile-First Media Queries */
/* Default = Mobile */
@media (min-width: 640px) {
/* sm: Small tablet ও তার বড় */
}
@media (min-width: 768px) {
/* md: Tablet ও তার বড় */
}
@media (min-width: 1024px) {
/* lg: Laptop ও তার বড় */
}
@media (min-width: 1280px) {
/* xl: Desktop ও তার বড় */
}
@media (min-width: 1536px) {
/* 2xl: Large Desktop */
}
/* Content-based Breakpoint — ডিভাইস নয়, Content দেখো */
/* Layout ভেঙে পড়লে সেখানে Breakpoint দাও */
🔷 ৩. Mobile-First — ছোট থেকে শুরু
Mobile-First বনাম Desktop-First তুলনা
| বিষয় | Mobile-First (min-width) | Desktop-First (max-width) |
|---|---|---|
| শুরু | মোবাইল style ডিফল্ট | Desktop style ডিফল্ট |
| Media Query | min-width দিয়ে বড়ে | max-width দিয়ে ছোটে |
| Performance | ✅ ভালো — কম override | ❌ বেশি CSS override |
| Priority | ✅ মোবাইল — বেশি ব্যবহারকারী | Desktop — কম ব্যবহারকারী |
| সুপারিশ | ✅ সেরা অভ্যাস | পুরনো প্রজেক্টে |
/* Mobile-First — min-width দিয়ে বাড়ানো ✅ */
/* ডিফল্ট = Mobile */
.container { padding-inline: 16px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.sidebar { display: none; }
/* Tablet */
@media (min-width: 768px) {
.container { padding-inline: 32px; }
.grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
/* Desktop */
@media (min-width: 1024px) {
.container { padding-inline: 48px; max-width: 1280px; margin-inline: auto; }
.grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sidebar { display: block; }
}
/* Desktop-First — max-width দিয়ে কমানো ❌ (এড়িয়ে চলো নতুন প্রজেক্টে) */
.grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }
🔷 ৪. Responsive Layout — বাস্তব Pattern
Responsive Container Container
/* Responsive Container */
.container {
width: 100%;
max-width: 1280px;
margin-inline: auto;
padding-inline: clamp(16px, 5vw, 48px); /* Fluid Padding ✅ */
}
/* Fixed Breakpoint Padding */
.container {
padding-inline: 16px; /* Mobile */
}
@media (min-width: 640px) { .container { padding-inline: 24px; } }
@media (min-width: 1024px) { .container { padding-inline: 32px; } }
@media (min-width: 1280px) { .container { padding-inline: 48px; } }
/* Fluid Container — Breakpoint ছাড়াই */
.fluid-container {
width: min(100%, 1280px);
margin-inline: auto;
padding-inline: max(16px, (100% - 1280px) / 2 + 32px);
}
Responsive Navigation Navigation
/* Responsive Nav — Mobile Hamburger */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
height: 64px;
}
/* Mobile: Nav Links লুকানো */
.nav-links {
display: none;
position: fixed;
inset: 64px 0 0 0;
background: white;
flex-direction: column;
padding: 24px;
gap: 8px;
z-index: 100;
}
.nav-links.is-open { display: flex; }
/* Hamburger Button */
.hamburger { display: flex; cursor: pointer; }
/* Desktop: Nav Links দেখানো */
@media (min-width: 768px) {
.nav-links { display: flex; flex-direction: row; position: static; padding: 0; }
.hamburger { display: none; }
}
/* Pure CSS Hamburger — Checkbox hack */
.nav-toggle { display: none; } /* Hidden checkbox */
.nav-toggle:checked ~ .nav-links { display: flex; }
Responsive Card Grid Card Grid
/* পদ্ধতি ১: CSS Grid auto-fill — সেরা ✅ */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
gap: clamp(12px, 3vw, 24px);
}
/* Breakpoint ছাড়াই Responsive */
/* পদ্ধতি ২: Breakpoint-এ Column পরিবর্তন */
.card-grid {
display: grid;
grid-template-columns: 1fr; /* Mobile: 1 column */
gap: 16px;
}
@media (min-width: 640px) {
.card-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
.card-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (min-width: 1280px) {
.card-grid { grid-template-columns: repeat(4, 1fr); }
}
/* পদ্ধতি ৩: Flexbox Wrap */
.flex-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.flex-grid > * {
flex: 1 1 280px; /* ন্যূনতম ২৮০px, তারপর বাড়ে */
max-width: 400px; /* সর্বোচ্চ */
}
Responsive Sidebar Layout Sidebar
/* Responsive Sidebar Layout */
/* Mobile: Stack */
.page-layout {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
/* Desktop: Sidebar + Main */
@media (min-width: 1024px) {
.page-layout {
grid-template-columns: 260px 1fr;
grid-template-areas: "sidebar main";
align-items: start;
}
.sidebar { grid-area: sidebar; position: sticky; top: 80px; }
.main { grid-area: main; }
}
/* HTML order: Mobile-এ Main আগে, Desktop-এ Sidebar আগে */
/* Grid area দিয়ে Visual order পরিবর্তন */
@media (max-width: 1023px) {
.sidebar { order: 2; }
.main { order: 1; } /* Main content আগে */
}
Responsive Table Table
/* Responsive Table — মোবাইলে Card View */
.table-wrap { overflow-x: auto; } /* সহজ সমাধান */
/* Card View Transformation */
@media (max-width: 640px) {
.responsive-table thead { display: none; } /* Header লুকানো */
.responsive-table tbody tr {
display: block;
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 12px;
padding: 12px;
}
.responsive-table tbody td {
display: flex;
justify-content: space-between;
padding: 6px 0;
border: none;
}
/* HTML: <td data-label="নাম">Farid</td> */
.responsive-table tbody td::before {
content: attr(data-label);
font-weight: 600;
color: #64748b;
}
}
🔷 ৫. Responsive Typography — Fluid Font
clamp() — সেরা পদ্ধতি clamp()
/* Fluid Typography — Media Query ছাড়াই ✅ */
/* Type Scale */
h1 { font-size: clamp(1.875rem, 5vw + 1rem, 4rem); }
h2 { font-size: clamp(1.5rem, 4vw + 0.5rem, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw + 0.75rem, 2rem); }
h4 { font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem); }
p { font-size: clamp(1rem, 1vw + 0.75rem, 1.125rem); }
/* Fluid Heading — বিস্তারিত */
.hero-title {
font-size: clamp(2rem, 8vw, 5rem);
/* Mobile (375px): ~2rem ≈ 32px */
/* Tablet (768px): ~5vw ≈ 38px */
/* Desktop (1440px): 5rem ≈ 80px — কিন্তু max 5rem-এ সীমাবদ্ধ */
}
/* Fluid Spacing */
.section { padding-block: clamp(48px, 8vw, 120px); }
.hero { padding-inline: clamp(16px, 5vw, 80px); }
.grid { gap: clamp(12px, 3vw, 32px); }
/* Breakpoint-এ Font পরিবর্তন — পুরনো পদ্ধতি */
h1 { font-size: 1.875rem; }
@media (min-width: 768px) { h1 { font-size: 2.5rem; } }
@media (min-width: 1024px) { h1 { font-size: 3.5rem; } }
@media (min-width: 1280px) { h1 { font-size: 4rem; } }
Fluid Type Scale System Type Scale
/* Complete Fluid Type Scale — CSS Variable দিয়ে */
:root {
/* Fluid Font Size */
--text-xs: clamp(0.694rem, 0.5vw + 0.6rem, 0.8rem);
--text-sm: clamp(0.833rem, 0.8vw + 0.7rem, 1rem);
--text-base: clamp(1rem, 1.2vw + 0.8rem, 1.25rem);
--text-lg: clamp(1.2rem, 1.5vw + 1rem, 1.563rem);
--text-xl: clamp(1.44rem, 2vw + 1rem, 1.953rem);
--text-2xl: clamp(1.728rem, 3vw + 1rem, 2.441rem);
--text-3xl: clamp(2.074rem, 4vw + 1rem, 3.052rem);
--text-4xl: clamp(2.488rem, 5vw + 1rem, 3.815rem);
/* Fluid Spacing */
--space-sm: clamp(8px, 1.5vw, 16px);
--space-md: clamp(16px, 3vw, 32px);
--space-lg: clamp(24px, 5vw, 64px);
--space-xl: clamp(40px, 8vw, 120px);
}
body { font-size: var(--text-base); }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
.section { padding-block: var(--space-xl); }
🔷 ৬. Responsive Image
/* Responsive Image — মূল নিয়ম */
img {
max-width: 100%; /* কখনো parent-এর বাইরে যাবে না ✅ */
height: auto; /* Aspect ratio ঠিক থাকবে */
display: block; /* Inline gap সরানো */
}
/* Aspect Ratio ঠিক রাখা */
.img-wrap {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Art Direction — বিভিন্ন ছবি বিভিন্ন স্ক্রিনে */
/* HTML: */
/*
<picture>
<source media="(min-width: 1024px)" srcset="hero-desktop.jpg">
<source media="(min-width: 640px)" srcset="hero-tablet.jpg">
<img src="hero-mobile.jpg" alt="Hero" loading="lazy">
</picture>
*/
/* CSS-এ Art Direction */
.hero-bg {
background-image: url("mobile.jpg");
}
@media (min-width: 640px) {
.hero-bg { background-image: url("tablet.jpg"); }
}
@media (min-width: 1024px) {
.hero-bg { background-image: url("desktop.jpg"); }
}
/* Responsive Avatar */
.avatar {
width: clamp(32px, 8vw, 64px);
height: clamp(32px, 8vw, 64px);
border-radius: 50%;
object-fit: cover;
}
/* Lazy Loading */
img { loading: lazy; decoding: async; }
/* Above-the-fold ছবিতে loading="eager" দাও */
🔷 ৭. Container Query — Component-নির্ভর Responsive
@container — Viewport নয়, Parent Container-এর আকার দেখে
Responsive হয়। একই Component sidebar-এ ছোট, main-এ বড় — স্বয়ংক্রিয়ভাবে।
/* Container Query — ধাপে ধাপে */
/* ১. Parent-এ Container ঘোষণা */
.card-wrapper {
container-type: inline-size; /* Width দেখবে */
container-name: card; /* নাম (ঐচ্ছিক) */
}
/* ২. Container-এর আকার অনুযায়ী */
@container (min-width: 400px) {
.card {
display: flex;
flex-direction: row; /* চওড়া হলে horizontal */
}
.card-image {
width: 200px;
flex-shrink: 0;
}
}
@container (min-width: 600px) {
.card-title { font-size: 1.5rem; }
.card-actions { display: flex; gap: 8px; }
}
/* ৩. Named Container */
@container card (min-width: 500px) {
.card-body { padding: 24px; }
}
/* ৪. Container Unit */
.card-title {
font-size: clamp(1rem, 5cqi, 1.5rem);
/* cqi = container inline-size-এর ১% */
}
/* Sidebar বনাম Main-এ একই Component */
.sidebar .card-wrapper { /* sidebar-এ ছোট */ }
.main .card-wrapper { /* main-এ বড় — Component নিজেই adapt করে */ }
/* size Container — উভয় দিক */
.widget {
container-type: size; /* Width ও Height উভয় */
}
@container (min-width: 300px) and (min-height: 200px) {
.widget-content { display: grid; grid-template-columns: 1fr 1fr; }
}
Container Query বনাম Media Query তুলনা
| বিষয় | Media Query | Container Query |
|---|---|---|
| কী দেখে | Viewport (browser window) | Parent container |
| Component | Context-নির্ভর নয় | Context-নির্ভর ✅ |
| Reusability | সীমিত | উচ্চ ✅ |
| সেরা ব্যবহার | Page-level Layout, Typography | Component-level Responsive |
| Browser | সব ✅ | Chrome 105+, Safari 16+, Firefox 110+ |
🔷 দ্রুত রেফারেন্স — Responsiveness Checklist
| বিভাগ | সেরা অভ্যাস | CSS |
|---|---|---|
| Meta Tag | Viewport Meta অবশ্যই দাও | <meta name="viewport"...> |
| পদ্ধতি | Mobile-First ব্যবহার করো | @media (min-width: ...) |
| Image | সবসময় Responsive করো | max-width: 100%; height: auto |
| Container | Fluid + max-width দাও | width: min(100%, 1280px) |
| Typography | Fluid Font ব্যবহার করো | clamp(min, vw, max) |
| Spacing | Fluid Spacing | clamp(16px, 5vw, 80px) |
| Grid | auto-fill + minmax | repeat(auto-fill, minmax(280px, 1fr)) |
| Table | Horizontal scroll বা Card view | overflow-x: auto |
| Sidebar | Mobile-এ Stack করো | Grid + order |
| Component | Container Query ব্যবহার করো | @container |
| Hero height | dvh ব্যবহার করো | min-height: 100dvh |
| Touch Target | ন্যূনতম 44×44px | min-height: 44px; padding: 12px |
Media Query Breakpoint Reference Breakpoint
| নাম | মান | লক্ষ্য ডিভাইস | Mobile-First |
|---|---|---|---|
| xs | 0px | Small phone (default) | ডিফল্ট CSS |
| sm | 640px | Large phone, Small tablet | @media (min-width: 640px) |
| md | 768px | Tablet | @media (min-width: 768px) |
| lg | 1024px | Laptop | @media (min-width: 1024px) |
| xl | 1280px | Desktop | @media (min-width: 1280px) |
| 2xl | 1536px | Large Desktop | @media (min-width: 1536px) |
✅ Responsiveness-এর সোনালি নিয়ম:
সবসময় Viewport Meta Tag দাও + Mobile-First পদ্ধতি (
সবসময় Viewport Meta Tag দাও + Mobile-First পদ্ধতি (
min-width) ব্যবহার করো +
Image → max-width: 100% +
Font → clamp() দিয়ে Fluid +
Card Grid → repeat(auto-fill, minmax()) +
Hero Height → 100dvh +
Component → @container +
Touch Target → ন্যূনতম 44×44px।
🏗️ CSS Methodologies — সম্পূর্ণ নোট
এই সেকশনে CSS Methodology-এর সব বিষয় — BEM, OOCSS, SMACSS, ITCSS, Utility-First, CSS-in-JS, Sass ও PostCSS — বাস্তব উদাহরণসহ বিস্তারিত বোঝানো হয়েছে। বড় প্রজেক্টে CSS সুশৃঙ্খল ও maintainable রাখার সেরা পদ্ধতি।
🔷 CSS Methodology কী?
CSS প্রজেক্ট বড় হলে class-এর নাম conflict করে, কোড duplicate হয়, কে কোন CSS লিখেছে বোঝা যায় না। CSS Methodology হলো CSS লেখার একটি সুনির্দিষ্ট নিয়ম ও কাঠামো যা কোড পরিষ্কার, পুনর্ব্যবহারযোগ্য ও দলগত কাজে সহজ করে।
| Methodology | মূল ধারণা | সেরা ব্যবহার |
|---|---|---|
| BEM | Block, Element, Modifier দিয়ে নামকরণ | যেকোনো প্রজেক্ট — সবচেয়ে জনপ্রিয় ✅ |
| OOCSS | Structure ও Skin আলাদা, পুনর্ব্যবহার | বড় UI library, Design System |
| SMACSS | CSS ৫ ভাগে ভাগ করা | মাঝারি থেকে বড় প্রজেক্ট |
| ITCSS | Specificity অনুযায়ী স্তরে স্তরে CSS | বড় Enterprise প্রজেক্ট |
| Utility-First | ছোট ছোট utility class দিয়ে design | Tailwind CSS — দ্রুত development ✅ |
| CSS-in-JS | JavaScript-এ CSS লেখা | React, Component-based App |
| Sass / SCSS | CSS-এর উপরে Variable, Nesting, Mixin | যেকোনো প্রজেক্ট — সবচেয়ে বেশি ব্যবহৃত ✅ |
| PostCSS | Plugin দিয়ে CSS Transform করো | Autoprefixer, Build pipeline, Modern CSS |
🔷 ১. BEM — Block Element Modifier
BEM (Block Element Modifier) হলো CSS class-এর নামকরণের একটি নিয়ম। Class-এর নাম দেখেই বোঝা যায় HTML-এ সেটা কোথায় আছে এবং কী কাজ করে।
BEM নামকরণের নিয়ম Syntax
/* BEM: Block__Element--Modifier */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔹 BLOCK = স্বাধীন, পুনর্ব্যবহারযোগ্য Component
নাম: lowercase, শব্দের মাঝে hyphen (-)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.card { } /* Card component */
.navbar { } /* Navigation bar */
.btn { } /* Button */
.form { } /* Form */
.hero { } /* Hero section */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔹 ELEMENT = Block-এর ভেতরের অংশ
নিয়ম: Block + __ (দুটি underscore) + Element নাম
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.card__image { } /* Card-এর ভেতরের ছবি */
.card__title { } /* Card-এর শিরোনাম */
.card__body { } /* Card-এর মূল অংশ */
.card__footer { } /* Card-এর নিচের অংশ */
.navbar__logo { } /* Navbar-এর logo */
.navbar__link { } /* Navbar-এর link */
.form__label { } /* Form-এর label */
.form__input { } /* Form-এর input */
.form__btn { } /* Form-এর submit button */
/* ⚠️ Element-এর ভেতরে আরেকটি Element — ❌ ভুল */
.card__body__title { } /* ❌ তিন স্তর ভুল */
.card__title { } /* ✅ সবসময় Block থেকে শুরু */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔹 MODIFIER = Block বা Element-এর ভিন্ন অবস্থা / চেহারা
নিয়ম: Block/Element + -- (দুটি hyphen) + Modifier নাম
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Block Modifier */
.btn--primary { background: #3b82f6; color: white; }
.btn--danger { background: #ef4444; color: white; }
.btn--outline { background: transparent; border: 2px solid #3b82f6; }
.btn--large { padding: 14px 28px; font-size: 1.125rem; }
.btn--small { padding: 6px 12px; font-size: 0.875rem; }
.btn--disabled { opacity: 0.5; cursor: not-allowed; }
.card--featured { border: 2px solid #f59e0b; }
.card--dark { background: #1e293b; color: white; }
/* Element Modifier */
.navbar__link--active { color: #3b82f6; font-weight: 700; }
.form__input--error { border-color: #ef4444; }
.form__input--success { border-color: #22c55e; }
BEM — সম্পূর্ণ বাস্তব উদাহরণ উদাহরণ
<div class="card card--featured">
<img class="card__image" src="photo.jpg" alt="ছবি">
<div class="card__body">
<h2 class="card__title">শিরোনাম</h2>
<p class="card__desc">বিবরণ এখানে</p>
<div class="card__footer">
<button class="btn btn--primary btn--small">পড়ো</button>
<button class="btn btn--outline btn--small">Save</button>
</div>
</div>
</div>
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
CSS — BEM দিয়ে
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Block */
.card {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
overflow: hidden;
background: white;
}
/* Block Modifier */
.card--featured {
border: 2px solid #f59e0b;
box-shadow: 0 4px 16px rgba(245,158,11,0.2);
}
.card--dark {
background: #1e293b;
color: white;
}
/* Elements */
.card__image { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.card__body { padding: 20px; }
.card__title { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
.card__desc { color: #64748b; line-height: 1.6; }
.card__footer { display: flex; gap: 8px; margin-top: 16px; }
/* Element Modifier */
.card__title--large { font-size: 1.5rem; }
/* Button Block */
.btn {
display: inline-flex;
align-items: center;
padding: 10px 20px;
border-radius: 6px;
font-weight: 600;
border: none;
cursor: pointer;
transition: opacity 0.2s;
}
.btn:hover { opacity: 0.85; }
/* Button Modifiers */
.btn--primary { background: #3b82f6; color: white; }
.btn--danger { background: #ef4444; color: white; }
.btn--outline { background: transparent; border: 2px solid #3b82f6; color: #3b82f6; }
.btn--large { padding: 14px 28px; font-size: 1.125rem; }
.btn--small { padding: 6px 14px; font-size: 0.875rem; }
.btn--disabled { opacity: 0.5; pointer-events: none; }
BEM-এর সুবিধা ও সীমাবদ্ধতা মূল্যায়ন
| বিষয় | ✅ সুবিধা | ⚠️ সীমাবদ্ধতা |
|---|---|---|
| Class নাম | দেখেই বোঝা যায় — self-documenting | নাম অনেক লম্বা হয় |
| Specificity | সব class একই level — conflict নেই | — |
| Reusability | Block যেকোনো জায়গায় ব্যবহার করো | — |
| Team | দলে সবাই একই নিয়মে লেখে | শিখতে একটু সময় লাগে |
| HTML | Structure স্পষ্ট | HTML-এ অনেক class |
🔷 ২. OOCSS — Object Oriented CSS
OOCSS (Object Oriented CSS) — CSS-কে Object-এর মতো ভাবো। একই CSS বারবার লেখার বদলে পুনর্ব্যবহারযোগ্য class তৈরি করো। দুটি মূল নিয়ম: Structure ও Skin আলাদা করো এবং Container ও Content আলাদা করো।
নিয়ম ১: Structure ও Skin আলাদা নিয়ম ১
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
❌ OOCSS ছাড়া — কোড Duplicate
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn-primary {
/* Structure */
display: inline-block;
padding: 10px 20px;
border-radius: 6px;
font-weight: 600;
/* Skin */
background: #3b82f6;
color: white;
border: none;
}
.btn-danger {
/* Structure — হুবহু একই, আবার লিখতে হচ্ছে! ❌ */
display: inline-block;
padding: 10px 20px;
border-radius: 6px;
font-weight: 600;
/* Skin — শুধু এটুকু আলাদা */
background: #ef4444;
color: white;
border: none;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ OOCSS — Structure ও Skin আলাদা
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Structure Class — Layout ও আকার */
.btn {
display: inline-block;
padding: 10px 20px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
text-align: center;
}
/* Skin Class — শুধু রঙ ও চেহারা */
.btn-primary { background: #3b82f6; color: white; border: none; }
.btn-danger { background: #ef4444; color: white; border: none; }
.btn-success { background: #22c55e; color: white; border: none; }
.btn-outline { background: transparent; border: 2px solid #3b82f6; color: #3b82f6; }
/* HTML-এ দুটি class একসাথে */
/* <button class="btn btn-primary">Submit</button> */
/* <button class="btn btn-danger">Delete</button> */
/* <button class="btn btn-outline">Cancel</button> */
/* আরেকটি উদাহরণ — Card */
/* Structure */
.media-obj {
display: flex;
gap: 16px;
align-items: flex-start;
}
.media-obj__body { flex: 1; }
.media-obj__img { flex-shrink: 0; }
/* Skin — বিভিন্ন চেহারার জন্য */
.skin-card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px
rgba(0,0,0,0.1); }
.skin-dark { background: #1e293b; color: white; }
.skin-warning { background: #fef9c3; border-left: 4px solid #f59e0b; }
নিয়ম ২: Container ও Content আলাদা নিয়ম ২
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
❌ Container-নির্ভর CSS — ❌ ভুল
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sidebar h3 { font-size: 1.25rem; color: #1e293b; }
.footer h3 { font-size: 1.25rem; color: #1e293b; }
.article h3 { font-size: 1.25rem; color: #1e293b; }
/* h3-এর style sidebar-এর উপর নির্ভরশীল — পুনর্ব্যবহার সম্ভব না ❌ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ OOCSS — Content স্বাধীন
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.section-title { font-size: 1.25rem; color: #1e293b; font-weight: 700; }
/* এখন যেকোনো জায়গায় .section-title ব্যবহার করো — Container বদলালেও কাজ করবে ✅ */
/* <h3 class="section-title"> যেকোনো জায়গায় কাজ করে </h3> */
🔷 ৩. SMACSS — Scalable and Modular Architecture for CSS
SMACSS (Scalable and Modular Architecture for CSS) — CSS ফাইলকে ৫টি ভাগে সাজাও। প্রতিটি ভাগের আলাদা দায়িত্ব আছে। বড় প্রজেক্টে CSS খুঁজে পেতে সহজ হয়।
SMACSS-এর ৫টি Category ৫ ভাগ
| Category | কী থাকে | Prefix / ফাইল | উদাহরণ |
|---|---|---|---|
| Base | Default HTML element style, Reset | prefix নেই | body, h1, p, a, img |
| Layout | Page-এর বড় structure: header, sidebar | l- বা #id |
.l-grid, .l-sidebar |
| Module | পুনর্ব্যবহারযোগ্য UI component | Component নাম | .card, .btn, .modal |
| State | JS দিয়ে পরিবর্তিত অবস্থা | is- |
.is-active, .is-hidden |
| Theme | রঙ, font — চেহারা পরিবর্তন | t- |
.t-dark, .t-large-text |
SMACSS — বিস্তারিত কোড উদাহরণ উদাহরণ
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📁 ফাইল কাঠামো:
styles/
├── base/
│ ├── _reset.css
│ └── _typography.css
├── layout/
│ ├── _grid.css
│ └── _header.css
├── modules/
│ ├── _card.css
│ ├── _btn.css
│ └── _modal.css
├── state/
│ └── _states.css
└── theme/
└── _dark.css
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ════════════════════════════
1. BASE — Default Element Style
════════════════════════════ */
/* _reset.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* _typography.css */
body { font-family: 'Hind Siliguri', sans-serif; line-height: 1.6; color: #1e293b; }
h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 700; }
a { color: #3b82f6; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
/* ════════════════════════════
2. LAYOUT — Page Structure (prefix: l-)
════════════════════════════ */
/* _grid.css */
.l-container { max-width: 1280px; margin-inline: auto; padding-inline: 24px; }
.l-grid { display: grid; gap: 24px; }
.l-grid--2col { grid-template-columns: repeat(2, 1fr); }
.l-grid--3col { grid-template-columns: repeat(3, 1fr); }
/* _header.css */
.l-header { position: sticky; top: 0; z-index: 100; background: white; }
.l-sidebar { width: 260px; flex-shrink: 0; }
.l-main { flex: 1; min-width: 0; }
/* ════════════════════════════
3. MODULE — Reusable Component
════════════════════════════ */
/* _card.css */
.card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card-title { font-size: 1.25rem; font-weight: 700; padding: 16px 16px 0; }
.card-body { padding: 16px; }
.card-footer { padding: 12px 16px; border-top: 1px solid #f1f5f9; }
/* Module Subclass — BEM-এর মতো */
.card-featured { border: 2px solid #f59e0b; } /* Featured card */
/* _btn.css */
.btn { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 6px; font-weight:
600; cursor: pointer; border: none; }
.btn-primary { background: #3b82f6; color: white; }
.btn-danger { background: #ef4444; color: white; }
/* ════════════════════════════
4. STATE — JavaScript দিয়ে পরিবর্তন (prefix: is-)
════════════════════════════ */
/* _states.css */
.is-active { display: block !important; } /* লুকানো element দেখানো */
.is-hidden { display: none !important; } /* লুকানো */
.is-open { max-height: 500px; } /* Accordion খোলা */
.is-closed { max-height: 0; overflow: hidden; } /* Accordion বন্ধ */
.is-loading { opacity: 0.6; pointer-events: none; cursor: wait; }
.is-error { border-color: #ef4444 !important; background: #fef2f2; }
.is-success { border-color: #22c55e !important; background: #f0fdf4; }
.is-disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }
.is-sticky { position: sticky; top: 0; }
/* JavaScript দিয়ে State যোগ/বাদ দেওয়া */
/* element.classList.add('is-active'); */
/* element.classList.remove('is-active'); */
/* element.classList.toggle('is-open'); */
/* ════════════════════════════
5. THEME — চেহারা পরিবর্তন (prefix: t-)
════════════════════════════ */
/* _dark.css */
.t-dark { background: #0f172a; color: #f1f5f9; }
.t-dark .card { background: #1e293b; border-color: #334155; }
.t-dark .btn-primary { background: #60a5fa; }
.t-large-text { font-size: 1.125em; line-height: 1.8; }
.t-high-contrast { filter: contrast(1.2); }
🔷 ৪. ITCSS — Inverted Triangle CSS
ITCSS (Inverted Triangle CSS) — CSS ফাইলগুলো উল্টো ত্রিভুজের মতো ৭টি স্তরে সাজাও। উপরের স্তরে কম specific CSS, নিচে বেশি specific CSS। এতে CSS cascade সমস্যা হয় না।
ITCSS-এর ৭টি স্তর ৭ স্তর
| স্তর | কী থাকে | Specificity | উদাহরণ |
|---|---|---|---|
| 1. Settings | CSS Variable, Color, Font — কোনো CSS output নয় | কোনো নেই | --color-primary: #3b82f6 |
| 2. Tools | Mixin, Function — কোনো CSS output নয় | কোনো নেই | SASS mixin, custom property |
| 3. Generic | Reset, Normalize, box-sizing | খুব কম | *, html, body |
| 4. Elements | Default HTML element style | কম | h1, p, a, img |
| 5. Objects | Layout pattern — চেহারাবিহীন (prefix: o-) | মাঝারি | .o-container, .o-grid |
| 6. Components | UI Component — চেহারাসহ (prefix: c-) | বেশি | .c-card, .c-btn |
| 7. Utilities | Helper class — সর্বোচ্চ priority (prefix: u-) | সর্বোচ্চ | .u-hidden, .u-text-center |
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📁 ITCSS ফাইল কাঠামো (main.css-এ @import)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
@import '01-settings/_colors.css';
@import '01-settings/_typography.css';
@import '02-tools/_mixins.css';
@import '03-generic/_reset.css';
@import '03-generic/_box-sizing.css';
@import '04-elements/_headings.css';
@import '04-elements/_links.css';
@import '05-objects/_container.css';
@import '05-objects/_grid.css';
@import '06-components/_card.css';
@import '06-components/_button.css';
@import '07-utilities/_display.css';
@import '07-utilities/_spacing.css';
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ════ স্তর ১: Settings ════ */
:root {
--color-primary: #3b82f6;
--color-danger: #ef4444;
--color-text: #1e293b;
--color-bg: #f8fafc;
--font-base: 'Hind Siliguri', sans-serif;
--radius-md: 8px;
--radius-lg: 12px;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
}
/* ════ স্তর ৩: Generic ════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
/* ════ স্তর ৪: Elements ════ */
body { font-family: var(--font-base); color: var(--color-text); background: var(--color-bg); }
h1, h2, h3 { line-height: 1.2; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); }
/* ════ স্তর ৫: Objects (prefix: o-) — চেহারাবিহীন Layout ════ */
.o-container { max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 5vw, 48px); }
.o-grid { display: grid; gap: var(--space, 24px); }
.o-grid--2col { grid-template-columns: repeat(2, 1fr); }
.o-grid--3col { grid-template-columns: repeat(3, 1fr); }
.o-flex { display: flex; }
.o-flex--center { align-items: center; justify-content: center; }
.o-stack { display: flex; flex-direction: column; }
/* ════ স্তর ৬: Components (prefix: c-) — চেহারাসহ UI ════ */
.c-card {
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.c-card__title { font-size: 1.25rem; font-weight: 700; padding: 16px 16px 0; }
.c-card__body { padding: 16px; }
.c-btn {
display: inline-flex;
align-items: center;
padding: 10px 20px;
border-radius: var(--radius-md);
font-weight: 600;
cursor: pointer;
border: none;
}
.c-btn--primary { background: var(--color-primary); color: white; }
.c-btn--danger { background: var(--color-danger); color: white; }
/* ════ স্তর ৭: Utilities (prefix: u-) — সর্বোচ্চ priority ════ */
.u-hidden { display: none !important; }
.u-visible { display: block !important; }
.u-text-center { text-align: center !important; }
.u-text-right { text-align: right !important; }
.u-font-bold { font-weight: 700 !important; }
.u-color-primary { color: var(--color-primary) !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
🔷 ৫. Utility-First CSS — Tailwind পদ্ধতি
Utility-First CSS — প্রতিটি CSS property-র জন্য একটি আলাদা class থাকে। HTML-এ এই class গুলো জুড়ে দিয়ে design করো — আলাদা CSS ফাইল লিখতে হয় না। Tailwind CSS এই পদ্ধতির সবচেয়ে জনপ্রিয় উদাহরণ।
Utility Class কীভাবে কাজ করে কীভাবে কাজ করে
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Utility Class = একটি class, একটি কাজ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Display */
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }
/* Flexbox */
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
/* Spacing */
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.px-4 { padding-inline: 16px; }
.py-2 { padding-block: 8px; }
.mt-4 { margin-top: 16px; }
.mb-6 { margin-bottom: 24px; }
.mx-auto { margin-inline: auto; }
/* Typography */
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.leading-relaxed { line-height: 1.75; }
/* Colors */
.bg-white { background: white; }
.bg-blue-500 { background: #3b82f6; }
.bg-red-500 { background: #ef4444; }
.text-white { color: white; }
.text-gray-600 { color: #64748b; }
.text-blue-600 { color: #2563eb; }
/* Border */
.rounded { border-radius: 4px; }
.rounded-lg { border-radius: 8px; }
.rounded-xl { border-radius: 12px; }
.rounded-full { border-radius: 9999px; }
.border { border: 1px solid #e2e8f0; }
/* Shadow */
.shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.shadow-lg { box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
/* Width / Height */
.w-full { width: 100%; }
.max-w-lg { max-width: 32rem; }
.min-h-screen { min-height: 100dvh; }
Utility-First — বাস্তব উদাহরণ উদাহরণ
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<img class="w-full" src="photo.jpg" alt="ছবি">
<div class="p-6">
<h2 class="text-xl font-bold text-gray-800 mb-2">শিরোনাম</h2>
<p class="text-gray-600 leading-relaxed mb-4">বিবরণ এখানে লেখো।</p>
<div class="flex gap-3">
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg font-bold">পড়ো</button>
<button class="border border-blue-500 text-blue-500 px-4 py-2 rounded-lg">Save</button>
</div>
</div>
</div>
<div class="card">
<div class="card__body">
<h2 class="card__title">শিরোনাম</h2>
<button class="btn btn--primary">পড়ো</button>
</div>
</div>
/* + আলাদা CSS ফাইলে .card, .card__body, .card__title সব লিখতে হবে */
<div class="bg-white rounded-xl p-6 shadow">
<h2 class="text-xl font-bold mb-4">শিরোনাম</h2>
<button class="bg-blue-500 text-white px-4 py-2 rounded">পড়ো</button>
</div>
/* কোনো আলাদা CSS ফাইল লাগে না ✅ */
Utility-First-এর সুবিধা ও সীমাবদ্ধতা মূল্যায়ন
| বিষয় | ✅ সুবিধা | ⚠️ সীমাবদ্ধতা |
|---|---|---|
| গতি | CSS ফাইল লিখতে হয় না — দ্রুত ✅ | প্রথমে Tailwind class শিখতে হয় |
| Naming | Class-এর নাম ভাবতে হয় না ✅ | HTML অনেক verbose দেখায় |
| CSS আকার | PurgeCSS দিয়ে ছোট Bundle ✅ | Setup ছাড়া বড় CSS ফাইল |
| Design | Design System-এ বাঁধা থাকে ✅ | Custom design-এ override দরকার |
| Reuse | @apply দিয়ে component তৈরি | বারবার একই class লিখতে হয় |
🔷 ৬. CSS-in-JS — JavaScript-এ CSS
CSS-in-JS — JavaScript ফাইলেই CSS লেখো। React Component-এর সাথে CSS একসাথে থাকে। Styled Components ও Emotion সবচেয়ে জনপ্রিয়। Class-এর নাম automatically unique হয় — conflict নেই।
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Styled Components — React
npm install styled-components
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
import styled from 'styled-components';
/* CSS + Component একসাথে */
const Card = styled.div`
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
padding: 24px;
`;
const Title = styled.h2`
font-size: 1.25rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 8px;
`;
/* Props দিয়ে Dynamic Style */
const Button = styled.button`
padding: 10px 20px;
border-radius: 6px;
font-weight: 600;
border: none;
cursor: pointer;
background: ${props => props.variant === 'danger' ? '#ef4444' : '#3b82f6'};
color: white;
&:hover {
opacity: 0.85;
}
`;
/* ব্যবহার — JSX-এ */
function ProductCard({ title, danger }) {
return (
<Card>
<Title>{title}</Title>
<Button variant={danger ? 'danger' : 'primary'}>
{danger ? 'Delete' : 'Read More'}
</Button>
</Card>
);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
CSS Modules — Next.js / React (Built-in)
আলাদা ফাইল: Card.module.css
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Card.module.css */
.card { background: white; border-radius: 12px; padding: 24px; }
.title { font-size: 1.25rem; font-weight: 700; }
.btn { background: #3b82f6; color: white; padding: 10px 20px; }
/* Card.jsx — CSS Module import */
import styles from './Card.module.css';
function Card() {
return (
<div className={styles.card}>
<h2 className={styles.title}>শিরোনাম</h2>
<button className={styles.btn}>পড়ো</button>
</div>
);
}
/* Compiled class নাম: Card_card__xK9p2 — Automatic scope ✅ */
🔷 ৭. SASS / SCSS — CSS Preprocessor
SASS (Syntactically Awesome Style Sheets) হলো একটি CSS Preprocessor — CSS-এর উপরে বসে extra শক্তি দেয়। আমরা SCSS ফাইলে লিখি, compiler সেটাকে সাধারণ CSS-এ রূপান্তর করে। Variable, Nesting, Mixin-সহ CSS লেখা অনেক সহজ ও maintainable হয়।
SASS বনাম SCSS Syntax Syntax পার্থক্য
| বিষয় | SASS (পুরনো) | SCSS (আধুনিক ✅) |
|---|---|---|
| ফাইল Extension | .sass |
.scss |
| Curly Brace {} | নেই — Indentation দিয়ে | আছে — CSS-এর মতো |
| Semicolon ; | নেই | আছে — CSS-এর মতো |
| CSS Compatible | ❌ সরাসরি CSS paste করা যায় না | ✅ যেকোনো CSS সরাসরি কাজ করে |
| জনপ্রিয়তা | কম ব্যবহৃত | সর্বাধিক প্রচলিত ✅ |
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SASS vs SCSS — একই কাজ, আলাদা syntax
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ❌ SASS syntax (.sass) — Indentation-based */
.card
background: white
padding: 20px
&__title
font-size: 1.25rem
font-weight: 700
/* ✅ SCSS syntax (.scss) — CSS-এর মতো, বেশি প্রচলিত */
.card {
background: white;
padding: 20px;
&__title {
font-size: 1.25rem;
font-weight: 700;
}
}
Feature ১: Variables — CSS Variable-এর মতো, কিন্তু আরও শক্তিশালী Variable
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SCSS Variable: $ চিহ্ন দিয়ে তৈরি
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* _variables.scss — সব variable একটি ফাইলে */
$color-primary: #3b82f6;
$color-danger: #ef4444;
$color-success: #22c55e;
$color-text: #1e293b;
$color-muted: #64748b;
$color-bg: #f8fafc;
$color-white: #ffffff;
$font-base: 'Hind Siliguri', sans-serif;
$font-display: 'Mukti', serif;
$font-sm: 0.875rem;
$font-base-size: 1rem;
$font-lg: 1.125rem;
$font-xl: 1.25rem;
$font-2xl: 1.5rem;
$font-3xl: 1.875rem;
$radius-sm: 4px;
$radius-md: 8px;
$radius-lg: 12px;
$radius-full: 9999px;
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
$shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
$shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
$transition-base: all 0.2s ease;
/* Variable ব্যবহার */
.btn {
background: $color-primary; /* Variable ব্যবহার */
font-family: $font-base;
border-radius: $radius-md;
box-shadow: $shadow-sm;
transition: $transition-base;
&:hover {
background: darken($color-primary, 10%); /* SASS function — ১০% গাঢ় করো */
}
}
.alert-danger {
background: lighten($color-danger, 40%); /* ৪০% হালকা করো */
border-left: 4px solid $color-danger;
color: darken($color-danger, 20%);
}
Feature ২: Nesting — BEM-এর সাথে সুন্দরভাবে কাজ করে Nesting
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Nesting — CSS বারবার লেখা কমায়
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ❌ সাধারণ CSS — বারবার .card লিখতে হয় */
.card { background: white; border-radius: 12px; }
.card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.card .card__image { width: 100%; aspect-ratio: 16/9; }
.card .card__body { padding: 20px; }
.card .card__title { font-size: 1.25rem; font-weight: 700; }
.card .card__title:hover { color: #3b82f6; }
.card .card__footer { padding: 12px 20px; border-top: 1px solid #f1f5f9; }
/* ✅ SCSS Nesting — পরিষ্কার ও সংগঠিত */
.card {
background: white;
border-radius: $radius-lg;
overflow: hidden;
transition: $transition-base;
/* & = parent selector (.card) */
&:hover {
box-shadow: $shadow-lg;
transform: translateY(-2px);
}
/* BEM Element — & + __ */
&__image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
&__body {
padding: 20px;
}
&__title {
font-size: $font-xl;
font-weight: 700;
color: $color-text;
&:hover {
color: $color-primary; /* নেস্টেড hover */
}
}
&__desc {
color: $color-muted;
line-height: 1.7;
margin-top: 8px;
}
&__footer {
padding: 12px 20px;
border-top: 1px solid #f1f5f9;
display: flex;
gap: 8px;
}
/* BEM Modifier — & + -- */
&--featured {
border: 2px solid #f59e0b;
box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2);
}
&--dark {
background: #1e293b;
color: white;
.card__desc { color: #94a3b8; } /* Dark theme-এ desc রঙ বদলায় */
}
}
/* Compiled CSS output (browser যা দেখে):
.card { background: white; border-radius: 12px; overflow: hidden; }
.card:hover { box-shadow: ...; transform: translateY(-2px); }
.card__image { width: 100%; aspect-ratio: 16/9; }
.card__title { font-size: 1.25rem; font-weight: 700; }
.card__title:hover { color: #3b82f6; }
.card--featured { border: 2px solid #f59e0b; }
*/
Feature ৩: Mixin — পুনর্ব্যবহারযোগ্য CSS Block Mixin
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Mixin = CSS-এর function — একবার লেখো, বারবার ব্যবহার করো
@mixin দিয়ে তৈরি, @include দিয়ে ব্যবহার
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* _mixins.scss */
/* ── Mixin ১: Flexbox Center ── */
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
/* ── Mixin ২: Parameter সহ — Responsive Breakpoint ── */
@mixin respond-to($breakpoint) {
@if $breakpoint == 'sm' { @media (max-width: 640px) { @content; } }
@if $breakpoint == 'md' { @media (max-width: 768px) { @content; } }
@if $breakpoint == 'lg' { @media (max-width: 1024px) { @content; } }
@if $breakpoint == 'xl' { @media (max-width: 1280px) { @content; } }
}
/* ── Mixin ৩: Default value সহ — Button ── */
@mixin btn-style($bg: $color-primary, $color: white, $padding: 10px 20px) {
background: $bg;
color: $color;
padding: $padding;
border-radius: $radius-md;
font-weight: 600;
border: none;
cursor: pointer;
transition: $transition-base;
&:hover {
background: darken($bg, 8%);
}
}
/* ── Mixin ৪: Text Truncate ── */
@mixin truncate($lines: 1) {
@if $lines == 1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} @else {
display: -webkit-box;
-webkit-line-clamp: $lines;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* ── Mixin ৫: Visually Hidden (Accessibility) ── */
@mixin sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Mixin ব্যবহার — @include
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero {
@include flex-center; /* ← Mixin ১ ব্যবহার */
min-height: 100dvh;
background: $color-bg;
}
.hero__title {
@include truncate(2); /* ← ২ লাইনে কাটো */
font-size: $font-3xl;
}
.btn-primary {
@include btn-style(); /* ← Default value ব্যবহার */
}
.btn-danger {
@include btn-style($color-danger); /* ← Custom color */
}
.btn-success {
@include btn-style($color-success, white, 14px 28px); /* ← সব custom */
}
.visually-hidden {
@include sr-only; /* ← Accessibility mixin */
}
/* Responsive Mixin ব্যবহার */
.l-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
@include respond-to('md') {
grid-template-columns: repeat(2, 1fr); /* Tablet-এ ২ column */
}
@include respond-to('sm') {
grid-template-columns: 1fr; /* Mobile-এ ১ column */
}
}
Feature ৪: @extend, @function, @each, @for — উন্নত SCSS উন্নত Feature
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
@extend — একটি class-এর style অন্যটিতে ধার করো
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
%btn-base { /* % = Placeholder (output-এ দেখায় না) */
display: inline-flex;
align-items: center;
padding: 10px 20px;
border-radius: $radius-md;
font-weight: 600;
border: none;
cursor: pointer;
}
.btn-primary {
@extend %btn-base; /* Base style ধার নাও */
background: $color-primary;
color: white;
}
.btn-danger {
@extend %btn-base; /* একই Base style */
background: $color-danger;
color: white;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
@function — গণনা করে মান ফেরত দেয়
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@function rem($px) {
@return $px / 16px * 1rem; /* px → rem রূপান্তর */
}
@function spacing($n) {
@return $n * 8px; /* ৮px grid */
}
h1 { font-size: rem(32px); } /* 2rem */
h2 { font-size: rem(24px); } /* 1.5rem */
.card { padding: spacing(3); } /* 24px */
.btn { padding: spacing(1.25) spacing(2.5); } /* 10px 20px */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
@each — List বা Map loop করো
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
$colors: (
'primary': #3b82f6,
'danger': #ef4444,
'success': #22c55e,
'warning': #f59e0b,
);
/* প্রতিটি color-এর জন্য আলাদা class তৈরি হবে */
@each $name, $value in $colors {
.text-#{$name} { color: $value; }
.bg-#{$name} { background: $value; }
.border-#{$name}{ border-color: $value; }
}
/* Output:
.text-primary { color: #3b82f6; }
.bg-primary { background: #3b82f6; }
.text-danger { color: #ef4444; }
... এভাবে সব রঙের জন্য */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
@for — Spacing utility class তৈরি
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@for $i from 1 through 8 {
.mt-#{$i} { margin-top: $i * 4px; }
.mb-#{$i} { margin-bottom: $i * 4px; }
.pt-#{$i} { padding-top: $i * 4px; }
.pb-#{$i} { padding-bottom:$i * 4px; }
}
/* Output:
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
... mt-8 পর্যন্ত */
Feature ৫: Partials ও @use — ফাইল ভাগ করো ফাইল কাঠামো
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📁 SCSS ফাইল কাঠামো (ITCSS + SASS Partial)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
styles/
├── abstracts/ ← CSS output নেই
│ ├── _variables.scss ← সব $variable
│ ├── _mixins.scss ← সব @mixin
│ └── _functions.scss ← সব @function
├── base/
│ ├── _reset.scss ← CSS Reset
│ └── _typography.scss ← Default element style
├── layout/
│ ├── _grid.scss ← Grid system
│ └── _header.scss ← Header layout
├── components/
│ ├── _card.scss ← Card component
│ ├── _btn.scss ← Button component
│ └── _modal.scss ← Modal component
├── pages/
│ ├── _home.scss ← Home page specific
│ └── _about.scss ← About page specific
└── main.scss ← সব @use এখানে
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* main.scss — সব ফাইল এখানে একত্র করো */
/* @use = আধুনিক পদ্ধতি (namespace সহ) */
@use 'abstracts/variables' as v;
@use 'abstracts/mixins' as m;
@use 'abstracts/functions' as f;
/* বা সরাসরি — namespace ছাড়া */
@use 'abstracts/variables' as *;
@use 'abstracts/mixins' as *;
@use 'base/reset';
@use 'base/typography';
@use 'layout/grid';
@use 'layout/header';
@use 'components/card';
@use 'components/btn';
@use 'components/modal';
@use 'pages/home';
@use 'pages/about';
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Namespace সহ @use ব্যবহার
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* _card.scss — variables namespace দিয়ে ব্যবহার */
@use '../abstracts/variables' as v;
@use '../abstracts/mixins' as m;
.card {
background: v.$color-white; /* v. = variables namespace */
border-radius: v.$radius-lg;
box-shadow: v.$shadow-sm;
@include m.respond-to('md') { /* m. = mixins namespace */
padding: 12px;
}
}
SASS Install ও Compile করার পদ্ধতি Setup
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Terminal কমান্ড
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
# SASS ইনস্টল করো (Node.js লাগবে)
npm install -g sass
# একটি ফাইল compile করো
sass input.scss output.css
# Watch mode — ফাইল save করলেই auto-compile
sass --watch styles/main.scss:styles/main.css
# পুরো ফোল্ডার watch করো
sass --watch styles/:dist/
# Compressed output (Production)
sass --style=compressed styles/main.scss:styles/main.min.css
# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
# package.json-এ script যোগ করো
# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
{
"scripts": {
"sass": "sass styles/main.scss dist/main.css",
"sass:watch": "sass --watch styles/main.scss:dist/main.css",
"sass:build": "sass --style=compressed styles/main.scss:dist/main.min.css"
}
}
# এরপর terminal-এ:
npm run sass:watch ← Development
npm run sass:build ← Production
SASS-এর সুবিধা ও সীমাবদ্ধতা মূল্যায়ন
| বিষয় | ✅ সুবিধা | ⚠️ সীমাবদ্ধতা |
|---|---|---|
| Variable | একবার বদলাও — সব জায়গায় বদলায় | CSS Custom Property-ও এখন একই কাজ করে |
| Nesting | BEM-এর সাথে পরিষ্কার কোড | বেশি deep nesting ↗ specificity সমস্যা |
| Mixin | Responsive, animation — DRY code | অনেক @include ↗ CSS ফাইল বড় হয় |
| Build Step | — | Compile দরকার — সরাসরি browser-এ চলে না |
| Debugging | Source Map দিয়ে সমাধান | Compiled CSS debug করা জটিল |
| Modern CSS | — | CSS Nesting ও Custom Property এখন native-এ আছে |
🔷 ৮. PostCSS — CSS Postprocessor
PostCSS — CSS লেখার পরে JavaScript plugin দিয়ে সেটাকে রূপান্তর করার একটি tool। SASS যেমন লেখার আগে CSS তৈরি করে, PostCSS তেমনি লেখা CSS-কে প্রসেস করে উন্নত করে — vendor prefix যোগ করা, ভবিষ্যতের CSS চালানো, অথবা unused CSS বাদ দেওয়া।
SASS বনাম PostCSS — মূল পার্থক্য তুলনা
| বিষয় | SASS / SCSS | PostCSS |
|---|---|---|
| ধরন | Preprocessor — SCSS → CSS | Postprocessor — CSS → উন্নত CSS |
| ভাষা | নিজস্ব SCSS syntax | সাধারণ CSS লেখো, plugin process করে |
| কাজ | Variable, Mixin, Nesting | Autoprefixer, Future CSS, PurgeCSS |
| নমনীয়তা | নির্দিষ্ট feature set | Plugin দিয়ে যা খুশি যোগ করো ✅ |
| একসাথে? | ✅ হ্যাঁ! SCSS লেখো → PostCSS দিয়ে process করো | |
Plugin ১: Autoprefixer — সবচেয়ে গুরুত্বপূর্ণ Autoprefixer
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Autoprefixer — বিভিন্ন browser-এর জন্য
-webkit-, -moz-, -ms- prefix স্বয়ংক্রিয়ভাবে যোগ করে
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* তুমি যা লেখো (input CSS) */
.card {
display: flex;
user-select: none;
backdrop-filter: blur(10px);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
/* Autoprefixer-এর পর (output CSS) — prefix স্বয়ংক্রিয় যোগ হয় */
.card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
/* ✅ তুমি prefix ছাড়া লেখো — Autoprefixer নিজেই যোগ করে */
Plugin ২: postcss-preset-env — ভবিষ্যতের CSS আজই লেখো Future CSS
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
postcss-preset-env — Modern/Future CSS syntax
পুরনো browser-এ চালানোর জন্য রূপান্তর করে
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ১. CSS Nesting — এখন Modern browser-এ আছে, পুরনোতে নেই */
/* তুমি লেখো: */
.card {
background: white;
& .card__title {
font-size: 1.25rem;
}
&:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
}
/* postcss-preset-env রূপান্তর করে: */
.card { background: white; }
.card .card__title { font-size: 1.25rem; }
.card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
/* ২. Custom Media Queries */
/* তুমি লেখো: */
@custom-media --tablet (max-width: 768px);
@custom-media --mobile (max-width: 480px);
.hero {
font-size: 3rem;
@media (--tablet) { font-size: 2rem; }
@media (--mobile) { font-size: 1.5rem; }
}
/* রূপান্তরের পর: */
.hero { font-size: 3rem; }
@media (max-width: 768px) { .hero { font-size: 2rem; } }
@media (max-width: 480px) { .hero { font-size: 1.5rem; } }
/* ৩. :is() ও :has() — পুরনো browser-এ fallback */
/* তুমি লেখো: */
:is(h1, h2, h3) { line-height: 1.2; }
/* Browser support অনুযায়ী রূপান্তর:
h1, h2, h3 { line-height: 1.2; } */
/* ৪. oklch() color — Modern color space */
/* তুমি লেখো: */
.btn { background: oklch(60% 0.2 230); }
/* পুরনো browser-এর জন্য fallback:
.btn { background: #3b82f6; }
.btn { background: oklch(60% 0.2 230); } */
Plugin ৩: cssnano — CSS Minify করো (Production) Minification
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
cssnano — CSS ফাইলের আকার ছোট করে
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Development CSS (তুমি লেখো): */
.card {
background: white;
border-radius: 12px;
padding: 20px;
/* এটা একটা comment */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
color: #000000;
}
.btn {
background: #3b82f6;
color: white;
padding: 10px 20px;
}
/* cssnano-র পর (Production): */
.card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px
rgba(0,0,0,.1);color:#000}.btn{background:#3b82f6;color:#fff;padding:10px 20px}
/* cssnano যা করে:
✅ Comment সরিয়ে দেয়
✅ Whitespace কমায়
✅ #000000 → #000 সংক্ষেপ করে
✅ white → #fff করে
✅ 0.10 → .1 করে
✅ Duplicate rule merge করে
সাধারণত ৩০-৭০% ফাইল আকার কমে ✅ */
PostCSS Setup — postcss.config.js Setup
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Terminal — Install
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
# PostCSS ও জনপ্রিয় plugin install করো
npm install -D postcss autoprefixer postcss-preset-env cssnano
# Vite-এ ব্যবহার করলে শুধু config ফাইল লাগে
# Webpack-এ postcss-loader আলাদা install লাগে
npm install -D postcss-loader
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
postcss.config.js — প্রজেক্টের root-এ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* পদ্ধতি ১: Development ও Production আলাদা config */
module.exports = (ctx) => ({
plugins: [
/* সবসময় চলবে */
require('postcss-preset-env')({
stage: 2, /* Stage 2+ features চালাও */
features: {
'nesting-rules': true, /* CSS Nesting */
'custom-media-queries': true, /* Custom media query */
'is-pseudo-class': true, /* :is() selector */
},
}),
require('autoprefixer')({
overrideBrowserslist: [
'last 2 Chrome versions',
'last 2 Firefox versions',
'last 2 Safari versions',
'last 2 Edge versions',
'> 0.5%',
'not dead',
],
}),
/* শুধু Production-এ চলবে */
ctx.env === 'production' && require('cssnano')({
preset: ['default', {
discardComments: { removeAll: true }, /* সব comment বাদ */
normalizeWhitespace: true,
}],
}),
].filter(Boolean), /* false plugin বাদ দাও */
});
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
পদ্ধতি ২: সহজ config (শুরুর জন্য)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
module.exports = {
plugins: [
require('postcss-preset-env'),
require('autoprefixer'),
],
};
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
.browserslistrc — কোন browser support করবে?
(প্রজেক্টের root-এ আলাদা ফাইল)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
last 2 versions
> 0.5%
not dead
not IE 11
Vite + PostCSS + SCSS একসাথে — বাস্তব প্রজেক্ট Setup বাস্তব Setup
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Vite project-এ SCSS + PostCSS একসাথে
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
# ১. Vite project তৈরি করো
npm create vite@latest my-project -- --template vanilla
cd my-project
# ২. SASS ও PostCSS plugin install করো
npm install -D sass autoprefixer postcss-preset-env cssnano
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
vite.config.js — Vite-এ PostCSS config
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
import { defineConfig } from 'vite';
import autoprefixer from 'autoprefixer';
import postcssPresetEnv from 'postcss-preset-env';
import cssnano from 'cssnano';
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
/* সব SCSS ফাইলে variables ও mixins automatically আসবে */
additionalData: `
@use '/src/styles/abstracts/variables' as *;
@use '/src/styles/abstracts/mixins' as *;
`,
},
},
postcss: {
plugins: [
postcssPresetEnv({ stage: 2 }),
autoprefixer(),
/* Production build-এ minify */
...(process.env.NODE_ENV === 'production' ? [cssnano()] : []),
],
},
},
});
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📁 চূড়ান্ত ফাইল কাঠামো
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
my-project/
├── src/
│ └── styles/
│ ├── abstracts/
│ │ ├── _variables.scss
│ │ └── _mixins.scss
│ ├── base/
│ │ └── _reset.scss
│ ├── components/
│ │ ├── _card.scss
│ │ └── _btn.scss
│ └── main.scss ← সব @use এখানে
├── postcss.config.js ← PostCSS config
└── vite.config.js ← Vite config
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Build pipeline কীভাবে কাজ করে:
main.scss (SCSS লেখো)
↓ Vite + sass compiler
plain CSS
↓ PostCSS
postcss-preset-env (Future CSS → Compatible CSS)
↓
Autoprefixer (vendor prefix যোগ)
↓
cssnano (Minify — Production-এ)
↓
final main.css (browser-এ যায়) */
জনপ্রিয় PostCSS Plugin-এর তালিকা Plugin তালিকা
| Plugin | কী করে | কখন লাগে |
|---|---|---|
| autoprefixer | Vendor prefix স্বয়ংক্রিয় যোগ করে | সব প্রজেক্টে ✅ |
| postcss-preset-env | Future CSS → Compatible CSS | Modern CSS feature ব্যবহারে ✅ |
| cssnano | CSS Minify — ফাইল ছোট করে | Production Build ✅ |
| postcss-import | @import এক ফাইলে merge করে | Plain CSS project |
| postcss-mixins | CSS-এ Mixin — SCSS ছাড়া | Plain CSS + mixin দরকার হলে |
| postcss-nested | CSS Nesting — SCSS ছাড়া | Plain CSS + nesting দরকার হলে |
| stylelint | CSS-এর Linter — ভুল ধরে | টিম প্রজেক্ট, Code Quality |
| tailwindcss | Tailwind — PostCSS plugin হিসেবে চলে | Tailwind ব্যবহারে ✅ |
✅ SASS ও PostCSS — কখন কোনটি?
নতুন প্রজেক্টে → SCSS দিয়ে লেখো (Variable, Mixin, Nesting) + PostCSS + Autoprefixer দিয়ে process করো (prefix স্বয়ংক্রিয় হবে) + Production-এ cssnano যোগ করো (ফাইল ছোট হবে) + Modern CSS feature লিখতে চাইলে postcss-preset-env ব্যবহার করো + React / Next.js-এ → Tailwind (যা ভেতরে PostCSS চালায়) বা CSS Modules + PostCSS + SASS ও PostCSS একসাথে ব্যবহার করা যায় — এরা পরস্পরের পরিপূরক।
নতুন প্রজেক্টে → SCSS দিয়ে লেখো (Variable, Mixin, Nesting) + PostCSS + Autoprefixer দিয়ে process করো (prefix স্বয়ংক্রিয় হবে) + Production-এ cssnano যোগ করো (ফাইল ছোট হবে) + Modern CSS feature লিখতে চাইলে postcss-preset-env ব্যবহার করো + React / Next.js-এ → Tailwind (যা ভেতরে PostCSS চালায়) বা CSS Modules + PostCSS + SASS ও PostCSS একসাথে ব্যবহার করা যায় — এরা পরস্পরের পরিপূরক।
🔷 সব Methodology তুলনা ও কোনটি বেছে নেবে?
| Methodology | Naming | শেখার কষ্ট | টিমে কাজ | React/Component | সেরা প্রজেক্ট |
|---|---|---|---|---|---|
| BEM | .block__el--mod |
কম ✅ | ✅ সহজ | ✅ সম্ভব | যেকোনো প্রজেক্ট — শুরু করার সেরা ✅ |
| OOCSS | Structure + Skin আলাদা class | মাঝারি | ✅ ভালো | ✅ সম্ভব | Design System, UI Library |
| SMACSS | l-, is-, t- |
মাঝারি | ✅ ভালো | ✅ সম্ভব | মাঝারি থেকে বড় প্রজেক্ট |
| ITCSS | o-, c-, u- |
বেশি | ✅ সেরা | ✅ সম্ভব | বড় Enterprise প্রজেক্ট |
| Utility-First | HTML-এ সরাসরি class | মাঝারি (Tailwind) | ✅ সহজ | ✅ সেরা | দ্রুত development, Tailwind প্রজেক্ট ✅ |
| CSS-in-JS | JS component-এ CSS | বেশি | মাঝারি | ✅ React-এর জন্য | React / Next.js App |
| Sass / SCSS | $var, @mixin, & |
কম-মাঝারি ✅ | ✅ সেরা | ✅ সব framework-এ | যেকোনো বড় প্রজেক্ট — BEM-এর সাথে আদর্শ ✅ |
| PostCSS | Plugin-based transform | কম (config মাত্র) | ✅ ভালো | ✅ সব framework-এ | সব প্রজেক্টে — Build pipeline-এ ✅ |
কোন পরিস্থিতিতে কোনটি? সিদ্ধান্ত গাইড
| পরিস্থিতি | সেরা পছন্দ | কারণ |
|---|---|---|
| শিখছি, ছোট প্রজেক্ট | BEM | সহজ, সর্বত্র কাজ করে, শিল্পমান |
| দ্রুত prototype বানাতে চাই | Utility-First (Tailwind) | CSS লিখতে হয় না — সবচেয়ে দ্রুত |
| বড় টিমে কাজ, বড় প্রজেক্ট | Sass + BEM + ITCSS | সুশৃঙ্খল, Variable ও Mixin দিয়ে সহজ |
| React / Next.js App | CSS Modules বা Tailwind | Automatic scope, Component-friendly |
| Design System বানাচ্ছি | Sass + OOCSS + ITCSS | Variable, Mixin ও পুনর্ব্যবহার — সেরা |
| Legacy প্রজেক্ট সংস্কার | SMACSS | আস্তে আস্তে ভাগ করা যায় |
| Browser compatibility দরকার | PostCSS + Autoprefixer | prefix নিজে লিখতে হয় না — স্বয়ংক্রিয় |
| Modern CSS (nesting, oklch) লিখতে চাই | PostCSS preset-env | Draft CSS → পুরনো browser-এও চলে |
Methodology মিশিয়ে ব্যবহার — বাস্তব দলের পদ্ধতি বাস্তব
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
বাস্তব প্রজেক্টে Methodology মেশানো — সবচেয়ে প্রচলিত
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ITCSS কাঠামো + BEM নামকরণ + SMACSS State + Utility class */
/* ─── স্তর ১-৪: Settings, Tools, Generic, Elements ─── */
:root { --color-primary: #3b82f6; /* ... */ }
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--font-base); }
/* ─── স্তর ৫: Objects — চেহারাবিহীন Layout ─── */
.o-container { max-width: 1280px; margin-inline: auto; padding-inline: 24px; }
.o-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* ─── স্তর ৬: Components — BEM নামকরণ দিয়ে ─── */
.c-card { background: white; border-radius: 12px; overflow: hidden; }
.c-card__image { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.c-card__body { padding: 20px; }
.c-card__title { font-size: 1.25rem; font-weight: 700; }
.c-card--featured { border: 2px solid #f59e0b; } /* BEM Modifier */
.c-btn { display: inline-flex; padding: 10px 20px; border-radius: 6px; font-weight: 600; }
.c-btn--primary { background: var(--color-primary); color: white; }
/* ─── SMACSS State — JavaScript দিয়ে toggle ─── */
.is-active { display: block !important; }
.is-hidden { display: none !important; }
.is-loading { opacity: 0.6; pointer-events: none; }
/* ─── স্তর ৭: Utilities — Helper ─── */
.u-sr-only { position: absolute; width: 1px; height: 1px; clip: rect(0,0,0,0); }
.u-truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.u-text-center { text-align: center !important; }
/* ─── HTML-এ ব্যবহার ─── */
/*
<main class="o-container">
<div class="o-grid-3">
<article class="c-card c-card--featured is-loading">
<img class="c-card__image" ...>
<div class="c-card__body">
<h2 class="c-card__title u-truncate">লম্বা শিরোনাম</h2>
<button class="c-btn c-btn--primary">পড়ো</button>
</div>
</article>
</div>
</main>
*/
✅ CSS Methodology-র সোনালি নিয়ম:
শুরুতে BEM শেখো — নামকরণ পরিষ্কার হবে + ফাইল সংগঠনে ITCSS-এর ধারণা ব্যবহার করো + JavaScript state-এ
শুরুতে BEM শেখো — নামকরণ পরিষ্কার হবে + ফাইল সংগঠনে ITCSS-এর ধারণা ব্যবহার করো + JavaScript state-এ
is- prefix (SMACSS) দাও +
Helper class-এ u- prefix (ITCSS) দাও +
Variable, Mixin, Nesting-এর জন্য Sass/SCSS ব্যবহার করো +
Browser prefix-এর জন্য PostCSS Autoprefixer সবসময় চালু রাখো +
Production build-এ cssnano দিয়ে CSS minify করো +
React-এ CSS Modules বা Tailwind ব্যবহার করো +
একটি প্রজেক্টে একটি নিয়মে থাকো — মাঝপথে বদলো না +
টিমে Style Guide লিখে রাখো যাতে সবাই একই নিয়মে লেখে।
📖 CSS Quick Reference — সম্পূর্ণ Property রেফারেন্স
CSS-এর সব গুরুত্বপূর্ণ Property, তাদের সংজ্ঞা, ব্যবহার এবং সংক্ষিপ্ত উদাহরণ — এক জায়গায়।
🔷 Selectors — নির্বাচক
| Selector | সংজ্ঞা | ব্যবহার | সংক্ষিপ্ত উদাহরণ |
|---|---|---|---|
* |
সব element নির্বাচন (Universal) | CSS Reset, box-sizing সব element-এ | * { box-sizing: border-box; } |
element |
নির্দিষ্ট HTML element নির্বাচন | সব p, h1, a-এ style দিতে | p { line-height: 1.6; } |
.class |
নির্দিষ্ট class-এর element নির্বাচন | Component style দিতে | .card { border-radius: 12px; } |
#id |
নির্দিষ্ট id-এর element নির্বাচন | পেজে অনন্য element-এ | #header { position: sticky; } |
A, B |
A অথবা B উভয় নির্বাচন (Group) | একই style একাধিক element-এ | h1, h2, h3 { font-weight: 700; } |
A B |
A-র ভেতরে যেকোনো B (Descendant) | Nested element-এ style | .nav a { color: white; } |
A > B |
A-র সরাসরি সন্তান B (Child) | শুধু সরাসরি সন্তানে | ul > li { list-style: none; } |
A + B |
A-র ঠিক পরের Sibling B (Adjacent) | পরের element-এ style | h2 + p { margin-top: 8px; } |
A ~ B |
A-র পরের সব Sibling B (General) | সব পরবর্তী sibling-এ | h2 ~ p { color: #64748b; } |
[attr] |
নির্দিষ্ট Attribute আছে এমন | Attribute-নির্ভর style | [required] { border-color: red; } |
[attr="val"] |
Attribute-এর মান নির্দিষ্ট | নির্দিষ্ট মানের element | [type="text"] { padding: 10px; } |
[attr*="val"] |
Attribute-এ val আছে | আংশিক মান match করতে | [class*="btn"] { cursor: pointer; } |
:hover |
Mouse উপরে থাকলে | Button, Link hover effect | .btn:hover { opacity: 0.9; } |
:focus |
Element-এ Focus থাকলে | Input, Button focus style | input:focus { border-color: blue; } |
:focus-visible |
Keyboard-এ Focus (Mouse-এ নয়) | Keyboard Accessibility | .btn:focus-visible { outline: 3px solid blue; } |
:active |
ক্লিক করার সময় | Button press effect | .btn:active { transform: scale(0.97); } |
:visited |
পরিদর্শিত Link | দেখা লিংকের রঙ বদলাতে | a:visited { color: purple; } |
:checked |
Checked Checkbox বা Radio | Custom Checkbox style | input:checked + label { color: green; } |
:disabled |
Disabled Form element | Disabled input style | input:disabled { opacity: 0.5; } |
:valid |
সঠিক মানের Input | Form Validation feedback | input:valid { border-color: green; } |
:invalid |
ভুল মানের Input | Error state style | input:invalid { border-color: red; } |
:first-child |
Parent-এর প্রথম সন্তান | প্রথম element আলাদা style | li:first-child { font-weight: 700; } |
:last-child |
Parent-এর শেষ সন্তান | শেষ element-এ border সরানো | li:last-child { border: none; } |
:nth-child(n) |
n-তম সন্তান | Zebra Striping, Stagger | tr:nth-child(even) { background: #f8fafc; } |
:not(selector) |
নির্দিষ্ট selector বাদে বাকি সব | শেষেরটি বাদে Margin | li:not(:last-child) { margin-bottom: 12px; } |
:is(A, B) |
A বা B যেকোনো একটি match | পুনরাবৃত্তি কমানো | :is(h1,h2,h3) a { color: inherit; } |
:where(A, B) |
:is() এর মতো, Specificity = 0 | Reset ও Base style-এ | :where(h1,h2) { margin: 0; } |
:has(B) |
B সন্তান থাকলে Parent নির্বাচন | Parent Selector | .card:has(img) { padding: 0; } |
::before |
element-এর content-এর আগে কাল্পনিক element | Decoration, Icon, Counter | .btn::before { content: "→ "; } |
::after |
element-এর content-এর পরে কাল্পনিক element | Tooltip arrow, Overlay | h2::after { content: ""; display: block; } |
::placeholder |
Input Placeholder-এর style | Placeholder রঙ ও font | input::placeholder { color: #94a3b8; } |
::selection |
Mouse দিয়ে select করা লেখা | Custom Highlight রঙ | ::selection { background: #3b82f6; color: white; } |
::marker |
List-এর বুলেট বা নম্বর | List Marker রঙ ও content | li::marker { color: #3b82f6; } |
🔷 Box Model — বাক্স মডেল
| Property | সংজ্ঞা | ব্যবহার | সংক্ষিপ্ত উদাহরণ |
|---|---|---|---|
width |
Element-এর প্রস্থ | Content area-র প্রস্থ নির্ধারণ | width: 300px; |
height |
Element-এর উচ্চতা | Content area-র উচ্চতা নির্ধারণ | height: 200px; |
min-width |
ন্যূনতম প্রস্থ | Button, Dropdown সর্বনিম্ন প্রস্থ | min-width: 120px; |
max-width |
সর্বোচ্চ প্রস্থ | Container, Image প্রস্থ সীমা | max-width: 1280px; |
min-height |
ন্যূনতম উচ্চতা | Hero section, Card সর্বনিম্ন উচ্চতা | min-height: 100dvh; |
max-height |
সর্বোচ্চ উচ্চতা | Scrollable Dropdown, Modal body | max-height: 300px; |
padding |
Content ও Border-এর মাঝের ভেতরের ফাঁকা জায়গা | Button, Card-এর ভেতরের ফাঁকা জায়গা | padding: 12px 24px; |
padding-top / right / bottom / left |
চার দিকের আলাদা Padding | নির্দিষ্ট দিকে Padding দিতে | padding-top: 20px; |
padding-inline |
বাম-ডান Padding (Logical) | Horizontal Padding একসাথে | padding-inline: 24px; |
padding-block |
উপর-নিচ Padding (Logical) | Vertical Padding একসাথে | padding-block: 16px; |
margin |
Border-এর বাইরে অন্য element-এর সাথে দূরত্ব | Element-এর মাঝে ফাঁকা জায়গা | margin: 0 auto; |
margin-top / right / bottom / left |
চার দিকের আলাদা Margin | নির্দিষ্ট দিকে Margin দিতে | margin-bottom: 24px; |
margin-inline |
বাম-ডান Margin (Logical) | Horizontal centering | margin-inline: auto; |
border |
Element-এর সীমারেখা (Shorthand) | Card, Input-এর border | border: 1px solid #e2e8f0; |
border-width |
Border-এর মোটা | নির্দিষ্ট মোটার border | border-width: 2px; |
border-style |
Border-এর ধরন | solid, dashed, dotted, none | border-style: dashed; |
border-color |
Border-এর রঙ | Border রঙ নির্ধারণ | border-color: #3b82f6; |
border-radius |
Border-এর কোণ গোল করা | Card, Button, Avatar | border-radius: 8px; |
box-sizing |
width/height হিসেবের নিয়ম | border-box: Padding ও Border যোগ করে না | box-sizing: border-box; |
overflow |
কন্টেন্ট উপচে পড়লে কী করবে | hidden, auto, scroll, visible | overflow: hidden; |
overflow-x / overflow-y |
নির্দিষ্ট দিকে overflow নিয়ন্ত্রণ | Responsive Table, Scroll | overflow-x: auto; |
outline |
Border-এর বাইরে রেখা (জায়গা নেয় না) | Focus indicator | outline: 3px solid #3b82f6; |
outline-offset |
Outline ও Border-এর মাঝের ফাঁক | Focus ring সৌন্দর্য | outline-offset: 2px; |
box-shadow |
Element-এর চারপাশে ছায়া | Card, Button Elevation | box-shadow: 0 4px 12px rgba(0,0,0,0.1); |
aspect-ratio |
প্রস্থ ও উচ্চতার অনুপাত | Video, Image Card অনুপাত | aspect-ratio: 16 / 9; |
🔷 Typography — টাইপোগ্রাফি
| Property | সংজ্ঞা | ব্যবহার | সংক্ষিপ্ত উদাহরণ |
|---|---|---|---|
font-family |
লেখার ফন্ট নির্ধারণ | Body, Heading-এর ফন্ট | font-family: 'Inter', system-ui, sans-serif; |
font-size |
লেখার আকার | Heading, Body, Caption আকার | font-size: clamp(1rem, 4vw, 3rem); |
font-weight |
লেখার মোটা (পাতলা-মোটা) | Heading bold, Body normal | font-weight: 700; |
font-style |
লেখার ধরন — italic, normal | উদ্ধৃতি, বিশেষ শব্দ Italic | font-style: italic; |
font-variant |
Small Caps ও অন্যান্য ভিন্নতা | Small-caps Typography | font-variant: small-caps; |
font |
Font-এর সব property Shorthand | এক লাইনে সব font property | font: 700 1.5rem/1.2 'Inter', sans-serif; |
line-height |
লাইনের উচ্চতা (পঙক্তির ফাঁক) | পড়ার উপযোগী spacing | line-height: 1.6; |
letter-spacing |
অক্ষরের মাঝে ফাঁক | Heading, Uppercase Label | letter-spacing: 0.05em; |
word-spacing |
শব্দের মাঝে ফাঁক | Justified লেখায় | word-spacing: 0.1em; |
text-align |
লেখার অনুভূমিক সারিবদ্ধতা | Heading center, Body left | text-align: center; |
text-decoration |
লেখায় রেখা যোগ করা | Link underline সরানো বা যোগ | text-decoration: none; |
text-transform |
লেখার Case পরিবর্তন | uppercase, lowercase, capitalize | text-transform: uppercase; |
text-indent |
অনুচ্ছেদের প্রথম লাইনের ইন্ডেন্ট | বইয়ের মতো Paragraph | text-indent: 2em; |
text-overflow |
লেখা উপচে পড়লে ... দেখানো | Single-line Truncation | text-overflow: ellipsis; |
text-shadow |
লেখার ছায়া | Heading-এ subtle shadow | text-shadow: 0 2px 4px rgba(0,0,0,0.2); |
white-space |
লেখা wrap হবে কিনা ও space রাখবে কিনা | nowrap: একলাইনে, pre: code block | white-space: nowrap; |
word-break |
লম্বা শব্দ কোথায় ভাঙবে | URL, লম্বা লেখা overflow ঠেকানো | word-break: break-word; |
overflow-wrap |
লেখা container-এ না ধরলে ভাঙবে কিনা | URL, Email overflow রোধে | overflow-wrap: break-word; |
vertical-align |
Inline element-এর উল্লম্ব অবস্থান | Icon ও লেখা মেলানো | vertical-align: middle; |
color |
লেখার রঙ | Body, Heading, Link রঙ | color: #1e293b; |
🔷 Color ও Background — রঙ ও ব্যাকগ্রাউন্ড
| Property | সংজ্ঞা | ব্যবহার | সংক্ষিপ্ত উদাহরণ |
|---|---|---|---|
color |
লেখার রঙ | সব লেখার রঙ নির্ধারণ | color: #1e293b; |
background-color |
Element-এর Background রঙ | Card, Button, Section রঙ | background-color: #f8fafc; |
background-image |
Background-এ ছবি বা Gradient | Hero image, Pattern, Gradient | background-image: url("hero.jpg"); |
background-repeat |
Background ছবি বারবার দেখাবে কিনা | no-repeat: একবার, repeat: টাইল | background-repeat: no-repeat; |
background-position |
Background ছবির অবস্থান | center, top, custom position | background-position: center; |
background-size |
Background ছবির আকার | cover: ঢাকা, contain: সম্পূর্ণ | background-size: cover; |
background-attachment |
Scroll করলে Background সরবে কিনা | fixed: Parallax, scroll: সাধারণ | background-attachment: fixed; |
background-clip |
Background কতটুকু এলাকা ঢাকবে | text: Gradient লেখা | background-clip: text; |
background |
সব Background property Shorthand | এক লাইনে সব Background | background: #1a1a2e url("hero.jpg") no-repeat center/cover; |
opacity |
Element-এর স্বচ্ছতা (0=স্বচ্ছ, 1=অস্বচ্ছ) | Hover dim, Disabled state | opacity: 0.8; |
filter |
ভিজ্যুয়াল ইফেক্ট প্রয়োগ | blur, grayscale, brightness ইত্যাদি | filter: grayscale(100%); |
backdrop-filter |
পেছনের কন্টেন্টে ভিজ্যুয়াল ইফেক্ট | Glassmorphism, Frosted Glass | backdrop-filter: blur(12px); |
mix-blend-mode |
Element পেছনের কন্টেন্টের সাথে কীভাবে মিশবে | Duotone, Overlay effect | mix-blend-mode: multiply; |
🔷 Layout — Display ও Position
| Property | সংজ্ঞা | ব্যবহার | সংক্ষিপ্ত উদাহরণ |
|---|---|---|---|
display |
Element কীভাবে পেজে প্রদর্শিত হবে | block, inline, flex, grid, none | display: flex; |
position |
Element পেজে কোথায় থাকবে | static, relative, absolute, fixed, sticky | position: sticky; top: 0; |
top / right / bottom / left |
Positioned Element-এর offset | position: absolute/fixed/sticky-তে | top: 0; right: 0; |
inset |
top, right, bottom, left Shorthand | Overlay তৈরিতে | inset: 0; |
z-index |
Element কোন স্তরে থাকবে | Dropdown, Modal, Tooltip | z-index: 100; |
float |
Element বাম বা ডানে ভাসানো | Image Text Wrap | float: left; |
clear |
Float-এর নিচে নামানো | Float-এর পরে layout ঠিক করা | clear: both; |
visibility |
Element দৃশ্যমান কিনা (জায়গা ধরে রাখে) | hidden: লুকানো কিন্তু জায়গা আছে | visibility: hidden; |
cursor |
Mouse Cursor-এর ধরন | pointer: হাত, not-allowed: নিষিদ্ধ | cursor: pointer; |
pointer-events |
Mouse Event কাজ করবে কিনা | none: ক্লিক অসম্ভব করতে | pointer-events: none; |
user-select |
লেখা Select করা যাবে কিনা | none: Select রোধ করতে | user-select: none; |
resize |
Textarea আকার পরিবর্তন নিয়ন্ত্রণ | none, vertical, horizontal | resize: vertical; |
🔷 Flexbox — নমনীয় Layout
| Property | সংজ্ঞা | ব্যবহার | সংক্ষিপ্ত উদাহরণ |
|---|---|---|---|
display: flex |
Flex Container চালু করা | যেকোনো Row বা Column layout-এ | display: flex; |
flex-direction |
Item সাজানোর দিক | row: পাশাপাশি, column: উপর-নিচ | flex-direction: column; |
flex-wrap |
Item নতুন লাইনে যাবে কিনা | wrap: নতুন লাইন, nowrap: একলাইন | flex-wrap: wrap; |
flex-flow |
flex-direction ও flex-wrap Shorthand | এক লাইনে দুটি property | flex-flow: row wrap; |
justify-content |
Main Axis বরাবর Item সাজানো | center, space-between, flex-end | justify-content: space-between; |
align-items |
Cross Axis বরাবর Item সাজানো | center: মাঝে, stretch: প্রসারিত | align-items: center; |
align-content |
Multi-line Flex Row সাজানো | flex-wrap: wrap থাকলে কাজ করে | align-content: space-between; |
gap |
Item-এর মাঝে ফাঁকা জায়গা | Margin-এর পরিবর্তে Gap | gap: 24px; |
flex-grow |
বাড়তি জায়গা কীভাবে নেবে | 1: সব বাড়তি জায়গা, 0: নেবে না | flex-grow: 1; |
flex-shrink |
জায়গা কম হলে কতটা ছোট হবে | 0: ছোট হবে না, 1: হবে | flex-shrink: 0; |
flex-basis |
Item-এর ভিত্তি আকার | grow/shrink হওয়ার আগের আকার | flex-basis: 200px; |
flex |
grow, shrink, basis Shorthand | flex: 1 = সমান ভাগে বাড়ে | flex: 1; |
order |
Item-এর দৃশ্যমান ক্রম পরিবর্তন | Mobile-এ কন্টেন্ট আগে আনতে | order: -1; |
align-self |
নির্দিষ্ট Item-এর Cross Axis alignment | Container-এর align-items override | align-self: flex-end; |
place-items |
align-items ও justify-items Shorthand | Grid/Flex-এ সম্পূর্ণ Center | place-items: center; |
🔷 CSS Grid — দ্বিমাত্রিক Layout
| Property | সংজ্ঞা | ব্যবহার | সংক্ষিপ্ত উদাহরণ |
|---|---|---|---|
display: grid |
Grid Container চালু করা | যেকোনো 2D Layout-এ | display: grid; |
grid-template-columns |
Grid Column-এর সংখ্যা ও আকার | Card Grid, Page Layout | grid-template-columns: repeat(3, 1fr); |
grid-template-rows |
Grid Row-এর সংখ্যা ও আকার | Fixed height Row তৈরিতে | grid-template-rows: auto 1fr auto; |
grid-template-areas |
Grid-এর নামযুক্ত এলাকা সংজ্ঞায়ন | Page Layout — Header, Sidebar, Main | grid-template-areas: "header header" "sidebar main"; |
grid-area |
Grid Item-কে নামযুক্ত এলাকায় রাখা | grid-template-areas-এর সাথে | grid-area: header; |
grid-column |
Item কোন Column-এ ও কতটুকু জুড়ে | span দিয়ে একাধিক Column জুড়ে | grid-column: 1 / -1; |
grid-row |
Item কোন Row-এ ও কতটুকু জুড়ে | span দিয়ে একাধিক Row জুড়ে | grid-row: span 2; |
gap / row-gap / column-gap |
Grid Track-এর মাঝে ফাঁকা জায়গা | Card-এর মাঝে সমান ফাঁক | gap: 24px; |
justify-items |
Grid Cell-এ Item-এর অনুভূমিক অবস্থান | start, center, end, stretch | justify-items: center; |
align-items |
Grid Cell-এ Item-এর উল্লম্ব অবস্থান | start, center, end, stretch | align-items: start; |
justify-self |
নির্দিষ্ট Item-এর অনুভূমিক অবস্থান | Container-এর justify-items override | justify-self: end; |
align-self |
নির্দিষ্ট Item-এর উল্লম্ব অবস্থান | Sidebar sticky top | align-self: start; |
grid-auto-flow |
Auto-placed Item-এর দিক | row (ডিফল্ট), column, dense | grid-auto-flow: dense; |
grid-auto-columns |
Auto-created Column-এর আকার | Dynamic Column তৈরিতে | grid-auto-columns: 1fr; |
🔷 Transform ও Animation — রূপান্তর ও অ্যানিমেশন
| Property | সংজ্ঞা | ব্যবহার | সংক্ষিপ্ত উদাহরণ |
|---|---|---|---|
transform |
Element ঘোরানো, সরানো, বড়-ছোট করা | Hover lift, Rotate, Scale | transform: translateY(-4px) scale(1.02); |
translate |
Element সরানো (Individual Property) | transform ছাড়াই সরানো | translate: 0 -4px; |
rotate |
Element ঘোরানো (Individual Property) | Dropdown Arrow, Spinner | rotate: 45deg; |
scale |
Element বড়-ছোট (Individual Property) | Hover zoom, Button press | scale: 1.1; |
transform-origin |
Transform-এর কেন্দ্র বিন্দু | কোণ থেকে ঘোরানো | transform-origin: top left; |
perspective |
3D Transform-এর দৃষ্টিকোণ দূরত্ব | Card Flip, 3D effect | perspective: 800px; |
transform-style |
3D-তে সন্তানরা নিজেই 3D হবে কিনা | preserve-3d: Card Flip-এ | transform-style: preserve-3d; |
backface-visibility |
উল্টো দিক দেখা যাবে কিনা | hidden: Card Flip-এ | backface-visibility: hidden; |
transition |
Property পরিবর্তনে মসৃণ animation | Hover, Focus state পরিবর্তন | transition: all 0.3s ease; |
transition-property |
কোন property animate হবে | নির্দিষ্ট property-তে transition | transition-property: transform, opacity; |
transition-duration |
Transition-এর সময়কাল | 200ms: দ্রুত, 500ms: ধীর | transition-duration: 300ms; |
transition-timing-function |
Transition-এর গতির বক্ররেখা | ease, ease-out, cubic-bezier() | transition-timing-function: ease-out; |
transition-delay |
Transition শুরুর আগে অপেক্ষা | Stagger animation-এ | transition-delay: 0.1s; |
animation |
@keyframes Animation চালানো Shorthand | Loader, Skeleton, Hero animation | animation: spin 1s linear infinite; |
animation-name |
@keyframes-এর নাম | কোন @keyframes চলবে | animation-name: fadeIn; |
animation-duration |
Animation-এর সময়কাল | 0.4s: দ্রুত, 2s: ধীর | animation-duration: 0.5s; |
animation-iteration-count |
Animation কতবার চলবে | infinite: অনন্তকাল, 3: তিনবার | animation-iteration-count: infinite; |
animation-direction |
Animation কোন দিকে চলবে | alternate: এগিয়ে-পিছিয়ে | animation-direction: alternate; |
animation-fill-mode |
Animation শেষে কোন style থাকবে | forwards: শেষের style ধরে রাখে | animation-fill-mode: forwards; |
animation-play-state |
Animation চালু বা বন্ধ | paused: Hover-এ থামানো | animation-play-state: paused; |
will-change |
Browser-কে আগাম জানানো কী পরিবর্তন হবে | Performance অপ্টিমাইজেশন | will-change: transform; |
🔷 CSS Variable ও Function — ভেরিয়েবল ও ফাংশন
| Property / Function | সংজ্ঞা | ব্যবহার | সংক্ষিপ্ত উদাহরণ |
|---|---|---|---|
--variable |
CSS Custom Property (Variable) ঘোষণা | Design Token, Theme, Reusable value | --color-primary: #3b82f6; |
var() |
CSS Variable-এর মান ব্যবহার | যেকোনো Property-তে Variable ব্যবহার | color: var(--color-primary); |
calc() |
CSS-এ গণনা — মিশ্র একক সমর্থিত | width: calc(100% - 240px) | width: calc(100% - 2rem); |
min() |
দুটি মানের মধ্যে ছোটটি বেছে নেয় | max-width-এর বিকল্প | width: min(100%, 1280px); |
max() |
দুটি মানের মধ্যে বড়টি বেছে নেয় | min-padding-এর বিকল্প | padding: max(16px, 5%); |
clamp() |
ন্যূনতম, পছন্দের ও সর্বোচ্চ মানের মধ্যে | Fluid Typography, Fluid Spacing | font-size: clamp(1rem, 4vw, 3rem); |
env() |
Device Environment Variable | iPhone Safe Area Inset | padding-bottom: env(safe-area-inset-bottom); |
attr() |
HTML Attribute-এর মান CSS-এ ব্যবহার | content-এ Tooltip, Table label | content: attr(data-tooltip); |
counter() |
CSS Counter-এর মান দেখানো | Numbered List, Step Indicator | content: counter(step) "."; |
rgb() / rgba() |
RGB রঙের মান | রঙ ও স্বচ্ছতা নির্ধারণ | color: rgb(59 130 246 / 0.8); |
hsl() / hsla() |
Hue, Saturation, Lightness রঙের মান | Shade System, Dynamic Theme | color: hsl(220 90% 56%); |
oklch() |
Perceptually uniform আধুনিক রঙ | আধুনিক Design System | color: oklch(0.6 0.2 250); |
color-mix() |
দুটি রঙ নির্দিষ্ট অনুপাতে মেশানো | Hover রঙ, Tint/Shade তৈরি | background: color-mix(in srgb, var(--bg) 85%, black); |
linear-gradient() |
সরল রেখায় রঙের ধাপ | Button, Hero, Overlay | background: linear-gradient(135deg, #3b82f6, #8b5cf6); |
radial-gradient() |
কেন্দ্র থেকে বাইরে রঙের ধাপ | Glow, Spotlight | background: radial-gradient(circle, #3b82f6, transparent); |
conic-gradient() |
শঙ্কু আকারে রঙের ধাপ | Pie Chart, Color Wheel | background: conic-gradient(#3b82f6 30%, #22c55e 70%); |
🔷 Responsive ও Media Query — Responsive Design
| Property / At-Rule | সংজ্ঞা | ব্যবহার | সংক্ষিপ্ত উদাহরণ |
|---|---|---|---|
@media |
নির্দিষ্ট শর্তে CSS প্রযোজ্য | Screen size, Orientation, Preference | @media (min-width: 768px) { } |
@media (min-width) |
নির্দিষ্ট প্রস্থের বেশি হলে — Mobile-First | Tablet ও বড় স্ক্রিনে style | @media (min-width: 1024px) { .grid { columns: 3; } } |
@media (max-width) |
নির্দিষ্ট প্রস্থের কম হলে — Desktop-First | মোবাইলে override | @media (max-width: 640px) { .nav { display: none; } } |
@media (orientation) |
স্ক্রিনের দিক — portrait বা landscape | মোবাইল orientation অনুযায়ী layout | @media (orientation: landscape) { } |
@media (prefers-color-scheme) |
সিস্টেমের Dark বা Light Mode | স্বয়ংক্রিয় Dark Mode | @media (prefers-color-scheme: dark) { } |
@media (prefers-reduced-motion) |
ব্যবহারকারী Motion কমাতে চান কিনা | Animation Accessibility | @media (prefers-reduced-motion: reduce) { } |
@media (hover) |
Mouse আছে কিনা | Touch device-এ hover style বাদ দিতে | @media (hover: hover) { .btn:hover { } } |
@container |
Parent Container-এর আকার অনুযায়ী CSS | Component-level Responsive | @container (min-width: 400px) { .card { flex-direction: row; } } |
container-type |
Element-কে Container হিসেবে ঘোষণা | @container-এর আগে parent-এ | container-type: inline-size; |
@layer |
CSS Cascade Layer সংজ্ঞায়ন | !important ছাড়া CSS override | @layer components { .btn { } } |
@keyframes |
Animation-এর ধাপ সংজ্ঞায়ন | Loader, Skeleton, Hero Animation | @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } |
@font-face |
কাস্টম Font লোড করা | Google Font, Local Font ব্যবহার | @font-face { font-family: 'Inter'; src: url('inter.woff2'); } |
@property |
Typed CSS Variable সংজ্ঞায়ন | Animatable CSS Variable | @property --hue { syntax: "<number>"; inherits: false; initial-value: 220; }
|
🔷 Miscellaneous — বিবিধ Property
| Property | সংজ্ঞা | ব্যবহার | সংক্ষিপ্ত উদাহরণ |
|---|---|---|---|
clip-path |
Element-এর দৃশ্যমান এলাকা কেটে দেওয়া | Circle, Triangle, Polygon আকৃতি | clip-path: circle(50%); |
shape-outside |
Float Element-এর চারপাশে Text Wrap আকৃতি | Magazine-style Image Text Wrap | shape-outside: circle(50%); |
object-fit |
img/video নির্ধারিত আকারে কীভাবে ফিট হবে | cover: ঢাকা, contain: সম্পূর্ণ | object-fit: cover; |
object-position |
object-fit: cover-এ ছবির ফোকাস পয়েন্ট | মুখের ছবিতে উপরে ফোকাস | object-position: top center; |
content |
::before ও ::after-এর কন্টেন্ট | Icon, Counter, Tooltip text | content: attr(data-label); |
counter-reset |
CSS Counter তৈরি বা শূন্যে সেট | Numbered List শুরু করতে | counter-reset: step; |
counter-increment |
প্রতিটি Element-এ Counter বাড়ানো | Step Indicator, Custom OL | counter-increment: step; |
list-style |
List-এর বুলেট বা নম্বরের ধরন Shorthand | none: বুলেট সরানো, Navigation | list-style: none; |
list-style-type |
বুলেট বা নম্বরের ধরন | disc, decimal, lower-alpha | list-style-type: decimal; |
list-style-position |
বুলেট ভেতরে না বাইরে | inside: ভেতরে, outside: বাইরে | list-style-position: inside; |
columns |
Multi-column Layout Shorthand | পত্রিকার মতো Column Layout | columns: 3 280px; |
column-gap |
Multi-column Layout-এর Column ফাঁক | Column-এর মাঝে ফাঁকা জায়গা | column-gap: 32px; |
column-rule |
Column-এর মাঝে বিভাজক রেখা | Multi-column বিভাজক | column-rule: 1px solid #e2e8f0; |
break-inside |
Item দুই Column-এ ভাঙবে কিনা | avoid: ভাঙবে না | break-inside: avoid; |
writing-mode |
লেখার প্রবাহের দিক | Vertical Label, Japanese text | writing-mode: vertical-rl; |
direction |
লেখার দিক — LTR বা RTL | আরবি, হিব্রু ভাষায় | direction: rtl; |
scroll-behavior |
Anchor Link-এ Scroll-এর ধরন | smooth: মসৃণ Scroll | scroll-behavior: smooth; |
scroll-snap-type |
Scroll করলে নির্দিষ্ট বিন্দুতে আটকানো | Carousel, Full-page Scroll | scroll-snap-type: x mandatory; |
scroll-snap-align |
Snap হওয়ার বিন্দু নির্ধারণ | start, center, end | scroll-snap-align: start; |
isolation |
নিজস্ব Stacking Context তৈরি | isolate: z-index সমস্যা সমাধান | isolation: isolate; |
contain |
Layout Isolation — Performance | layout, paint, strict | contain: layout; |
content-visibility |
Viewport-এর বাইরে Render না করা | Long Page-এ Performance | content-visibility: auto; |
appearance |
Native Browser UI সরানো | Custom Form Element তৈরিতে | appearance: none; |
caret-color |
Input-এর Text Cursor রঙ | Custom Input Cursor রঙ | caret-color: #3b82f6; |
accent-color |
Checkbox, Radio, Range-এর Accent রঙ | Native Form Element Theme | accent-color: #3b82f6; |
touch-action |
Touch Gesture নিয়ন্ত্রণ | none: Default gesture বন্ধ | touch-action: pan-y; |
🔷 Color Formats — রঙের ফরম্যাট Reference
| ফরম্যাট | সংজ্ঞা | Alpha সমর্থন | উদাহরণ |
|---|---|---|---|
| Named Color | ইংরেজি নামে রঙ (১৪০+) | না | color: tomato; |
| Hex | #RRGGBB — ১৬ ভিত্তিক রঙ | না | color: #3b82f6; |
| Hex Short | #RGB — সংক্ষিপ্ত Hex | না | color: #fff; |
| Hex Alpha | #RRGGBBAA — Alpha সহ Hex | হ্যাঁ ✅ | color: #3b82f680; |
| rgb() | লাল, সবুজ, নীল — 0–255 | না | color: rgb(59 130 246); |
| rgba() / rgb() + Alpha | RGB + Alpha স্বচ্ছতা | হ্যাঁ ✅ | color: rgb(0 0 0 / 0.5); |
| hsl() | Hue, Saturation, Lightness | না | color: hsl(220 90% 56%); |
| hsla() / hsl() + Alpha | HSL + Alpha স্বচ্ছতা | হ্যাঁ ✅ | color: hsl(220 90% 56% / 0.8); |
| hwb() | Hue, Whiteness, Blackness | হ্যাঁ ✅ | color: hwb(220 10% 0%); |
| oklch() | Perceptually uniform — Lightness, Chroma, Hue | হ্যাঁ ✅ | color: oklch(0.6 0.2 250); |
| oklab() | Perceptually uniform — Lightness, a, b | হ্যাঁ ✅ | color: oklab(0.6 -0.1 0.1); |
| lch() | Lightness, Chroma, Hue (Lab-based) | হ্যাঁ ✅ | color: lch(50 40 250); |
| color() | নির্দিষ্ট Color Space-এ রঙ | হ্যাঁ ✅ | color: color(display-p3 0.5 0.2 0.8); |
| color-mix() | দুটি রঙ নির্দিষ্ট অনুপাতে মেশানো | হ্যাঁ ✅ | color: color-mix(in srgb, #3b82f6 80%, white); |
| currentColor | বর্তমান color property-র মান | — | border-color: currentColor; |
| transparent | সম্পূর্ণ স্বচ্ছ রঙ | — | background: transparent; |
🔷 CSS Units — একক Reference
| একক | সংজ্ঞা | ব্যবহার | উদাহরণ |
|---|---|---|---|
px |
Pixel — নির্দিষ্ট আকার | Border, Shadow, Icon | border: 1px solid; |
rem |
Root font-size-এর গুণ | Font, Spacing — সেরা ✅ | font-size: 1.5rem; |
em |
Parent font-size-এর গুণ | Padding, Margin — font-এর সাথে | padding: 0.75em 1.5em; |
% |
Parent-এর আকারের শতাংশ | Width, Fluid Layout | width: 50%; |
vw |
Viewport প্রস্থের ১% | Full-width Section, Fluid Font | font-size: 5vw; |
vh |
Viewport উচ্চতার ১% | Full-screen Hero | height: 100vh; |
dvh |
Dynamic Viewport উচ্চতা | মোবাইলে Hero — সেরা ✅ | min-height: 100dvh; |
svh |
Small Viewport উচ্চতা | মোবাইলে নিরাপদ | min-height: 100svh; |
fr |
Grid-এ বাকি জায়গার ভাগ | CSS Grid Column/Row | grid-template-columns: 1fr 2fr; |
ch |
"0" অক্ষরের প্রস্থ | Reading Width, Input | max-width: 65ch; |
cqw |
Container প্রস্থের ১% | Container Query Unit | font-size: 5cqw; |
deg |
ডিগ্রি — কোণ পরিমাপ | rotate, gradient direction | rotate: 45deg; |
turn |
চক্কর — ১ = ৩৬০° | Spinner Animation | rotate: 0.5turn; |
s / ms |
Second / Millisecond — সময় | Transition, Animation duration | transition-duration: 300ms; |