Membuat Gambar Responsive Materialize CSS Framework

Sebelum kita lihat contoh-contoh cantik dan keren dari Materialize CSS teman teman harus familiar dulu sama class-classnya seperti sebelumnya yang kita sudah bahas tentang sistem gridnya dan kali ini kita akan belajar banyak hal. Yang pertama mulai membuat gambar menjadi responsive. Kita akan buat class row lagi dan didalamnya ada 2 kolom. Seperti berikut

Kolom pertama lebarnya s5 sedangkan kedua s7. Kolom pertama kita masukkan sebuah gambar yang kedua ada tulisan dari lorem ipsum. Pada gambar bisa kita tambahkan class responsive-img. Pada class tersebut nilai max-widthnya 100% dan heightnya auto

maka hasilnya akan didapatkan sebagai berikut

dan jika kita hilangkan class responsive-img nya maka lebar gambar akan mengambil lebar aslinya. Jadi class tersebut membuat lebarnya otomatis 100% dari lebar parent atau lebar kolom s7nya. Gambarnya pun bisa kita ubah bentuknya menjadi bulat yakni class circle. Teman teman bisa lihat inspect elemen maka class circle ini nilainya border-radius:50%.

Satu lagi misalnya kita mau buat tulisan tertentu ada dibagian tengah. Maka kita berikan class valign-wrapper untuk class parentnya

maka otomatis tulisannya berada ditengah secara vertical dan teman teman juga harus tahu cara kerja dari class valign-wrapper ini ada banyak yang valign-wrapper lakukan dimana konsepnya dia gunakan sistem flexbox. Teman teman juga bisa berikan efek bayangan dengan class z-depth-1

Maka efeknya akan timbul. Untuk nilainya efek bayangannya bisa kita tulis 1 sampai 5. Itu contoh simplenya. teman teman boleh mencobanya. Terima kasih.

15 Agustus 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat