Properti clip digunakan untuk memotong area suatu elemen, sehingga hanya sebagian elemen yang terlihat.

Bagian dari elemen yang terlihat setelah elemen terpotong disebut daerah kliping. Kliping diterapkan ke area kotak perbatasan elemen, yang awalnya sepenuhnya terlihat. Memotong elemen secara efektif mirip dengan memotongnya.

Properti klip hanya berfungsi pada elemen yang benar-benar diposisikan atau yang diperbaiki. Itu tidak memiliki efek pada elemen yang diposisikan relatif atau statis.

Menggunakan klip, Anda dapat menentukan offset ke dalam yang menentukan area dari tepi elemen yang akan dihapus.

Properti klip hanya menerima satu fungsi bentuk, yaitu fungsi rect (), sebagai nilai. Fungsi rect () mengambil empat parameter yang offset dari batas atas dan kiri elemen ke dalam.

 

Nilai atas dan bawah menentukan offset dari batas atas, dan nilai kiri dan kanan menentukan offset dari perbatasan kiri.

Daerah kliping, atau bagian dari elemen yang tetap terlihat setelah elemen terpotong, ditentukan oleh offset fungsi rect () seperti yang ditunjukkan pada gambar di atas. Untuk lebih banyak contoh dan penjelasan, lihat bagian Nilai dan Contoh di bawah ini.

Wilayah kliping elemen menghapus aspek apa pun dari elemen (mis., Konten, anak-anak, latar belakang, batas, dekorasi teks, garis besar, dan mekanisme pengguliran yang terlihat – jika ada) yang berada di luar wilayah kliping. Konten yang telah terpotong tidak menyebabkan overflow.

Trivia & Catatan

Di CSS 2.1, semua daerah kliping adalah persegi panjang, menggunakan rect (). Spesifikasi mengantisipasi ekstensi di masa depan untuk memungkinkan kliping non-persegi panjang, dan juga dapat memperkenalkan kembali sintaksis untuk mengimbangi bentuk dari setiap tepi bukannya mengimbangi dari suatu titik.

Namun, di CSS3, properti clip-path telah diperkenalkan sebagai bagian dari Modul Masking CSS, dan properti clip telah ditinggalkan karena mendukung properti clip-path. Agen pengguna masih diperlukan untuk mendukung properti klip, sesuai dengan spesifikasi, jadi Anda harus dapat menggunakan properti klip.

Properti clip-path memungkinkan Anda untuk klip elemen menggunakan fungsi bentuk yang berbeda, dan karenanya jauh lebih fleksibel daripada klip. Lihat entri properti clip-path untuk informasi lebih lanjut.

Official Syntax:

Values:

auto: Elemen tidak terpotong.

inherit: Elemen mewarisi nilai klipnya dari induknya.

rect() :

Menentukan daerah kliping persegi panjang. Yaitu, ini menentukan area elemen yang akan terlihat setelah elemen terpotong.

Fungsi rect () membutuhkan empat parameter. Parameter ini dapat dipisahkan dengan koma atau dipisahkan dengan ruang.

 

Sintaks yang dipisahkan koma adalah sintaks standar. Namun, agen pengguna harus mendukung pemisahan dengan koma, tetapi juga dapat mendukung pemisahan tanpa koma (tapi bukan kombinasi), karena revisi sebelumnya dari spesifikasi CSS tidak jelas dalam hal ini. Sintaks yang dipisahkan oleh ruang kompatibel ke belakang.

Argumen atas, kanan, bawah, dan kiri adalah offset yang mendefinisikan wilayah kliping. Keempatnya adalah nilai <length> (Catatan: mereka tidak bisa menjadi <persentase]). Nilai atas dan bawah keduanya menentukan offset dari batas atas, dan nilai kiri dan kanan menentukan offset dari perbatasan kiri.

Fungsi rect () juga menerima kata kunci otomatis sebagai offset. Nilai otomatis berarti bahwa tepi tertentu dari wilayah kliping akan sama dengan tepi kotak batas elemen (yaitu, otomatis berarti sama dengan ‘0’ untuk <top> dan <left>, sama dengan nilai yang digunakan dari tinggi ditambah jumlah padding vertikal dan lebar perbatasan untuk <bottom>, dan sama dengan nilai yang digunakan dari lebar ditambah jumlah padding horizontal dan lebar perbatasan untuk <right>, sehingga empat nilai otomatis menghasilkan daerah kliping sama dengan kotak batas elemen).

Parameter offset atas, kanan, bawah, dan kiri rect () juga menerima nilai panjang negatif.