Hallo teman-teman m=bertemu lagi pada tutorial dumet school, pada artikel kali ini saya akan coba membahas tentang bagaimana cara mengcrop gambar tapi dengan menggunakan salah satu properties yang ada di CSS, kalau biasanya kita tau untuk mengcrop gambar biasanya kita menggunakan salah satu software, contoh nya photoshop, kali ini saya akan coba praktekan bagaimana caranya mengcrop gambar menggunakan CSS clip.

Oke kita langsung saja praktekan, teman-teman bisa ketikan script berikut :

Capture

Saya menyisipkan sebuah gambar pada script tersebut jika di save lalu jalankan pada browser maka hasilnya akan seperti berikut :

Capture2

Tampilannya masi biasa, tidak terjadi apa apa, sekarang kita akan beralih ke CSS untuk mengcrop gambar tersebut,
teman-teman ketikan script berikut :

Capture1

Maka hasilnya akan seperti berikut :

Capture3

NOTE: untuk nilainya sama urutannya seperti margin dan padding yaitu ATAS,KANAN,BAWAH,KIRI, sekarang silahkan praktekan sendiri dan utak-atik sendiri, hehe cukup sekian artikel kali ini semoga bermanfaat, terimakasih 🙂