সিএসএস৩ পত্রাঙ্কন বা Css3 Pagination


সিএসএস এর বিভিন্ন প্রোপার্টি যেমন - display, float, border, background-color ইত্যাদি প্রোপার্টি ব্যবহার করে খুব সহজেই বিভিন্ন ডিজাইনের পত্রাঙ্কন বা Pagination তৈরি করা যায়। নিচে পত্রাঙ্কন বা Pagination এর একটি ব্যাবহারিক উদাহরন দেখুন।

« 1 2 3 4 5 »


সাধারন পত্রাঙ্কন বা Pagination

ওয়েব পেজে কত গুলো এইচটিএমএল লিংককে সিএসএস ব্যবহার করে স্টাইল করে Pagination তৈরি করা হয়।নিচে একটি সাধারণ Pagination এর উদাহরণ দেখুন, এখানে Pagination তৈরি করার জন্য এইচটিএমএল লিংক অর্থাৎ <a> ট্যাগ ব্যাবহার করা হয়েছে।

ওপরে প্রদর্শিত Pagination টি তৈরি করার জন্য নিচের কোড গুলো দেখুন।

উদাহরণ

<style>
.pagination {
  display:inline-block;
  }
  
.pagination a {
  color:black;
  float:left;
  padding:8px 16px;
  text-decoration:none;
  }
  
.pagination a:hover {
  background-color:red;
  }
</style>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">»</a>
</div>

কোড এডিটর



active এবং hovar যুক্ত Pagination

নিচে pagination টি দেখুন, এখানে :active এবং :hovar সিলেক্টর যোগ করা হয়েছে। সাথে সিএসএস এর border-radius প্রোপার্টি ব্যাবহার করে আরও আকর্ষণীয় করে তলা হয়েছে।

« 1 2 3 4 5 »

border-radius প্রোপার্টি ব্যাবহার করে ওপরে প্রদর্শিত Pagination টি তৈরি করার জন্য নিচের এইচটিএমএল ও সিএসএস কোড গুলো দেখুন।

উদাহরণ

<style>
.pagination1{
  display:inline-block;
  }
.pagination1 a{
  color:black;
  float:left;
  padding:8px 16px;
  text-decoration:none;
  border-radius: 4px;
  }
.pagination1 a:hover{
  background-color:#cccccc;
  }
.pagination1 a.active{
  background-color:#ff9999;
  }
</style>
<div class="pagination1">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a class="active" href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">»</a>
</div>

কোড এডিটর



Transition ইফেক্ট

pagination তৈরি করতে সিএসএস এর transition প্রোপার্টি ব্যাবহার করা যায়। নিচে এর একটি ব্যাবহারিক উদাহরন দেখুন।

« 1 2 3 4 5 »

transition প্রোপার্টি ব্যাবহার করে ওপরে প্রদর্শিত Pagination টি তৈরি করার জন্য নিচের এইচটিএমএল ও সিএসএস কোড গুলো দেখুন।

উদাহরণ

<style>
.pagination {
  display: inline-block;
  }
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  }
.pagination a:hover {
  background-color: #cccccc;
  transition: background-color .5s;
  }
.pagination a.active {
  background-color: #ff9999;
  }
</style>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a class="active" href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">»</a>
</div> 

কোড এডিটর



border ও margin প্রপার্টি

সিএসএস এর bordermargin প্রোপার্টি ব্যাবহার করে pagination টিকে একটি ভিন্ন বৈশিষ্ট প্রদান করা যায়। নিচে এর ব্যাবহারিক উদাহরন দেখুন।

« 1 2 3 4 5 »

সিএসএস এর bordermargin প্রোপার্টি ব্যাবহার করে ওপরে প্রদর্শিত Pagination টি তৈরি করার জন্য নিচের এইচটিএমএল ও সিএসএস কোড গুলো দেখুন।

উদাহরণ

<style>
.pagination {
  display:inline-block;
  }
.pagination a {
  color:black;
  float:left;
  margin: 0 4px;
  padding:8px 16px;
  text-decoration:none;
  border: 1px solid #bbbbbb;
  }
.pagination a:hover {
  background-color:#cccccc;
  transition: background-color .5s;
  }
.pagination a.active {
  background-color:#ff9999;
  border: 1px solid red;
  }
</style>
<div class="pagination3">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a class="active" href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">»</a>
</div>

কোড এডিটর



font-size প্রোপার্টি

সিএসএস এর font-size প্রোপার্টি ব্যাবহার করে pagination এর আকার নিয়ন্ত্রন করা যায়। নিচে এর একটি ব্যাবহারিক উদাহরন দেখুন।

« 1 2 3 4 5 »

সিএসএস এর font-size প্রোপার্টি ব্যাবহার করে ওপরে প্রদর্শিত Pagination টি তৈরি করার জন্য নিচের এইচটিএমএল ও সিএসএস কোড গুলো দেখুন।

উদাহরণ

<style>
.pagination {
  display:inline-block;}
.pagination a {
  color:black;
  font-size:1.6em;
  float:left;
  margin: 0 4px;
  padding:8px 16px;
  text-decoration:none;
  border: 1px solid #bbb;
  }
.pagination a:hover {
  background-color:#cccccc;
  transition: background-color .5s;
  }
.pagination a.active {
  background-color:#ff9999;
  border: 1px solid red;
  }
</style>
<div class="pagination4">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a class="active" href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">»</a>
</div>

কোড এডিটর