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

Merry Gridmas! Membangun Kalender Advent Meriah Dengan CSS Grid

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Suci Rohini (you can also view the original English article)

Dalam tutorial ini kita akan membangun kalender advent musiman menggunakan CSS Grid, SVG, dan segelintir sorakan meriah! Mari kita mulai dengan melihat apa yang akan kita kerjakan- - klik hari untuk melihat apa yang ada di bawahnya.

Apa yang Anda Butuhkan

Anda tidak benar-benar membutuhkan banyak untuk tutorial ini, hanya editor kode (bersandar pada CodePen untuk membuat segalanya lebih mudah) dan beberapa pengetahuan HTML dan CSS dasar. Anda akan membutuhkan beberapa visual yang meriah meskipun saya telah mengambil ilustrasi oleh masastarus yang sangat berbakat dari Envato Elements (mereka adalah vektor dan benar-benar sempurna untuk ini):

Happy children celebrating Christmas
Anak-anak bahagia merayakan Natal
Group of children and christmas tree
Kelompk anak-anak dan pohon natal

1. Grid Lahir

Untuk kalender Advent kami, kami.akan menggunakan 25 item grid; satu untuk setiap hari menjelang Natal dan satu lagi untuk memegang grafik judul. Ini akan terlihat seperti di layar kecil:

Dan ini di layar yang lebih besar:

Item grid turquoise akan menahan grafik judul kami:

Markup

Untuk memulai, kami membutuhkan 25 item dalam satu wadah, jadi mari kita menggabungkan beberapa HTML:

Tip: Mengingat sifat berulang dari markup ini, Anda mungkin lebih suka menggunakan bahasa templat seperti HAML. HAML akan membiarkan Anda mengulang 24 item untuk menyelamatkan Anda menulis masing-masing. Cuplikan kecil berikut ini dikompilasi ke dalam apa yang Anda lihat di atas:

Saat kami mengumpulkan lebih banyak elemen di dalam div ini, Anda akan menghargai waktu yang dihindarkan HAML!

Basic Grid Styles

Mari sekarang tambahkan beberapa gaya dasar untuk membuat grid kami. Kami mulai dengan menerapkan display: grid; ke elemen. Kemudian, setelah beberapa dimensi, kami mendefinisikan beberapa item grid.

Kami telah beralih ke "seluler pertama", jadi Anda akan melihat kami mendefinisikan hanya tiga kolom untuk memulai; kami akan menggunakan kueri media sebentar untuk memungkinkan layar yang lebih besar.

  • grid-template-columns: repeat(3, 1fr); memberikan kami tiga kolom, masing-masing dengan lebar yang sama (1 unit fr)
  • grid-template-rows : auto; sebenarnya adalah nilai default, tetapi menyatakan bahwa baris tidak akan memiliki tinggi spesifik yang dikaitkan dengan mereka - kita dapat menambahkan sebanyak yang kita suka dan mereka akan tumbuh dengan konten.
  • grid-gap: 25px; mendefinisikan selokan kami.

Itu benar-benar semua yang kami butuhkan, Grid dapat menangani hal-hal dari sini jika kami meninggalkannya, tetapi kami ingin lebih spesifik tentang di mana kami menempatkan setiap item grid. Untuk alasan ini kami akan menggunakan Area Grid.

Grid Areas

Kami dapat menetapkan nama untuk setiap area kisi yang kami tetapkan, dan kami dapat menulisnya dengan cara yang benar-benar visual juga.

Di sini kami menamai area pertama, yang membentang tiga kolom pada garis pertama t (di mana kita akan menempatkan judul). Ini mungkin bukan nama yang paling berguna, tetapi itu akan melakukan pekerjaan untuk saat ini. Masing-masing area lain diberi nama sesuai dengan nomor hari, dan seperti yang Anda lihat, kita dapat menempatkannya di mana pun kita mau. Kemampuan untuk meletakkan sesuatu "secara acak" seperti ini sangat cocok untuk kalender advent.

Going Responsive

Dengan penambahan permintaan media, kami dapat (dengan sangat mudah) mengubah tata letak untuk layar yang lebih besar. 

Dengan kueri media ini kami menyataksn bahwa untuk area pandang yang lebih luas dari 500px (angka acak) kami akan mengubah grid sehingga memiliki enam kolom: grid-template-columns: repeat (6, 1fr);.

Dan kita dapat sepenuhnya mendefinisikan pengaturan barang-barang, menempatkan hari-hari di mana pun kita merasa seperti itu. Anda akan melihat bahwa judul blok sekarang mengambil tiga kolom dan tiga baris ke kiri atas dan d24 mengambil area seluas 2×2, untuk memberikan lebih signifikan. Ini akan lebih jelas ketika kami menetapkan item grid kami ke area di langkahkah selanjutnya.

Untuk saat ini, kita tidak bisa benar-benar melihat apa yang telah kita lakukan, jadi mari kita tambahkan beberapa gaya sementara ke item grid untuk membuat semuanya terlihat.

Lihatlah:

Butuh primer di area jaringan? Pelajari lebih lanjut tentang semuanya di tutorial pemula ini:

  • CSS Grid Layout: Using Grid Areas

Menetapkan Area Grid

Kami sekarang harus menugaskan barang-barang grid kami ke area yang telah kami tetapkan. Kami melakukan ini sebagai berikut:

Anda dapat melihat div.title kami telah ditetapkan ke area grid t, dan setiap hari telah ditetapkan ke area yang aesuai. Tidak ada yang bisa dikatakan Anda tidak dapat menetapkan .day-3 ke grid-area: d16; tentu saja, kami hanya memilih untuk mengatur hal-hal seperti ini. Bagaimana kelihatannya?

2. Opening Doors

Itulah struktur dasar semua yang disortir, sekarag kita perlu membuat pintu CSS kita. Kita akan menempatkan dua div dalam setiap item grid satu untuk depan pintu yang lain untuk bagian belakang - keduanya di bungkus dengan div yang lain, dan kita akan menggunakan checkbox hack untuk membalik semuanya ketika itu diklik.

Kita mulai dengan menambahkan label, checkbox, dan div ke setiap grid item:

Sekali lagi, Anda perlu melakukan ini untuk semua 24 item grid, yang merupakan potongan besar dari markup berulang sepanjang 245 baris, sehingga Anda mungkin menemukan bantuan HAML. Inilah yang akan terlihat:

Dengan padding yang sedikit disesuaikan, inilah tampilan checkboxes sekarang:

The Doors

Persiapkan dirimu; apa yang datang bisa dibilang merupakan bagian paling kompleks dari keseluruhan bangunan ini. Itu adalah bongkahan besar dan sangat sedikit karya tanpa semuanya hadir, jadi bersabarlah. Kami akan melakukan beberapa pergeseran dengan 3DTransforms.

Pertama-tama, kami menyembunyian checkboxes, kemudian kami menyatakan bahwa kami ingin tingat perspektif tertentu diterapkan pada label kami (perspective: 1000px; menangani itu). transform-styLe: preserve-3d; menyatakan bahwa anak-anak dari label akan ditampilkan dalam ruang 3D bukannya di sepanjang bidang datar. Kami kemudian menggunakan beberapa gaya Flexbox untuk memastikan label memenuhi seluruh area yang tersedia untuk itu.

Beberapa gaya pada elemen .door ( yang berisi wajah depan dan belakang) kemudian mengatur waktu transisi dan membereskan semuanya lebih lanjut.

Font and Back

Oke, sekarang untuk berkonsentrasi pada wajah front dan back pintu kami:

The .door div pemilih untuk kedua .front dan .back divs. Kami menggunakannya untuk membuat masing-masing 100% lebar dan tinggi kontainer .door, benar-benar diposisikan di kiri atas. Aturan-aturan Flexbox memastikan konten di dalam (nomor) disejajarkan secara terpusat dan backface-visibility:  hidden; Aturan memastikan bahwa tak satu pun dari wajah dapat dilihat ketika sisi sebaliknya mereka menghadap kami.  Itu penting, karena kami kemudian fokus pada .back dan mengaturnya untuk dibalik dengan transform: rotateY (180deg); .

Sekarang Untuk Hal Menyenangkan

Semua ini mengarah pada apa yang sebenarnya merupakan efek yang sangat keren. Kita akan menggunakan kondisi checkbox yang dicentang untuk melakukan transisi pada wajah. Ketika kita mengklik pada label ( yang mengisi seluruh area grid), ia akan memeriksa dan menghapus centang pada kotak centang, meskipun itu tidak ditampilkan. Tergantung pada keadaan itu, kita mengubah arah mana .door menghadap.

Aturan pertama memberi kita status mengambang. Aturan kedua menggunakan pemilih yang berdekatan, jadi ketika elemen .door segera didahului oleh :checked element kita putar 180 derajat pada summbu Y (kita membalikkan). Semua itu memberi kita fungsi pintu mendasar kami!

3. Time to Decorate

Mari kita buat semuanya terlihat xantik. Visual pertama yang akan kami tampilkan adalah grafik judul kami. Menggunakan Happy children celebrating Chritmas ilustrasi saya mengambil judul, mengubah detail dan menyimpan file SVG.

Tip: untuk vektor terperinci seperti ini, di Illustrator buka Object > Path > Simplify... dan Anda dapat mengurangi kerumitannya. Dengan memangkas jumlah kurva dan point Anda dapat secara signifikan menurunkan ukuran file tanpa kehilangan terlalu banyak efek keseluruhan.

Ada beberapa cara kami dapat menambahkan gambar ini ke halaman, tetapi saya baru saja menempatkan tag img di markup kami:

Beberapa gaya memberikan fluiditas gambar kami dan menyelaraskan secara terpusat di dalam area grid:

Untuk menyempurnakan background kosong, kami menambahkan SVG lain ( hijan salju dan awan) ke badan melalui CSS. 

Menambahkan Gambar ke Pintu

Masing-masing dari 24 pintu kami juga memiliki gambar yang bersembunyi di belakang mereka. Sekali lagi, kita bisa melakukan ini dengan beberapa cara berbeda, tetapi dalam kasus ini kita akan menyimpan banyak file SVG dan menambahkanya sebagai background lewat CSS. Untuk setiap pintu, setelah kami mendefinisikan area gridnya, kami akan memiliki aturan untuk .back face.

Inilah yang memberi kita:

Cukup bagus! Sekarang kita hanya perlu merapikan gambar-gambar itu dengan beberapa aturan umum.

Tydying Up

Pertama, gambar background itu hanya perlu muncul sekali, jadi kami akan menambakan no-repeat. Mereka juga perlu menjadi pusat dan diskalakan dengan benar.

Beberapa border-radius ditambahkan ke .door dan .door div memberi kita estetika yang lebih ramah. Dan akhirnya, kami menautkan ke font Kalam di Google font untuk memoles detail tipografi terakhir.

Styles:

Kesimpulan

Itu tentang membungkus segalanya! Tentu saja, ini benar-benar hanya untuk nilai kebaruan dan mempraktekkan CSS Grid (status tiap pintu tidak disimpan untuk sesi browser berikutnya atau apa pun) tapi kami telah melaluin perjalanan panjang hanya dengan beberapa markup dan beberapa gaya.

Dukungan adalah titik terakhir untuk disebutkan; ada beberapa aspek dari tutorial ini yang belum menikmati dukungan browser lengkap - untuk beberapa tips tentang cara menangani ini, lihat sumber daya yang terhubung di bawah ini.

Saya harap Anda menikmati tutorial ini, dan menikmatinya untuk berhari-hari!

Sumber daya Berguna

CSS Grid Courses in Tuts+

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.