Menggunakan clipping dalam CSS dapat membantu kita menjauh dari semua hal dalam desain yang tampak seperti kotak. Dengan menggunakan berbagai bentuk dasar, atau SVG, Anda bisa membuat jalur klip. Kemudian potong bagian elemen yang tidak ingin Anda tampilkan.
Semua elemen pada laman web didefinisikan di dalam kotak persegi panjang.
Namun, bukan berarti kita harus membuat semuanya terlihat seperti kotak.
Anda dapat menggunakan properti clip-path CSS untuk memotong bagian gambar atau elemen lainnya, untuk membuat efek yang menarik.
Pada contoh di atas, gambar balon berbentuk persegi (sumber).
Dengan menggunakan clip-path dan nilai bentuk dasar circle(), langit tambahan di sekitar balon akan terpotong sehingga menyisakan gambar lingkaran di halaman.
Karena gambar ini adalah link, Anda dapat melihat hal lain tentang properti clip-path.
Hanya area gambar yang terlihat yang dapat diklik,
karena peristiwa tidak diaktifkan pada bagian tersembunyi dari gambar.
Klip dapat diterapkan pada elemen HTML apa pun, bukan hanya gambar.
Ada beberapa cara untuk membuat clip-path, dalam postingan ini kita akan membahasnya.
Kompatibilitas browser
Untuk browser lama, penggantian mungkin berarti mengizinkan browser mengabaikan properti clip-path dan menampilkan gambar yang tidak diklip.
Jika hal ini menjadi masalah, Anda dapat menguji clip-path dalam kueri fitur dan menawarkan tata letak alternatif untuk tidak mendukung browser.
@supports(clip-path: circle(45%)) {
/* code that requires clip-path here. */
}
Bentuk dasar
Properti clip-path dapat menggunakan sejumlah nilai.
Nilai yang digunakan dalam contoh awal adalah circle().
Ini adalah salah satu nilai bentuk dasar, yang ditentukan dalam
spesifikasi Bentuk CSS.
Ini berarti Anda dapat memangkas area,
dan juga menggunakan nilai yang sama untuk shape-outside agar teks dibungkus di sekitar bentuk tersebut.
Daftar lengkap bentuk dasar adalah:
inset()
Nilai inset() menyisipkan area yang diklip dari tepi elemen,
dan dapat meneruskan nilai untuk tepi atas, kanan, bawah, dan kiri.
border-radius juga dapat ditambahkan untuk melengkungkan sudut area yang dipotong,
dengan menggunakan kata kunci round.
Dalam contoh, saya memiliki dua kotak dengan class .box.
Kotak pertama tidak memiliki kliping, kotak kedua diklip menggunakan nilai inset().
circle()
Seperti yang telah Anda lihat, nilai circle() membuat area yang diklip lingkaran.
Nilai pertama adalah panjang atau persentase dan merupakan radius lingkaran.
Nilai opsional kedua memungkinkan Anda menetapkan bagian tengah lingkaran.
Dalam contoh di bawah ini, saya menggunakan nilai kata kunci untuk menetapkan lingkaran yang diklip di kanan atas.
Anda juga dapat menggunakan
panjang atau persentase.
Hati-hati dengan tepi yang rata!
Ketahuilah dengan semua nilai ini bahwa bentuk akan terpotong oleh kotak margin pada elemen. Jika Anda membuat lingkaran pada gambar, dan bentuk tersebut memanjang ke luar ukuran alami gambar, tepian akan rata.
circle(50%). Karena gambar tidak berbentuk persegi, kita mencapai kotak margin di bagian atas dan bawah, lalu lingkaran akan diklip.ellipse()
Pada dasarnya, elips adalah lingkaran bergelombang,
sehingga bertindak sangat mirip dengan circle(), tetapi menerima radius untuk x dan radius untuk y,
ditambah nilai untuk pusat elips.
polygon()
Nilai polygon() dapat membantu Anda membuat bentuk yang cukup kompleks,
menentukan titik sebanyak yang Anda butuhkan,
dengan menetapkan koordinat setiap titik.
Untuk membantu Anda membuat poligon dan melihat kemungkinan, lihat Clippy,
generator clip-path,
lalu salin dan tempelkan kode ke dalam project Anda sendiri.
Bentuk dari nilai kotak
Bentuk CSS juga ditentukan dalam Bentuk adalah bentuk dari nilai kotak.
Ini berkaitan dengan Model Kotak CSS -- kotak konten, kotak padding, kotak batas,
dan kotak margin dengan nilai kata kunci content-box, border-box, padding-box, dan margin-box.
Nilai-nilai ini bisa digunakan sendiri, atau di samping bentuk dasar untuk mendefinisikan kotak referensi yang digunakan oleh bentuk itu. Misalnya, gambar berikut akan memotong bentuk ke tepi konten.
.box {
clip-path: content-box;
}
Dalam contoh ini, lingkaran akan menggunakan content-box sebagai kotak referensi, bukan margin-box (yang merupakan default).
.box {
clip-path: circle(45%) content-box;
}
Saat ini, browser tidak mendukung penggunaan nilai kotak untuk properti clip-path.
Namun, baris tersebut didukung untuk shape-outside.
Menggunakan elemen SVG
Untuk kontrol yang lebih besar atas area yang diklip daripada yang mungkin dilakukan dengan bentuk dasar,
gunakan elemen clipPath SVG.
Kemudian, referensikan ID tersebut, menggunakan url() sebagai nilai untuk clip-path.
Menganimasikan area yang diklip
Transisi dan animasi CSS dapat diterapkan ke clip-path untuk membuat beberapa efek yang menarik.
Dalam contoh berikut ini, saya menganimasikan lingkaran saat mengarahkan kursor dengan melakukan transisi antara dua lingkaran dengan nilai radius yang berbeda.
Ada banyak cara kreatif untuk menggunakan animasi dengan pemotongan. Menganimasikan dengan jalur klip pada Trik CSS membahas beberapa ide.
Foto oleh Matthew Henry di Burst.