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.