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

CSS Grid Layout Dan Komik (Seperti Yang Dijelaskan Oleh Barry Si Kucing)

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

Tampaknya CSS Grid cukup bagus dalam menata komik online, khususnya jika kamu ingin komik itu fleksibel. Dalam tutorial ini kita akan menggunakan Barry si kucing untuk mempraktekkan bagaimana membangun komik yang responsif.

Barry the Cat

Untuk tutorial ini saya meminjam beberapa artwork dari GraphicRiver; Sleepy Fat Cat sebenarnya merupakan tampilan jenis huruf, namun dilengkapi dengan beberapa vector kucing lucu-cocok untuk demo komik ini!

Sleepy Fat Cat on GraphicRiver
Sleepy Fat Cat Typeface di GraphicRiver

Percepat Browsermu

Jangan lupa, kamu akan memerlukan fitur browser canggih untuk melihat aksi CSS Grid, jadi baca sepanjang Layout CSS Grid: Sebuah Panduan Memulai Dengan Cepat jika kamu menggunakan browser yang tidak mendukung. Ini adalah apa yang sedang kita capai:

Periksa demo lengkap pada CodePen untuk melihat itu merespon pada ukuran layar yang berbeda.

1. Markup

Mari mulai dengan menyusun beberapa HTML:

Di sini kita memiliki sebuah <section> untuk bertindak sebagai grid kita, dengan memuat elemen <div class="panel"> sebagai item grid.

Beberapa panel memiliki teks di dalamnya, namun sisanya akan menjadi gambar komik kita. Kita memiliki dua pilihan di sini: kita dapat menempatkan gambar sebaris dengan panel, atau menambahkan gambar melalui CSS. Saya melakukan cara terakhir karena itu memberikan kendali yang lebih mudah terhadap penempatan dan pengubahan ukuran grafik, namun kamu dapat mendebat bahwa gambar inline akan lebih mudah diakses. Kamu yang memilih.

2. Style Dasar

Untuk mendapatkan bola (bulu) berguling, mari tambahkan beberapa style untuk mengcover typografi dan warna:

Saya memilih Kalam sebagai Google web font untuk teks kita–gaya tulis tangannya saya anggap sempurna untuk komik. Kamu perlu mengaitkannya dalam CSS via sebuah tautan dalam kepala dokumenmu:

Kalam
Kalam di Google Fonts

3. Grid Kita

Memulai mobile terlebih dahulu, kita akan menempatkan hal-hal dalam satu kolom dengan sebuah panel tunggal pada tiap baris:

Melihat kembali pada tutorial Grid awal kamu akan ingat bahwa grid-template-columns menempatkan seberapa banyak kolom yang akan kita punya, dan seberapa lebarnya. grid-template-rows melakukan yang sama untuk baris; di sini kita mendefinisikan sebelas dari mereka. Yang mengandung gambar akan memiliki tinggi 200px, yang berisi teks akan menyesuaikan ukurannya secara otomatis tergantung kontennya. Terakhir, grid-gap mendefinisikan ukuran celah grid.

Mari tambahkan beberapa style umum ke panel kita:

Properties background belum memiliki dampak visual apapun, namun mereka akan segera setelah kita menambahkan gambar background. Dan box-shadow bertindak sebagai sebuah tepi. Kamu dapat juga menggunakan properties border tradisional di sini jika kamu lebih suka, namun box-shadow terkadang memberikan lebih banyak fleksibilitas.

Mari lihat apa yang kita punya sejauh ini!

4. Gambar Kucing

Apa internet itu dibuat, benar? Saya telah menyiapkan beberapa gambar SVG untuk ditambahkan ke panel, yang saya lakukan satu demi satu:

Tampak bagus!

Namun saya tidak ingin garis tepi ada di semua panel. Saya akan menghilangkannya (menggunakan box-shadow: none;) dari yang mengandung teks, bersama dengan gambar pertama, dan gambar akhir.

5. Media Queries

Gambar ini belum berkerja dengan sempurna; Barry tua yang kasihan mendapatkan beberapa cropping yang serius. Waktunya untuk melihat melebihi mobile dan mengganti grid kita untuk tampilan yang lebih besar. Mari tambahkan beberapa media queries; satu pada 400px dan satu pada 600px (angka perkiraan, gunakan apapun yang kamu inginkan):

Kita akan menggunakannya untuk mengubah layout grid dalam tiap kasus.

Kita akan menggunakan dua kolom dan delapan baris untuk layar yang sedikit lebih besar, kemudian tiga kolom dan lima baris untuk yang lebih besar lagi.

Spanning

Sekarang kita telah membereskan kendala kolom tunggal sehingga kita dapat menjadi sedikit lebih kreatif. Kita perlu, misalnya, judul yang berjalan sepanjang lebar keseluruhan komik. Hal yang sama benar untuk panel yang mengandung teks, dan pernyataan hak cipta. Bahkan beberapa gambar akan lebih baik ditampilkan dalam panel full-width. Jadi kita akan menambahkan detail itu ke bagian pertama media queries:

Saya telah mengubah typografi dalam beberapa kasus juga, di akhirnya memberikan kita:

Layout dua kolom kita tampak bagus! Bagaimana pun juga, komik tiga kolom kita membutuhkan perbaikan.

Hampir berhasil...

6. Memperbaiki Layout Tiga Kolom

Karena kita mengerjakan mobile di awal, aturan yang kita terapkan pada media query pertama masih berefek pada layar yang besar. Kita perlu mengerjakan melalui panel dan mereset beberapa style.

Mulai dengan membuat .panel-title berisi tiga kolom alih-alih dua. Lalu .panel-3 (dengan teks) dapat diatur kembali ke grid-column: span 1; atau grid-column: auto;

Hal yang sama berlaku untuk .panel-6. Dengan beberapa perubahan lagi kamu seharusnya berakhir dengan sesuatu seperti ini:

Sedikit Flexbox

Saya ingin sedikit dialog pertama agar posisinya center secara vertikal, jadi mari gunakan flexbox untuk melakukan itu. Tambahkan di bawah ini ke media query kedua:

before flexbox after flexbox
Sebelum flexbox, setelah flexbox

7. Overlaying Panels

Grid tidak melarang kita untuk menyamakan jauh dari blok yang berjalan dan ke bawah halaman, kita dapat dengan senang hati membuat layer pada panel kita. Kita akan membuat bagian akhir teks lebih menarik dengan menempatkannya pada lokasi grid yang sama dengan panel berikutnya:

Di sini, kita telah memposisikan baik .panel-7 dan .panel-8 ke grid-column: 1; dan grid-row: 4;. Itu berarti bawah mereka berdua berada di tempat yang sama persis, dengan yang manapun yang tampil kedua dalam DOM ditimpa di atas yang pertama.

Kita dapat menggunakan z-index untuk mengubah urutan tumpukan, jadi dengan memberikan .panel-7 sebuah z-index: 1; akan membawanya ke bagian atas:

Catatan: sekarang setelah kita secara efektif menghilangkan baris, kamu akan perlu mengecek apakah grid-template-rows oke.

Mari tambahkan sedikit style kita ke "Naaah". Lagi, item grid tidak dilarang sebanyak yang kamu kira-kita dapat mengantinya dengan margin negatif dan bahkan mengubahnya tanpa ada masalah. Saya telah menambahkan beberapa style ke panel dan paragraf tanpa itu untuk memberikan ini:

Kesimpulan

Selesai–inilah apa yang telah kita buat!

Ini adalah latihan menyenangkan dalam menggunakan CSS Grid, sembari memperkenalkanmu beberapa konsep Grid baru pada prosesnya. Saya harap kamu menikmatinya-sekarang jika kamu tidak keberatan saya mau tidur siang.

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.