কম্পিউটার টিউটোরিয়াল

CSS-এ এ্যাঙ্গেল (Angle) ব্যবহার করে লিনিয়ার গ্রেডিয়েন্ট ডিরেকশন সেট করা

গ্রেডিয়েন্ট ডিরেকশন কীওয়ার্ড (to left, to top right) না দিয়ে এ্যাঙ্গেল (ডিগ্রি) দিয়ে আরও সুনির্দিষ্টভাবে কন্ট্রোল করা যায়।

উদাহরণ: এ্যাঙ্গেল দিয়ে গ্রেডিয়েন্ট ডিরেকশন

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
  div { height: 200px; width: 300px; display: inline-block; margin-right: 10px; }
  .linearGradient { background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow); }
  .linearGradient1 { background-image: linear-gradient(-90deg, rgb(255, 0, 200), yellow); }
</style>
</head>
<body>
  <h1>এ্যাঙ্গেল দিয়ে লিনিয়ার গ্রেডিয়েন্ট ডিরেকশন</h1>
  <div class="linearGradient"></div>
  <div class="linearGradient1"></div>
</body>
</html>

কোড ব্যাখ্যা

  • 90deg: বাম থেকে ডান (to right সমান)।
  • -90deg: ডান থেকে বাম (to left সমান)।
  • 0deg: নিচ থেকে উপরে (to top)।
  • 180deg: উপরে থেকে নিচে (to bottom — ডিফল্ট)।

এ্যাঙ্গেল রেফারেন্স

CSS গ্রেডিয়েন্টে ০ ডিগ্রি = উপরের দিকে। ধনাত্মক এ্যাঙ্গেল ঘড়ির কাঁটায় ঘুরায়।

  1. CSS-এ একাধিক কালার স্টপ দিয়ে লিনিয়ার গ্রেডিয়েন্ট তৈরি

  2. CSS3 লিনিয়ার এবং রেডিয়াল গ্রেডিয়েন্ট ব্যবহার

  3. CSS radial-gradient() ফাংশন ব্যবহার করে রেডিয়াল গ্রেডিয়েন্টের আকার (Size) সেট করা

  4. CSS radial-gradient() ফাংশন ব্যবহার করে রেডিয়াল গ্রেডিয়েন্টের আকার (Shape) সেট করা