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



সিএসএস ৩ ব্যবহার করে খুব সহজেই বিভিন্ন ডিজাইনের পত্রাঙ্কন বা Pagination তৈরি করা যায়। এই অধ্যায়ে দেখাও হবে কিভাবে একটি রেস্পন্সিভ পত্রাঙ্কন বা Pagination তৈরি করা যায়।


সাধারণ Pagination

নিচে একটি সাধারণ Pagination এর উদাহরণ দেখুন। ওয়েব পেজে কোন এইচটিএমএল লিস্টকে সিএসএস ব্যবহার করে Pagination তৈরি করা হয়।

উপরের 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

« 1 2 3 4 5 »

নিচের উদাহরণে active এবং hovar ইফেক্টে বাটনের কোনগুলো গোলাকার করার জন্য border-radius প্রোপার্টি ব্যবহার করা হয়েছে।

উদাহরণ

<style>
.pagination{display: inline-block;}
.pagination a{color: black;float: left;padding: 8px 16px;text-decoration: none;border-radius:4px;}
.pagination a:hover{background-color:#cccccc;}
.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>




Transition ইফেক্ট

« 1 2 3 4 5 »

Pagination বাটনে ট্রানজিশন ইফেক্ট যুক্ত করার জন্য transition প্রোপার্টি ব্যবহার করা যায়। নিচে একটি উদাহরণ দেখুন।

উদাহরণ

.pagination a {
transition: background-color .3s;
}




Border ও Margin প্রপার্টির ব্যবহার

« 1 2 3 4 5 »

Pagination এ বর্ডার যুক্ত করার জন্য border প্রোপার্টি ব্যবহার করা যায়। Pagination এর বাটন গুলোর মাঝে খালি স্থান রাখার জন্য margin প্রপার্টি ব্যবহার করা যায়।
নিচে একটি উদাহরণ দেখুন।

উদাহরণ

.pagination a {
border: 1px solid #dddddd; margin: 0 4px;
}




size প্রপার্টির ব্যবহার

« 1 2 3 4 5 »

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

উদাহরণ

.pagination a {
font-size: 22px;
}




ওয়েব পেজের মাঝে অবস্থান

« 1 2 3 4 5 »

Pagination টি ওয়েব পেজের মাঝে স্থাপন করতে Pagination ডিভ এলিমেন্টে text-align প্রপার্টির মান center নির্ধারণ করতে হবে। নিচে উদাহরন দেখুন।

উদাহরণ

.Pagination {
text-align: center;
}









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.