Generator Clip Path CSS
Generator clip-path CSS online gratis. Desain bentuk polygon, circle, ellipse, dan inset dengan titik yang bisa digeser, pratinjau langsung, dan salin kode CSS sekali klik.
Apa itu clip-path pada CSS?
clip-path adalah properti CSS yang memotong elemen mengikuti bentuk dasar atau jalur tertentu. Semua di luar bentuk itu disembunyikan, sehingga gambar atau kotak persegi bisa diubah menjadi segitiga, lingkaran, heksagon, banner miring, atau poligon kustom apa pun tanpa mengedit gambar aslinya.
Browser apa saja yang mendukung clip-path?
Semua browser modern mendukung fungsi bentuk dasar yang dipakai generator ini: polygon(), circle(), ellipse(), dan inset(), termasuk Chrome, Edge, Firefox, Safari, dan Opera. Prefiks -webkit-clip-path hanya diperlukan untuk Safari mobile versi sangat lama.
Bagaimana cara kerja mode poligon?
Pada mode poligon, pratinjau menampilkan setiap titik sudut sebagai titik yang bisa digeser. Geser titik untuk memindahkannya, klik dua kali pada area kosong untuk menambah titik baru, klik titik untuk memilihnya lalu tekan tombol hapus. Nilai CSS diperbarui langsung dengan koordinat persen.
Apa arti persentase di dalam polygon()?
Setiap titik ditulis sebagai pasangan X Y dalam persen, diukur dari pojok kiri atas elemen. Karena nilainya relatif terhadap ukuran elemen, bentuknya ikut menskala dan tetap responsif pada lebar layar apa pun.
Apa bedanya circle, ellipse, dan inset?
circle(radius at x y) memotong lingkaran dengan satu radius, ellipse(rx ry at x y) memungkinkan radius horizontal dan vertikal berbeda, sedangkan inset(atas kanan bawah kiri) memotong persegi yang menyusut dari tiap sisi. Generator ini menyediakan slider dan input angka untuk semua parameter.
Apakah clip-path memengaruhi layout atau klik?
clip-path murni visual. Elemen tetap mempertahankan kotak aslinya dalam layout sehingga area sekitarnya tidak bergeser. Namun event pointer seperti klik hanya merespons di dalam area terpotong yang terlihat, sehingga cocok untuk tombol berbentuk kustom.
Bisakah clip-path dianimasikan?
Bisa. Browser dapat melakukan transisi mulus antara dua nilai clip-path jika fungsi bentuk dan jumlah titiknya sama, misalnya dari inset besar ke kecil, atau antara dua poligon dengan jumlah titik yang sama. Animasikan dengan properti CSS transition.
Apakah gambar atau data saya diunggah?
Tidak. Gambar pratinjau adalah gradien yang digambar secara lokal pada elemen canvas dan seluruh perhitungan terjadi di browser Anda. Tidak ada yang dikirim ke server, jadi alat ini juga bisa dipakai offline setelah dimuat.
Apa saja penggunaan umum clip-path?
Yang populer antara lain section hero diagonal, masker avatar heksagonal atau bulat, ujung gelembung bicara segitiga, kolase foto kreatif, sudut kartu terpotong, dan tombol berbentuk unik, semuanya tanpa aplikasi pengedit gambar.
Cara Menggunakan Generator Clip Path CSS
Bentuk elemen apa pun dengan CSS clip-path alih-alih menyunting gambar. Pilih fungsi bentuk, seret pegangannya, dan salin CSS siap produksi. Semuanya berjalan lokal di peramban Anda.
- Pilih mode: Poligon, Lingkaran, Elips, atau Inset.
- Dalam mode Poligon seret titik-titik verteks, klik dua area kosong untuk menambah titik, dan pilih satu sebelum menghapusnya.
- Pada mode Lingkaran, Elips, dan Inset, haluskan setiap nilai dengan penggeser atau ketik persentase pasti.
- Amati pratinjau langsung diperbarui di atas citra sampel gradien yang dibuat secara lokal.
- Salin aturan clip-path satu baris dan tempelkan ke lembar gaya Anda.
Jaga jumlah titik poligon yang sama antara dua keadaan dan Anda bisa menganimasikan bentuknya dengan mulus memakai transisi CSS.
Alat Terkait
- Generator Box Shadow CSS Generator box-shadow CSS online gratis. Buat bayangan indah secara visual dengan offset, blur, spread, warna, dan inset yang dapat disesuaikan. Pratinjau langsung dan salin kode instan.
- Generator Gradien CSS Buat gradien CSS menakjubkan secara visual. Hasilkan gradien linear, radial dan konikal dengan beberapa color stop, sudut dan posisi kustom. Salin kode CSS siap produksi secara instan.
- Generator Border Radius Kreatif Generator border radius kreatif gratis online. Seret 8 pegangan atau pilih prasetel blob untuk membuat bentuk CSS organik dan menyalin kodenya seketika.
- Konverter Warna Konverter warna online gratis. Konversi format HEX, RGB, HSL, HSV secara instan dengan pemilih visual. 100% pribadi, berjalan di browser Anda.
- Generator Easing CSS Generator easing CSS online gratis. Geser titik kendali cubic-bezier pada kurva interaktif, pilih dari 18 preset, lihat pratinjau bola berulang, dan salin fungsi timing seketika.
- Generator Text Shadow CSS Generator text-shadow CSS online gratis. Tumpuk beberapa lapisan bayangan dengan offset, blur, warna, dan opasitas, coba preset Neon, 3D, Retro, dan salin CSS-nya seketika.
- Pemformat CSS Format dan percantik kode CSS secara instan. Konversi CSS minified menjadi kode yang mudah dibaca dengan opsi yang dapat disesuaikan.
- Minifier CSS Minifier CSS online gratis. Kompres dan optimalkan kode CSS secara instan dengan menghapus spasi, komentar, dan karakter tidak perlu. Kurangi ukuran file untuk performa web lebih cepat.