🔖 রং এবং ব্যাকগ্রাউন্ড (Colors & Backgrounds)

রং ছাড়া কোনো ওয়েবসাইটই সুন্দর লাগে না। CSS এ রং ব্যবহারের বেশ কয়েকটি চমৎকার পদ্ধতি রয়েছে।

📌 রং ব্যবহারের পদ্ধতিসমূহ

CSS-এ আপনি বিভিন্ন ফরম্যাটে রং লিখতে পারেন। চলুন দেখি কোনটি কখন ব্যবহার করবেন:

h1 {
  color: tomato; /* লালচে কমলা */
  background-color: dodgerblue; /* উজ্জ্বল নীল */
}

p {
  color: #ff0000; /* লাল */
  background-color: #000000; /* কালো */
}

.card {
  /* 0.5 মানে ৫০% স্বচ্ছ (transparent) */
  background-color: rgba(255, 0, 0, 0.5); 
}

📌 ব্যাকগ্রাউন্ড প্রপার্টিজ

ব্যাকগ্রাউন্ড শুধু সলিড রং হতে হবে এমন কোনো কথা নেই! আপনি চাইলে ছবিও ব্যবহার করতে পারেন।

body {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-size: cover; /* পুরো স্ক্রিন জুড়ে থাকবে */
  background-attachment: fixed; /* স্ক্রল করলেও ব্যাকগ্রাউন্ড স্থির থাকবে */
}

📌 🥷 নিঞ্জা টেকনিক: CSS Gradients (গ্র্যাডিয়েন্ট)

আগে গ্র্যাডিয়েন্ট করার জন্য ছবি ব্যবহার করা হতো। এখন CSS দিয়েই অসাধারণ গ্র্যাডিয়েন্ট তৈরি করা যায়!

.box {
  /* ডানদিকে লাল থেকে হলুদ */
  background: linear-gradient(to right, red, yellow);
}

.circle {
  /* মাঝখানে সাদা, চারপাশে নীল */
  background: radial-gradient(circle, white, blue);
}