এইচটিএমএল সিএসএস বুটস্ট্রাপ জাভাস্ক্রিপ্ট জেকুয়েরি
লগইন
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

সিএসএস পজিশন


একটি এলিমিন্টের পজিশন স্ট্যাটিক(static), রিলেটিভ(relative), ফিক্সড(fixed), এবসোলিউট(absolute) নাকি স্টিকি(sticky) হবে তা নির্ধারণ করার জন্য সিএসএস position প্রোপার্টি ব্যবহার করা হয়।

অর্থাৎ একটি এলিমেন্টের পজিশন সেট করার জন্য সিএসএস position প্রোপার্টি ব্যবহার করা হয়।

positionপ্রোপার্টির কীওয়ার্ড(keyword) ভ্যালুসমূহঃ

position প্রোপার্টির গ্লোবাল(global) ভ্যালুসমূহঃ



এরপরে এলিমেন্টগুলোর পজিশন ঠিক করে দেওয়ার জন্য top, bottom, left এবং right প্রোপার্টি ব্যবহার করা হয়।

যাইহোক, আপনি যদি প্রথমেই position প্রোপার্টি না সেট করে দেন তাহলে এই প্রোপার্টিসমূহ ঠিকমত কাজ করবে না। কারণ, এই প্রোপার্টিগুলো position প্রোপার্টির ভ্যালুর উপরে নির্ভরশীল।



এক নজরে সিএসএস পজিশন প্রোপার্টিসমূহ

bottom

absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের নিচ প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে।

clip

absolute পজিশনে থাকা একটি এলিমেন্টের কতটুকু অংশ দৃশ্যমান হবে তা নির্ধারণ করে।

cursor

কি ধরণের মাউস কার্সর প্রদর্শিত হবে তা নির্ধারণ করে।

left

absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের বাম প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে।

overflow

একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে উপচে পড়ে(overflow হয়) তাহলে কি হবে তা নির্ধারণ করে।

overflow-x

একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে উপচে পড়ে(overflow হয়) তাহলে তার ডানে বা বামে কি হবে তা নির্ধারণ করে।

overflow-y

একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে উপচে পড়ে(overflow হয়) তাহলে তার উপরে বা নিচে কি হবে তা নির্ধারণ করে।

position

একটি এলিমেন্টের পজিশনের ধরন নির্ধারণ করে।

right

absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের ডান প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে।

top

absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের উপর প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে।

z-index

একটি এলিমেন্টের stack order সেট করে।



position:static;

এইচটিএমএল এলিমেন্টসমূহের ডিফল্টভাবে পজিশন স্ট্যাটিক থাকে।

এলিমেন্টের পজিশন স্ট্যাটিক থাকলে top, right, bottom এবং left প্রোপার্টির ভ্যালুসমূহের কোনো প্রভাব থাকে না।

position: static; প্রোপার্টি সংশ্লিষ্ট এলিমেন্ট বিশেষ কোনো পদ্ধতিতে তার নিজের পজিশন পরিবর্তন করতে পারে না। এটি সব সময় পেজের স্বাভাবিক ধারা অনুযায়ী পজিশন পেয়ে থাকে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  .box { 
    display: inline-block; 
    background: orange; 
    width: 100px; 
    height: 100px; 
    color: white;
    padding: 5px;
  }
  #two { 
    position: static; 
    top: 20px; 
    left: 20px;
  }
  </style>
</head>
<body>

  <div class="box" id="one">One</div>
  <div class="box" id="two">Two</div>
  <div class="box" id="three">Three</div>

</body>
</html>

ফলাফল



উপরের উদাহরণে সিলেক্টর #two-তে position: static; ব্যবহার করায় ইহা পেজের স্বাভাবিক ধারা অনুযায়ী পজিশন পেয়েছে।



position:relative;

position: relative; প্রোপার্টি সংশ্লিষ্ট এলিমেন্ট তার নিজের সাপেক্ষে পজিশন পরিবর্তন করতে পারে।

position: relative; প্রোপার্টি সংশ্লিষ্ট এলিমেন্টের স্বাভাবিক অবস্থানের পরিবর্তন ঘটানোর জন্য top, right, bottom অথবা left প্রোপার্টি ব্যবহার করা হয়।

এক্ষেত্রে এর পার্শ্ববর্তী অন্য এলিমেন্ট এসে এই ফাঁকা অংশ পূরণ করে না। অর্থাৎ ফাঁকা অংশ ফাঁকাই রয়ে যাবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  .box { 
    display: inline-block; 
    background: orange; 
    width: 100px; 
    height: 100px; 
    color: white;
    padding: 5px;
  }
  #two { 
    position: relative; 
    top: 30px; 
    left: 40px; 
  }   
  </style>
</head>
<body>

  <div class="box" id="one">One</div>
  <div class="box" id="two">Two</div>
  <div class="box" id="three">Three</div>

</body>
</html>

ফলাফল



উপরের উদাহরণে সিলেক্টর #two-তে position: relative; ব্যবহার করায় এর নিজের সাপেক্ষে অবস্থানের পরিবর্তন ঘটেছে।



position:absolute;

position: absolute; যুক্ত একটি এলিমেন্ট তার নিকটবর্তী পূর্বসুরী(ancestor) এলিমেন্টের অবস্থানের সাপেক্ষে নিজের অবস্থানের পরিবর্তন ঘটাতে পারে।

যাই হোক, যদি Absolute পজিশনে থাকা এলিমেন্টের কোনো পূর্বসুরী না থকে তাহলে ইহা ডকুমেন্ট বডি(body) কে পূর্বসুরী ধরে নিজের অবস্থানের পরিবর্তন ঘটাতে পারে এবং পেজ স্ক্রলিং এর সাথে সাথে নড়া চড়া করে।

এক্ষেত্রে সৃষ্ট ফাঁকা অংশ পার্শ্ববর্তী অন্য এলিমেন্ট এসে পূরণ করে।

বিঃদ্রঃ static পজিশন ব্যতীত সবগুলো এলিমেন্টই নিজের অবস্থানের পরিবর্তন ঘটাতে পারে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  .box { 
    display: inline-block; 
    background: orange; 
    width: 100px; 
    height: 100px; 
    color: white;
    padding: 5px;
  }
  #two { 
    position: absolute; 
    top: 30px; 
    left: 30px; 
  } 
  </style>
</head>
<body>

  <div class="box" id="one">One</div>
  <div class="box" id="two">Two</div>
  <div class="box" id="three">Three</div>

</body>
</html>

ফলাফল



উপরের উদাহরণে সিলেক্টর #two-তে position: absolute; ব্যবহার করায় পূর্বসুরী(ancestor) এলিমেন্টের সাপেক্ষে নিজের অবস্থানের পরিবর্তন ঘটিয়েছে।



position:fixed;

position: fixed; যুক্ত একটি এলিমেন্ট viewport এর সাপেক্ষে নিজের পজিশনের পরিবর্তন ঘটাতে পার। অর্থ্যাৎ পেজ স্ক্রল করলেও ইহা নিজের অবস্থান থেকে এক বিন্দুও নড়ে না।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style> 
  .box {
    background: orange; 
    width: 100px; 
    height: 100px; 
    color: white;
    margn: 10px;
  }
  #three {
    position: fixed;
    top: 50px;
    right: 10px;
  }
  </style>
</head>
<body>

  <div class="box" id="one">One</div>
  <div class="box" id="two">Two</div>
  <div class="box" id="three">Three</div>
  <div class="box" id="four">Four</div>
  <div class="box" id="five">Five</div>
  <div class="box" id="six">Six</div>
  
</body>
</html>

ফলাফল



উপরের উদাহরণে সিলেক্টর #three-তে position: fixed; ব্যবহার করায় এটি viewport এর সাপেক্ষে পজিশন ফিক্সড রয়েছে।



position: sticky;

position: sticky; যুক্ত এলিমেন্ট ইউজারের পেজ স্ক্রলের সাপেক্ষে নিজের অবস্থানের পরিবর্তন ঘটাতে পারে। স্ক্রল পজিশনের উপর ভিত্তি করে এটি Relative এবং Fixed অবস্থানের মধ্যে টোগল করে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  * {
    box-sizing: border-box;
  }
  dl > div {
    padding: 24px 0 0 0;
  }
  dt {
    background: #B8C1C8;
    border-bottom: 1px solid #989EA4;
    border-top: 1px solid #717D85;
    color: #FFF;
    margin: 0;
    padding: 2px 0 0 12px;
    position: sticky;
    position: sticky;
    top: -1px;
  }
  dd {
    font: bold 20px/45px Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0 0 0 12px;
    white-space: nowrap;
  }
  dd + dd {
    border-top: 1px solid #CCC
  }
  </style>
</head>
<body>

  <dl>
    <div>
      <dt>A</dt>
      <dd>Andrew W.K.</dd>
      <dd>Apparat</dd>
      <dd>Arcade Fire</dd>
      <dd>At The Drive-In</dd>
      <dd>Aziz Ansari</dd>
    </div>
    <div>
      <dt>C</dt>
      <dd>Chromeo</dd>
      <dd>Common</dd>
      <dd>Converge</dd>
      <dd>Crystal Castles</dd>
      <dd>Cursive</dd>
    </div>
    <div>
      <dt>E</dt>
      <dd>Explosions In The Sky</dd>
    </div>
    <div>
      <dt>T</dt>
      <dd>Ted Leo & The Pharmacists</dd>
      <dd>T-Pain</dd>
      <dd>Thrice</dd>
      <dd>TV On The Radio</dd>
      <dd>Two Gallants</dd>
    </div>
  </dl>

</body>
</html>

ফলাফল




z-index এর ব্যবহার

একটি পজিশনে থাকা এলিমেন্টের উপর অন্য একটি এলিমেন্ট এসে সমাপতিত(overlap) হতে পারে। এতে আগের এলিমেন্টি উড়ে এসে জুড়ে বসা এলিমেন্টের নিচে চাপা পড়ে অদৃশ্য হয়ে যেতে পারে।

এলিমেন্টসমূহের স্ট্যাক অর্ডার(stack order) নির্ধারণ করার জন্য সিএসএস z-index প্রোপার্টি ব্যবহার করা হয়।

একটি এলিমেন্টের ধনাত্মক(+) অথবা ঋনাত্মক(-) স্ট্যাক অর্ডার থাকতে পারেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
  }
  </style>
</head>
<body>

  <p>z-index প্রোপার্টির ভ্যালু -1 ব্যবহার করায় ইহা টেক্সটের পেছনে অবস্থান নিয়েছে।</p>
  <img src="../css_example/satt.png" width="100" height="100">

</body>
</html>

ফলাফল



স্ট্যাক অর্ডারের ভ্যালু যত বেশী হবে সে এলিমেন্টটি তত বেশি সামনে থাকবে। পক্ষান্তরে স্ট্যাক অর্ডারের ভ্যালু যত কম হবে সে এলিমেন্টটি তত বেশি পেছনে থাকবে।

বিঃদ্রঃ যদি দুইটি অবস্থানকৃত এলিমেন্ট z-index ছাড়া সমাপতিত (overlap) হয় তখন এলিমেন্টের শেষ অবস্থানের এইচটিএমএল কোড উপরে দেখাবে।



একটি ইমেজে টেক্সটের পজিশন

নিচের উদাহরণে দেখানো হয়েছে, কিভাবে একটি ইমেজের উপর টেক্সটের পজিশন নির্ধারণ করা হয়।

satt academy
bottom left
top left
top right
bottom right
center


ছবিতে লেখা

কিভাবে একটি ইমেজের উপর লেখা যায় তা নিচের উদাহরণে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  .img-container {
    position: relative;
    width: 100%;
  }
  .top-left {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
  }
  .top-right {
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: 18px;
  }
  .bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
    font-size: 18px;
  }
  .bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 18px;
  }
  .text-center {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
  }
  img {
    width: 100%;
    height: auto;
    opacity: 0.3;
  }
  </style>
</head>
<body>

  <div class="img-container">
    <img src="nilgiri.jpg" alt="satt">
    <div class="top-left">উপরে-বামে লেখা </div>
    <div class="top-right">উপরে-ডানে লেখা</div>
    <div class="bottom-left">নিচে-বামে লেখা</div>
    <div class="bottom-right">নিচে-ডানে লেখা</div>
    <div class="text-center">মাঝখানে লেখা</div>
  </div>

</body>
</html>

ফলাফল