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

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

হোম-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

 

সিএসএস পেজিনেশন


সিএসএস(৩) ব্যবহার করে আপনি বিভিন্ন স্টাইলের পেজিনেশন তৈরি করতে পারেন। তবে এর মধ্যে সব চেয়ে কার্যকরী হচ্ছে রেস্পন্সিভ পেজিনেশন তৈরি করা। আমরা এই অধ্যায়ে শিখবো কিভাবে একটি রেস্পন্সিভ পেজিনেশন তৈরি করা যায়।


সাধারণ পেজিনেশন

যদি আপনার অসংখ্য পেইজের একটি ওয়েবসাইট থাকে তাহলে আপনি প্রত্যেকটি পেইজে পেজিনেশন যুক্ত করতে চাইবেনঃ

চলুন পেজিনেশন তৈরি করার জন্য একটি এইচটিএমএল লিস্টকে স্টাইল করিঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
</style>
</head>
<body>

<h2>সিম্পল পেজিনেশন</h2>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">১</a></li>
  <li><a class="active" href="#">২</a></li>
  <li><a href="#">৩</a></li>
  <li><a href="#">৪</a></li>
  <li><a href="#">৫</a></li>
  <li><a href="#">৬</a></li>
  <li><a href="#">৭</a></li>
  <li><a href="#">»</a></li>
</ul>

</body>
</html>

ফলাফল




এক্টিভ এবং হোবার যুক্ত পেজিনেশন

পেজিনেশনে .active ক্লাস ব্যবহার করে চলতি পেইজ কে হাইলাইট করুন এবং পেজিনেশনের সকল নাম্বারের ক্ষেত্রে :hover সিলেক্টর ব্যবহার করে একটি হোবার ইফেক্ট দিনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

ul.pagination li a.active {
    background-color: teal;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: paleturquoise;}
</style>
</head>
<body>

<h2>সক্রিয় এবং হোভারযোগ্য পেজিনেশন</h2>
<p> সংখ্যার উপর মাউস নরাচরা করে।</p>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">১</a></li>
  <li><a class="active" href="#">২</a></li>
  <li><a href="#">৩</a></li>
  <li><a href="#">৪</a></li>
  <li><a href="#">৫</a></li>
  <li><a href="#">৬</a></li>
  <li><a href="#">৭</a></li>
  <li><a href="#">»</a></li>
</ul>

</body>
</html>

ফলাফল



গোলাকৃতি, এক্টিভ এবং হোবার যুক্ত পেজিনেশন

এক্টিভ এবং হোভার বাটনকে গোলাকৃতি করার জন্য border-radius প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 5px;
}

ul.pagination li a.active {
    background-color: teal;
    color: white;
    border-radius: 5px;
}

ul.pagination li a:hover:not(.active) {background-color: paleturquoise;}
</style>
</head>
<body>

<h2>পূর্ণ-পরিণত সক্রিয় এবং হোভার বাটন</h2>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">১</a></li>
  <li><a class="active" href="#">২</a></li>
  <li><a href="#">৩</a></li>
  <li><a href="#">৪</a></li>
  <li><a href="#">৫</a></li>
  <li><a href="#">৬</a></li>
  <li><a href="#">৭</a></li>
  <li><a href="#">»</a></li>
</ul>
</body>
</html>

ফলাফল



পেজিনেশনে হোবার যুক্ত ট্রানজিশন ইফেক্ট

পেজিনেশনের বাটনে ট্রানজিশন ইফেক্ট যুক্ত করার জন্য transition প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}
ul.pagination li a.active {
    background-color: teal;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: paleturquoise;}
</style>
</head>
<body>

<h2> ট্রাঞ্জিশন প্রতিক্রিয়ার উপর হোভার</h2>
<p> সংখ্যার উপর মাউস নরাচরা করে।</p>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">১</a></li>
  <li><a class="active" href="#">২</a></li>
  <li><a href="#">৩</a></li>
  <li><a href="#">৪</a></li>
  <li><a href="#">৫</a></li>
  <li><a href="#">৬</a></li>
  <li><a href="#">৭</a></li>
  <li><a href="#">»</a></li>
</ul>

</body>
</html>

ফলাফল




বর্ডার সহ পেজিনেশন

পেজিনেশনে বর্ডার যুক্ত করার জন্য border প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid paleturquoise;
}

ul.pagination li a.active {
    background-color: teal;
    color: white;
    border: 1px solid teal;
}

ul.pagination li a:hover:not(.active) {background-color: paleturquoise;}
</style>
</head>
<body>

<h2>ব্রডার পেজিনেশন</h2>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">১</a></li>
  <li><a class="active" href="#">২</a></li>
  <li><a href="#">৩</a></li>
  <li><a href="#">৪</a></li>
  <li><a href="#">৫</a></li>
  <li><a href="#">৬</a></li>
  <li><a href="#">৭</a></li>
  <li><a href="#">»</a></li>
</ul>
</body>
</html>

ফলাফল



গোলাকৃতির বর্ডার সহ পেজিনেশন

বর্ডার যুক্ত পেজিনেশনে গোলাকৃতি বর্ডার যুক্ত করার জন্য border-radius প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid paleturquoise;
}

.pagination li:first-child a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination li:last-child a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>পূর্ণ-পরিণত বর্ডারের সাথে পেজিনেশন</h2>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">১</a></li>
  <li><a class="active" href="#">২</a></li>
  <li><a href="#">৩</a></li>
  <li><a href="#">৪</a></li>
  <li><a href="#">৫</a></li>
  <li><a href="#">৬</a></li>
  <li><a href="#">৭</a></li>
  <li><a href="#">»</a></li>
</ul>

</body>
</html>

ফলাফল



পেজিনেশনের লিংকের মাঝে দূরত্ব

পেজিনেশনে লিংকের মাঝে দূরত্ব তৈরি করার জন্য margin প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid paleturquoise;
    margin: 0 4px;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>মার্জিনের সাথে পেজিনেশন</h2>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">১</a></li>
  <li><a class="active" href="#">২</a></li>
  <li><a href="#">৩</a></li>
  <li><a href="#">৪</a></li>
  <li><a href="#">৫</a></li>
  <li><a href="#">৬</a></li>
  <li><a href="#">৭</a></li>
  <li><a href="#">»</a></li>
</ul>

</body>
</html>

ফলাফল




পেজিনেশন সাইজ

পেজিনেশনের সাইজ পরিবর্তন করতে font-size প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
 <style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid paleturquoise;
    font-size: 22px;
}

ul.pagination li a.active {
    background-color: teal;
    color: white;
    border: 1px solid teal;
}

ul.pagination li a:hover:not(.active) {background-color: paleturquoise;}
 </style>
 </head>
 <body>

 <h2>পেজিনেশন সাইজ </h2>
 <p> পেজিনেশন ছোট থেকে বড় করার জন্য font-size প্রোপার্টি পরিবর্তন করা হয়। </p>
 <ul class="pagination">
   <li> <a href="#">« </a> </li>
   <li> <a href="#">১ </a> </li>
   <li> <a class="active" href="#">২ </a> </li>
   <li> <a href="#">৩ </a> </li>
   <li> <a href="#">৪ </a> </li>
   <li> <a href="#">৫ </a> </li>
   <li> <a href="#">৬ </a> </li>
   <li> <a href="#">৭ </a> </li>
   <li> <a href="#">» </a> </li>
 </ul>
</body>
</html>

ফলাফল




পেজের মাঝে পেজিনেশন

পেজিনেশনকে পেজের মাঝে আনতে text-align:center প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid paleturquoise;
}

ul.pagination li a.active {
    background-color: teal;
    color: white;
    border: 1px solid teal;
}

ul.pagination li a:hover:not(.active) {background-color: paleturquoise;}

div.center {text-align: center;}
</style>
</head>
<body>

<h2> কেন্দ্রীয় পেজিনেশন</h2>

<div class="center">
  <ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">১</a></li>
    <li><a class="active" href="#">২</a></li>
    <li><a href="#">৩</a></li>
    <li><a href="#">৪</a></li>
    <li><a href="#">৫</a></li>
    <li><a href="#">৬</a></li>
    <li><a href="#">৭</a></li>
    <li><a href="#">»</a></li>
  </ul>
</div>

</body>
</html>

ফলাফল




আরো কিছু পেজিনেশন

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    font-size: 18px;
}
ul.pagination li a.active {
    background-color: #eee;
    color: black;
    border: 1px solid #ddd;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<p>পরবর্তী/পূর্ববর্তী বাটনঃ</p>
<ul class="pagination">
  <li><a href="#">❮</a></li>
  <li><a href="#">❯</a></li>
</ul>

<p>নেভিগেশন পেজিনেশনঃ</p>
<ul class="pagination">
  <li><a href="#" class="active">হোম</a></li>
  <li><a href="#">লিংক ১</a></li>
  <li><a href="#">লিংক ২</a></li>
  <li><a href="#">লিংক ৩</a></li>
</ul>

</body>
</html>

ফলাফল




ব্রেডকার্ম্ব(Breadcrumbs)

পেজিনেশনের আরেকটি ধরণকে বলে "ব্রেডকার্ম্ব"। নিম্নে আমরা দেখবো কিভাবে একটি ব্রেডকার্ম্ব তৈরি করবেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
ul.breadcrumb {
    padding: 8px 16px;
    list-style: none;
    background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}
ul.breadcrumb li a {color: green;}
</style>
</head>
<body>

<h2>ব্রেডক্রাম্ব পেজিনেশন</h2>
<ul class="breadcrumb">
  <li><a href="#">হোম</a></li>
  <li><a href="#">ছবি</a></li>
  <li><a href="#">গ্রীষ্ম</a></li>
  <li>বাংলাদেশ</li>
</ul>
</body>
</html>

ফলাফল