Hai teman-teman semuanya, apa kabar? semoga tetap dalam keadaan baik, kita lanjut lagi belajar tentang propertis cssnya, kali ini kita akan membahas tentang fungsi propertis clip pada css3.

Fungsi dari propertis clip ini adalah untuk memotong gambar sesuai dengan yang kita inginkan, nah untuk lebih jelasnya kita langsung saja praktekan, pertama-tama teman-teman silahakan buat sebuah file dan ketikan script berikut ini:

jika teman-teman save maka hasilnya hanya seperti gambar biasa, seperti berikut ini:

fungsi propertis clip pada css3 1

hasilnya masih seperti gambar biasa, nah sekarang coba teman-teman tambahkan script css berikut ini:

saya membuat gambar menjadi absolute dan mengatur clipt dengan nilai react seperti diatas, jika teman-teman save maka hasilnya akan seperti berikut ini:

fungsi propertis clip pada css3 2

Gambar akan terpotong sesuai dengan nilai yang kita berikan pada propertis clip, penjelasannya :

  1. nilai pertama untuk memotong dari atas kebawah, semakin besar nilainya gambar akan terpotong dari atas lebih banyak
  2. nilai kedua untuk memotong gambar dari kanan ke kiri, semakin besar nilainya gambar yang terpotong akan semakin sedikit
  3. nilai ketiga untuk memotong dari bawah keatas, semakin sedikit nilainya gambar yang terpotong akan lebih besar
  4. nilai terakhir untuk memotong bagian dari kiri kekanan, semakin besar nilainya gambar yang terpotong dari kiri akan makin besar

Gimana teman-teman? cukup mudah bukan? untuk tutorial kali ini tentang fungsi propertis clip pada css3 saya rasa cukup sampai sini dulu semoga tutorial kali ini dapat bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya.

Terima kasih