Yuk Belajar CSS Grid Sambil Bermain!

CSS Grid merupakan sebuah fitur baru dari CSS yang memungkinkan kita melakukan layouting halaman web dengan CSS sebagai alternatif menggunakan tabel, flexbox, dan juga float. Fitur baru ini memungkinkan kita mengatur posisi kolom dan baris sesuai kebutuhan dengan lebih mudah dibandingkan menggunakan tabel, float, maupun flexbox dan tentunya tanpa menggunakan framework CSS karena sudah ada dalam core CSS itu sendiri.

Nah, untuk memudahkanmu belajar mengenai CSS Grid ini, sebuah perusahaan bernama Codepip mengembangkan sebuah permainan berbasis web bernama Grid Garden. Permainan ini memiliki 2 bagian. Bagian kiri yang menampilkan instruksi dan juga kolom untuk langsung mempraktekkannya. Sedangkan bagian kanan berisikan sebuah taman yang berbentuk kotak - kotak (Mirip game plant vs zombie). Tugasmu disini adalah menyirami sayuran dengan air ataupun memberi racun/ pertisida pada hama, dan tentunya kita melakukannya menggunakan kode yang bisa ditulis pada bagian yang telah disediakan

Game Grid Garden ini cocok untuk kamu yang lebih suka belajar sambil langsung mempraktekkannya karena kita disini juga dapat bereksperimen. Terdapat 28 level yang tersedia, level sebanyak itu sudah lebih dari cukup untuk kita dalam memahami CSS Grid untuk keperluan developing suatu tampilan website.

Jika kamu tertarik untuk mencobanya, kamu bisa langsung mengunjungi websitenya di https://cssgridgarden.com. Bagaimana menurutmu tentang fitur baru CSS dan Game Grid Garden ini? tulis pendapatmu di kolom komentar ya.

Cara Membuat Text Blur Dengan CSS 3

Oke kali ini saya akan membagikan tutorial bagaimana cara membuat text blur dengan css. Saya sebenarnya juga tidak tahu, fungsi text blur di sebuah website itu untuk apa, tetapi mungkin ada yang mencarinya dan juga kebetulan saya tahu caranya... jadi kenapa tidak buat tutorial?

Oke, masuk ke tutorial, pertama persiapkan dahulu text editor kalian lalu buat file html dan cssnya. Bila kalian sudah menyiapkannya silahkan copy paste code dibawah ini.

Html :



CSS :



Keterangan :
- Kalian bisa mengganti nama ".blur" menjadi apapun yang kalian inginkan asal namanya sama dengan nama class yang kalian panggil di file html.
- Jadi konsepnya adalah, kita menghilangkan tulisan aslinya, lalu kita tambahkan bayangan pada text yang ingin di blur, dan jadilah text blurnya.

Kalian bisa lihat demonya dibawah ini.

See the Pen Font Blur by Eko Setya (@ekosetya) on CodePen.

Gimana? mudah bukan? untuk tutorial membuat text blur saya cukupkan sampai disini. Kalau kalian masih bingung atau punya pertanyaan maupun request silahkan tulis di kolom komentar. Dan sampai jumpa di artikel selanjutnya.

Cara Membuat Label Atau Tag Menempel di Gambar Dengan CSS

Bila kalian melihat website - website film, biasanya dalam gambar cover sebuah film terdapat sebuah tulisan yang menempel di gambar tersebut entah itu status film, keterangan dll. Nah kali ini kita akan membuat tulisan yang berada dalam gambar tadi. Apa saja bahan yang dibutuhkan?

Alat & bahan :

• Text editor (Notepad++, Sublime, Atom, dsb)
• Gambar
• Browser

Cara Membuat :

Pertama buka text editor dan ketikkan code berikut.

Kedua, untuk style atau css nya ketikkan code berikut.

Untuk hasilnya akan seperti ini :

See the Pen Membuat Label/Tag di Dalam Gambar by Eko Setya (@ekosetya) on CodePen.

Penjelasan :

Pada code html kita buat tag div untuk membuat gambar dan text menjadi satu lalu kita beri class "image" agar kita bisa men-styling atau memperindahnya. 

Lalu dalam tag div terdapat tag img yang berfungsi untuk menampilkan gambar kita, untuk mengubah gambarnya tinggal ganti pada bagian src. 

Masih dalam tag div, dibawah tag img terdapat tag span yang berfungsi untuk menampilkan text. tag span ini bisa kamu ganti dengan tag p, text, atau tag yang berfungsi untuk menampilkan gambar lainnya. Nah pada tag ini kita buat posisinya menjadi absolute atau pasti, yang dimaksud pasti disini adalah tag yang memiliki posisi absolute akan ada di sana selamanya dan tidak akan berubah/ berpindah tempat. 

Lalu kita tambahkan style top dan left kemudian buat menjadi 0px . Ini artinya posisi dari tag ini akan berada di pojok kiri atas. Ini bisa kamu ganti dengan Top ,Bottom, Left, Right tinggal kamu sesuaikan saja.

Nah itu tadi cara membuat label atau tag menempel pada gambar dengan css. Maaf bila tutorial ini membingungkan karena saya juga masih belajar bagaimana cara membuat tutorial yang baik, benar dan menarik. Bila kalian ada kritik dan saran silahkan berikan di kolom komentar dan Terima Kasih telah berkunjung ^-^

Cara Membuat Gambar Bertumpuk Menggunakan CSS

Bila biasanya kalian membuat gambar itu satu - satu, kali ini saya akan mengajarkan kalian bagaimana cara menumpuk gambar menggunakan css, dan juga caranya mudah banget loh. Langsung aja simak tutorial dibawah.

Pertama

Untuk isi folder kali ini saya menggunakan hanya satu file saja untuk contoh, yakni file html. Untuk strukturnya seperti ini.

Kedua.

Copy dan paste code berikut, bila kalian hanya ingin kode css-nya saja kalian tinggal copy paste bagian style saja.

Ketiga

Simpan dan lihat hasilnya. Bila kalia mengikuti petunjuk saya dengan benar maka akan menjadi seperti ini.

Selanjutnya tinggal kalian variasikan sendiri, entah itu memindahkan posisinya, mengganti warna, ataupun yang lainnya. Nah bagaimana? cukup mudah bukan? bila kalian ada kendala ataupun pertanyaan silahkan berkomentar ya. Itu saja untuk tutorial kali ini ya, sampai jumpa di tutorial selanjutnya.

Download Source Code