CSS এর হাতেখড়ি (পর্ব – ১০)

CSS Part 10

আগের পর্বে আমরা Media Query দিয়ে responsive design শিখেছি। আজকে শিখবো Pseudo-class ও Pseudo-element — এলিমেন্টের নির্দিষ্ট অবস্থা বা অংশকে টার্গেট করার কৌশল, সাথে Transition ও Animation — যেগুলো দিয়ে পেজে প্রাণবন্ত মুভমেন্ট যোগ করা যায়।

Pseudo-class কী?

Pseudo-class দিয়ে একটা এলিমেন্টের নির্দিষ্ট অবস্থা (state) টার্গেট করা যায় — যেমন মাউস হোভার করলে, বা লিস্টের কত নম্বর আইটেম সেটা অনুযায়ী। এটা লেখা হয় সিলেক্টরের পর একটা কোলন (:) দিয়ে।

:hover — মাউস উপরে থাকলে

button {
  background-color: #3949ab;
  color: white;
}

button:hover {
  background-color: #1a237e;
}

ইউজার যখন বাটনের উপর মাউস নিয়ে যায়, তখন :hover-এর ভেতরের CSS প্রয়োগ হয়। বাটন, কার্ড, লিংকে interactivity যোগ করার এটাই সবচেয়ে বেসিক উপায়।

লিংকের অন্যান্য pseudo-class

a:link { color: blue; }       /* সাধারণ অবস্থা */
a:visited { color: purple; }  /* আগে ক্লিক করা লিংক */
a:hover { color: red; }       /* মাউস হোভার */
a:active { color: orange; }   /* ক্লিক করার মুহূর্তে */

:focus — ফর্ম ইনপুটে

ইউজার যখন কোনো input-এ ক্লিক করে বা ট্যাব চেপে সেখানে যায়, তখন :focus কাজ করে:

input:focus {
  border-color: #3949ab;
  outline: none;
}

:nth-child() — অবস্থান অনুযায়ী সিলেক্ট করা

লিস্ট বা টেবিলের নির্দিষ্ট নম্বরের আইটেম টার্গেট করতে এটা খুবই কাজে লাগে:

li:nth-child(2) {
  color: red;               /* ঠিক ২য় আইটেম */
}

tr:nth-child(odd) {
  background-color: #f5f5f5; /* বিজোড় সারি */
}

tr:nth-child(even) {
  background-color: white;   /* জোড় সারি */
}
সারি ১
সারি ২
সারি ৩

nth-child(odd/even) দিয়ে "zebra stripe" টেবিল — খুব জনপ্রিয় একটা প্যাটার্ন

Pseudo-element কী?

Pseudo-element একটু আলাদা — এটা এলিমেন্টের কোনো অবস্থা না, বরং এলিমেন্টের একটা নির্দিষ্ট অংশ টার্গেট করে, অথবা নতুন একটা "ভার্চুয়াল" কন্টেন্ট তৈরি করে। এটা লেখা হয় ডাবল কোলন (::) দিয়ে।

::before ও ::after

এলিমেন্টের ঠিক আগে বা পরে HTML না লিখেই একটা নতুন কন্টেন্ট বসানো যায় — content property বাধ্যতামূলক:

.required::after {
  content: " *";
  color: red;
}

নাম *

উপরের লাল তারা চিহ্নটা HTML-এ লেখা নেই, CSS দিয়েই যোগ হয়েছে

এটা মূলত ব্যবহার হয়:

  • ফর্মের required ফিল্ডে তারা (*) চিহ্ন দেখাতে
  • Quote বা decorative আইকন যোগ করতে
  • clearfix-এর মতো পুরনো লেআউট ট্রিকে

transition — মসৃণ পরিবর্তন

ডিফল্টভাবে CSS প্রপার্টি বদলালে সেটা সাথে সাথে (instantly) হয়ে যায় — যেমন :hover-এ রঙ বদলানো। transition দিয়ে এই বদলটাকে মসৃণ (smooth) করা যায়:

button {
  background-color: #3949ab;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #1a237e;
}

transition: background-color 0.3s ease;-এ তিনটা জিনিস বলা হয়েছে — কোন property বদলাবে (background-color), কতক্ষণ লাগবে (0.3s), আর কেমন গতিতে (ease)। সব property-তে একসাথে transition দিতে transition: all 0.3s ease; লেখা যায়।

টিপস: বাটন, কার্ড, লিংকে transition যোগ করা প্রায় সবসময়ই ভালো অভ্যাস — এটা ওয়েবসাইটকে অনেক বেশি প্রফেশনাল ও "প্রাণবন্ত" মনে করায়, মাত্র একটা লাইন CSS দিয়ে।

@keyframes ও animation

Transition শুধু দুইটা অবস্থার (আগে-পরে) মধ্যে কাজ করে। কিন্তু কোনো কিছু বারবার বা ধাপে ধাপে animate করতে @keyframes লাগে:

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}

.icon {
  animation: bounce 1s infinite;
}
⬆️

@keyframes-এ ০% থেকে ১০০% পর্যন্ত ধাপে ধাপে বলা হয় CSS কীভাবে বদলাবে। তারপর animation property দিয়ে সেই keyframe-টা কোন এলিমেন্টে, কতক্ষণ ধরে, কতবার চলবে তা বলা হয় — infinite মানে চিরকাল রিপিট হতে থাকবে।

একটা সম্পূর্ণ উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>Pseudo-class ও Animation উদাহরণ</title>
  <style>
    .btn {
      background: #3949ab;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .btn:hover {
      background: #1a237e;
    }

    table tr:nth-child(odd) {
      background-color: #f5f5f5;
    }

    .required::after {
      content: " *";
      color: red;
    }

    @keyframes fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .card {
      animation: fade-in 0.6s ease;
    }
  </style>
</head>
<body>
  <button class="btn">সাবমিট করো</button>

  <p class="required">ইমেইল</p>

  <div class="card">এই কার্ডটা পেজ লোড হলে ধীরে ধীরে দেখা যাবে</div>
</body>
</html>

নিজে চেষ্টা করো

Exercise:

  1. একটা বাটনে :hover ও transition দিয়ে মসৃণ রঙ পরিবর্তন যোগ করো
  2. একটা টেবিলে nth-child(odd) দিয়ে zebra stripe বানাও
  3. একটা required ফর্ম লেবেলে ::after দিয়ে লাল তারা চিহ্ন যোগ করো
  4. @keyframes দিয়ে একটা সিম্পল bounce বা fade animation বানাও

পরের পর্বে যা থাকছে

পর্ব ১১-এ আমরা শিখবো CSS Variables (Custom Properties) — একবার রঙ বা সাইজ ডিফাইন করে পুরো ওয়েবসাইটে বারবার ব্যবহার করা, উদাহরণসহ।

একটি মন্তব্য পোস্ট করুন

নবীনতর পূর্বতন

যোগাযোগ ফর্ম