Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

Membuat Galeri Gambar CSS Grid (dengan Efek Blur dan Media Queries Interaksi)

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Hisman Saputra (you can also view the original English article)

Di tutorial ini kita akan mengambil sekumpulan link thumbnail biasa dan mengubahnya menjadi sebuah galeri CSS grid yang responsive dengan efek hover blur. Kita juga akan menggunakan sebuah trik CSS untuk memastikan pengguna layar sentuh tidak tertinggal.

Inilah yang akan kita buat:

Sedikit Latar Belakang

Baru-baru ini, Rachel McCollin menulis tutorial yang menjelaskan bagaimana menambahkan galeri dari link thumbnail di tema WordPress.

Link bertindak sebagai navigasi untuk halaman anak dari halaman manapun pengguna berada (atau halaman manapun yang Kamu spesifikasikan) dan keluaran yang dihasilkan oleh plugin tersebut adalah kira-kira seperti ini:

wordpress thumbnail links to child pages
Dapatkan file plugin dan tema dari repo di Github.

Menggunakan markup yang dihasilkan oleh pluginnya Rachel, kita akan melakukan hal berikut:

  • Mengatur thumbnail menggunakan CSS Grid, memberikan kita galeri yang responsive.
  • Membuat efek hover menggunakan CSS filter dan transisi.
  • Menggunakan sebuah CSS media query yang bagus untuk memastikan pengguna layar sentuh masih dapat melihat setiap judul thumbnail, tanpa melakukan hovering.

1. Merubah Markup (Sedikit)

Mari kita lihat sekilas pada markup yang dihasilkan oleh kodenya Rachel. Saat sudah dibersihkan dia menjadi seperti ini:

Kita mempunyai induk <div>, yang mana memiliki sebuah <h2> dan beberapa elemen <article>. Ketika kita menggunakan CSS Grid pertama kita mendefinisikan grid kontainer. Dalam hal ini kita akan menggunakan induk <div>, tetapi itu akan membuat semua anaknya secara langsung–termasuk <h2>–menjadi grid item, jadi kita membutuhkan perubahan sedikit.

Kita akan membungkus semua elemen <article> dengan <div> yang lain (silakan gunakan elemen apa saja yang Kamu rasa paling sesuai) yang mana kita akan berikan kelas grid-container. Gunakan starter pen ini sebagai basis.

2. Responsive CSS Grid, dalam Tiga Baris

Hanya dengan beberapa rule kita dapat mengubah thumbnail kita menjadi sebuah grid:

Baris-baris yang mudah di sini adalah display: grid; (yang mengubah semua anak-anak langsungnya menjadi grid item dan me-layout mereka) dan grid-gap: 1em; (yang mendefinisikan gutter kita).

Sedikit kerumitan datang dari nilai yang kita berikan ke properti grid-template-columns, yang mendefinisikan kolom kita, Kamu mungkin mengharapkan untuk melihat sesuatu seperti repeat(3, 200px) yang akan memberikan kita tiga kolom berukuran 200px. Dalam hal ini kita menggunakan kata kunci auto-fill untuk repeat(), dan kemudian beberapa nilai. Ini memberikan kita kolom sebanyak mungkin dengan minimal 300px dan maximal 1fr sebagaimana akan menyesuaikan dengan grid kontainer.

Ubah ukuran window browser Kamu dan lihat bagaimana dia bereaksi!

Satu detail terakhir Kamu perlu untuk menambahkan:

Ini akan memastikan gambar mengisi kontainernya dengan benar (diperlukan terutama untuk digunakan dengan demonya Rachel, karena kita butuh untuk menimpa inline properti width dan height yang dikeluarkan oleh WordPress).

3. Efek Hover

Kita akan menggunakan judul sebagai overlay dari thumbnail, menampilkannya saat di-hover. Kita juga akan memberikan gambar yang di-hover sebuah efek merah, dan sedikit blur untuk membantu keterbacaan teks overlay tersebut.

Membuat Judul Overlay

Untuk membuat judul overlay kita butuh mengatur posisinya, jadi kita mulai dengan membuat artikel position: relative; dan judul position: absolute;. Kita juga akan memberikannya background warna merah dan membuatnya memenuhi ruangan yang tersedia.

Awal yang bagus!

thumbs step 1

Ada satu atau dua hal yang bisa diperbaiki, termasuk ekstra spasi di bawah (judul sedikit lebih besar dari thumbnail). Ini dapat diselesaikan dengan menghapus semua line-height di kontainer gambar.

Menambahkan Style ke Judul

Beberapa style tipografi akan memperbaiki penampilan dari judul kita, dan tiga baris flexbox akan membuatnya rata tengah untuk kita:

Lebih baik:

Menyembunyikan Judul

Sekarang mari sembunyikan judul dengan menghapus opacity jadi kita hanya dapat melihatnya ketika di-hover. Beberapa rule tambahan di bawah yang telah kita tambahakan ke .location-title kita cukup untuk itu:

Di sini kita juga mengatur rule transition jadi saat kita membawa opacity kembali dia akan terjadi secara bertahap (selama 0,5 detik). Mari kita bawa kembali sekarang:

Bagus! Sekarang judul kita terlihat kembali saat hover:

title back on hover

Baris Blur

Kita telah membuat efek hover yang cantik, tetapi bagaimana jika kita ambil langkah yang lebih jauh lagi? Mari kita tambahkan juga filter blur ke gambar. Kita mulai dengan mengatur filter blur pada status normal, untuk memberikan kita sesuatu yang bisa ditrasnsisikan. Lalu kita melakukan blur dengan 2px untuk status hover (buat nomor ini seekstrim mungkin sesuka Kamu, tetapi saya pikir 2px memberikan kita visual yang bagus):

Inilah hasilnya:

Beberapa hal yang perlu dicatat:

  1. Judul menjadi hilang karena browser sekarang me-render grafis blur di atasnya.
  2. Efek blur terlihat bagus, tetapi dia memberikan kita sisi yang kabur juga (kita bisa melakukan yang lebih baik dari itu).

Memperbaiki judul yang hilang sesimpel dengan menambahkan z-index: 1; ke .location-title.

Memperbaiki sisi yang kabur sedikit lebih rumit. Untuk memulai kita melakukan scale ke gambar untuk membuatnya sedikit lebih besar, lalu kita mengatur overflow: hidden; ke kontainer gambar (.location-listing) sehingga ketika gambar yang lebih besar di-blur sisi-sisinya akan terpotong. Ini adalah properti-properti yang sudah selesai untuk kedua elemen tersebut:

Rule transform: scale(1.1); melakukan scaling gambar kita di segala arah ke 1.1 (di mana 1.0 akan menjaga ukurannya tetap sama). Ini adalah hasil yang lebih rapih:

no more blurred lines

4. Problem dengan Layar Sentuh

Jadi kita sudah mempunyainya! Gambar grid yang cantik dengan efek hover blur di setiap thumbnail. Hanya saja judul akan tersembunyi untuk semua orang yang tidak bisa melakukan hover ke gambar (banyak tablet dan smartphone yang tidak mengemulasi hover dengan "menekan" lebih lama) yang mana sangat tidak aksesibel.

Untungnya, CSS memiliki media queries interaksi yang sangat berguna yang dapat membantu kita (dan juga mereka memiliki dukungan browser yang cukup baik). Query ini akan mendeteksi mekanisme input dari browser–kualitas pointing dari perangkat, kemampuan untuk melakukan hover, dan beberapa hal definisi khusus lainnya–jadi kita dapat secara cukup akurat menentukan jika thumbnail kita sedang dilihat oleh perangkat layar sentuh.

Lihat media query ini contohnya (dia melakukan persis seperti apa yang Kamu harapkan):

Di dalam kurung kurawal tersebut kita akan menaruh style apapun yang kita mau terapkan untuk browser yang tidak dapat menangani :hover. Mari kita lakukan itu–kita akan menyatakan bahwa untuk perangkat yang hover itu tidak mungkin, atau minimal tidak nyaman, gambar thumbnail akan selalu di-blur dan judul akan selalu terlihat:

Mari lihat:

Catatan: Seperti yang sudah disebutkan, dukungan untuk ini sangat lumayan, tetapi diskusi tentang implementasi dari media queries interaksi ini masih sedang berlangsung. Ada kemungkinan speknya akan berubah, atau ada bagian yang dihapus.

Kesimpulan

Dan kita selesai! Terima kasih sudah mengikuti sampai akhir, saya harap Kamu belajar satu atau dua hal dan menikmati bermain-main dengan CSS (siapa yang tidak menikmatinya?). Ini adalah sekali lagi tampilan dari final demo–silakan menambahkannya ke file tema yang dibuat oleh Rachel pada bagian pertama!

Bacaan Lebih Lanjut

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.