Hallo teman-teman bertemu lagi pada tutorial dumet school, pada tutorial kali ini saya akan menjelaskan tentang cara Memotong Gambar Dengan Propertis Clip Pada CSS, teman-teman semuanya pasti pernah melakukan teknik croping atau slicing pada photoshop, tentu saja sangat mudah melakukannya di photoshop, tapi gimana caranya jika kita terapkan itu pada css, nah mungkin kita langsung saja praktekan caranya.

pertama, teman-teman siapkan sebuah gambar bebas, lalu teman-teman buka editornya masing-masing, lalu ketikan script berikut:

nah saya meletakan sebuah gambar pada script htmlnya, jika di save maka hasilnya akan seperti berikut ini:

memotong-gambar-dengan-propertis-clip-pada-css-1

nah sekarang kita akan potong gambarnya, coba teman-temanĀ  tambahkan script css berikut ini:

Saya menggunakan css internal, sehingga kelengkapan scriptnya adalah sebagai berikut:

untuk nilai pada propertis clip sendiri sama dengan margin dan padding, yaitu nilai pertama untuk atas, nilai kedua untuk kanan, nilai ketiga untuk bawah dan nilai keempat untuk kiri, jika sudah silahkan teman-teman save dan jalankan pada browser masing-masing, maka hasilnya akan seperti berikut :

cara-memotong-gambar-dengan-propertis-clip-pada-css-hasil

gimana teman-teman mudah bukan, silahkan teman-teman praktekan sendiri dirumah, sekian tutorial kali ini tentang Memotong Gambar Dengan Propertis Clip Pada CSS semoga bermanfaat, terimakasih.