CSS - Penyuring: Panduan untuk Pemula

Hai teman-teman, bintang web design masa depan! Hari ini, kita akan melihat dunia yang menakjubkan penyuring CSS. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan ramah Anda dalam perjalanan yang menarik ini. Pada akhir tutorial ini, Anda akan dapat membuat penyuring yang indah dan berfungsi seperti seorang ahli!

CSS - Pagination

Apa Itu Penyuring?

Sebelum kita masuk ke dalam, mari bicarakan apa sebenarnya penyuring itu. Bayangkan Anda membaca buku. Daripada semua teks dipadatkan ke dalam satu halaman yang tak berakhir, itu dibagi menjadi bagian yang mudah ditangani - itu adalah penyuring di dunia fisik. Pada situs web, penyuring membantu membagi daftar panjang konten (seperti hasil pencarian atau postingan blog) ke dalam halaman yang terpisah. Itu seperti memberikan pengguna Anda tombol "ganti halaman" virtual!

Sekarang, mari kita keraskan tangan dan mulai!

Langkah 1: Tambahkan Markup HTML

Pertama-tama, kita perlu membuat struktur dasar penyuring kita. Pihak ini adalah membuat kerangka desain kita.

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">&raquo;</a>
</div>

Dalam contoh ini, kita membuat <div> dengan kelas "pagination". Didalamnya, kita memiliki beberapa <a> tag (tautan) yang mewakili nomor halaman kita. « dan » adalah karakter khusus untuk panah kiri dan kanan - menarik, kan?

Langkah 2: Definisikan Kelas CSS

Sekarang kita memiliki kerangka, mari kita tambahkan sedikit gaya! Kita akan mulai dengan sedikit CSS dasar untuk memberikan bentuk penyuring kita.

.pagination {
display: inline-block;
}

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

Ini adalah apa yang dilakukannya:

display: inline-block; membuat wadah penyuring kita berperilaku seperti elemen inline tapi memungkinkan kita mengatur lebar dan tinggi.
Kita gayakan semua <a> tag di dalam div penyuring kita.
float: left; membuat tautan kita rata kanan.
padding memberikan ruang sekitar teks kita.
text-decoration: none; menghapus garis bawah tautan kita.

Langkah 3: Gaya Tautan Penyuring

Mari kita membuat tautan penyuring kita terlihat lebih menarik!

.pagination a.active {
background-color: #4CAF50;
color: white;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
}

Kode ini melakukan dua hal menarik:

Itu gayakan halaman "aktif" (halaman saat ini) dengan latar belakang hijau dan teks putih.
Itu menambahkan efek hover ke semua tautan lain, mengubah warna latar belakang saat Anda melewati mouse di atasnya.

Penyuring CSS Sederhana

Selamat! Anda baru saja membuat penyuring sederhana dan berfungsi. Tetapi mengapa berhenti di sana? Mari kita jelajahi beberapa variasi yang menarik!

Penyuring CSS Aktif dan Dapat Dihover

Ingin membuat penyuring Anda lebih interaktif? Cobalah ini:

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

.pagination a.active {
background-color: #4CAF50;
color: white;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
}

Properti transition menambahkan efek perubahan warna halus saat hover di atas tautan. Itu seperti magis!

Tombol Penyuring yang Rounded dan Dapat Dihover

Mari kita berikan tombol-tombol kita sedikit kurva:

.pagination a {
border-radius: 5px;
margin: 0 4px;
}

border-radius melengkungkan sudut tombol kita, sedangkan margin menambahkan ruang antara mereka. Tidakkah itu terlihat keren?

Efect Transisi Hoverable CSS

Ingin menambahkan sedikit keanggunan? Cobalah efek skala ini:

.pagination a {
transition: transform 0.3s;
}

.pagination a:hover {
transform: scale(1.1);
}

Sekarang tautan Anda akan sedikit tumbuh saat dihover. Itu seperti mereka mencoba untuk diklik!

Penyuring CSS dengan Border

Mari kita tambahkan beberapa border untuk membuat penyuring kita tampak menonjol:

.pagination a {
border: 1px solid #ddd;
}

Garis ini sederhana menambahkan border abu-abu ke setiap tautan. Itu menakjubkan bagaimana perubahan kecil ini bisa membuat perbedaan besar!

Border Rounded CSS

Ingin menghaluskan border itu? Mari kita melengkungkannya:

.pagination a {
border-radius: 50%;
}

Ini mengubah tombol kotak kita menjadi lingkaran sempurna. Bagaimana itu menarik?

Ruang Antara Tautan CSS

kadang-kadang, kita memerlukan sedikit ruang untuk bernapas:

.pagination a {
margin: 0 4px;
}

Ini menambahkan jarak kecil antara setiap tautan, memberikan penyuring Anda rasa yang lebih luas.

Ukuran Penyuring CSS

Ukuran satu tidak cocok untuk semua. Mari kita belajar bagaimana mengatur ukuran:

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

Coba eksperimen dengan nilai ini untuk menemukan ukuran yang sempurna bagi desain Anda!

Penyuring CSS Tengah

Ingin penyuring Anda berada di tengah halaman?

.pagination {
text-align: center;
}

Baris ini memusatkan seluruh blok penyuring Anda. Magic!

Penyuring CSS Dengan Tombol Next dan Previous

Mari kita tambahkan beberapa tombol navigasi:

<div class="pagination">
<a href="#">&laquo; Previous</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">Next &raquo;</a>
</div>

.pagination a:first-child,
.pagination a:last-child {
background-color: #f1f1f1;
font-weight: bold;
}

Ini menambahkan tombol "Previous" dan "Next" dan menggaya mereka berbeda.

Penyuring CSS Dengan Breadcrumb

Ingin menunjukkan pengguna Anda di mana mereka berada dalam urutan halaman? Cobalah ini:

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">&raquo;</a>
<p>Page 2 of 3</p>
</div>

.pagination p {
margin-left: 10px;
display: inline-block;
}

Ini menambahkan indikator teks yang menunjukkan halaman saat ini dan total halaman.

Penyuring CSS Dengan Daftar

Akhirnya, mari kita coba penyuring gaya daftar:

<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">&raquo;</a></li>
</ul>

.pagination {
list-style-type: none;
padding: 0;
}

.pagination li {
display: inline-block;
}

Ini membuat susunan penyuring yang bersih dan berdasarkan daftar.

Dan begitu saja, teman-teman! Anda telah belajar tentang halaman penyuring CSS. Ingat, kunci untuk menguasai teknik ini adalah latihan. Jadi, teruskan eksperimen dengan gaya ini, campur dan aduk, dan buat desain penyuring Anda sendiri. Siapa tahu? Anda mungkin saja menciptakan halaman berikutnya dalam desain web!

Selamat coding, dan may your pages always be perfectly paginated!

Credits: Image by storyset