Penjana Clip Path CSS
Penjana clip-path CSS dalam talian percuma. Reka bentuk polygon, circle, ellipse dan inset dengan titik boleh seret, pratonton langsung dan salin kod CSS sekali klik.
Apakah clip-path dalam CSS?
clip-path ialah sifat CSS yang memotong elemen mengikut bentuk asas atau laluan. Semua di luar bentuk itu disembunyikan, jadi imej atau kotak segi empat boleh ditukar menjadi segitiga, bulatan, heksagon, sepanduk condong atau mana-mana poligon tersuai tanpa menyunting imej itu sendiri.
Pelayar manakah menyokong clip-path?
Semua pelayar moden menyokong fungsi bentuk asas yang digunakan penjana ini: polygon(), circle(), ellipse() dan inset(), termasuk Chrome, Edge, Firefox, Safari dan Opera. Prefiks -webkit-clip-path hanya diperlukan untuk Safari mudah alih versi sangat lama.
Bagaimana mod poligon berfungsi?
Dalam mod poligon, pratonton menunjukkan setiap bucu sebagai titik boleh seret. Seret titik untuk mengalihkannya, klik dua kali pada ruang kosong untuk menambah titik baharu, klik titik untuk memilihnya kemudian tekan butang padam untuk membuangnya. Nilai CSS dikemas kini serta-merta dengan koordinat peratusan.
Apakah maksud peratusan dalam polygon()?
Setiap bucu ditulis sebagai pasangan X Y dalam peratusan, diukur dari penjuru kiri atas elemen. Oleh sebab nilainya relatif kepada saiz elemen, bentuk menurun bersamanya dan kekal responsif pada sebarang lebar skrin.
Apakah beza antara circle, ellipse dan inset?
circle(jejari at x y) memotong bulatan dengan satu jejari, ellipse(rx ry at x y) membolehkan jejari mengufuk dan menegak berbeza, manakala inset(atas kanan bawah kiri) memotong segi empat yang mengecut dari setiap tepi. Penjana ini menyediakan peluncur dan input nombor untuk semua parameter.
Adakah clip-path menjejaskan susun atur atau klik?
clip-path semata-mata visual. Elemen kekal mengekalkan kotak asalnya dalam susun atur jadi tiada apa yang bergeser di sekelilingnya. Namun peristiwa penunjuk seperti klik hanya berfungsi dalam kawasan terpotong yang kelihatan, sesuai untuk butang berbentuk tersuai.
Bolehkah clip-path dianimasikan?
Boleh. Pelayar boleh bertransisi dengan lancar antara dua nilai clip-path apabila fungsi bentuk dan bilangan titik sepadan, contohnya daripada inset besar kepada kecil, atau antara dua poligon dengan bilangan bucu sama. Animasikan dengan sifat CSS transition.
Adakah imej atau data saya dimuat naik?
Tidak. Imej pratonton ialah gradien yang dilukis secara setempat pada kanvas dan semua pengiraan berlaku dalam pelayar anda. Tiada apa yang dihantar ke pelayan, jadi alat ini juga boleh digunakan luar talian selepas dimuatkan.
Apakah kegunaan biasa clip-path?
Kegunaan popular termasuk bahagian hero condong, topeng avatar heksagon atau bulat, penunjuk gelembung ucapan segitiga, kolaj foto kreatif, penjuru kad terpotong dan butang berbentuk tersuai, semuanya tanpa perisian penyuntingan imej.
Cara Menggunakan Penjana Clip Path CSS
Bentukkan mana-mana elemen dengan CSS clip-path dan bukannya menyunting imej. Pilih satu fungsi bentuk, seret pemegangnya, dan salin CSS sedia untuk pengeluaran. Semuanya berjalan setempat dalam pelayar anda.
- Pilih satu mod: Poligon, Bulatan, Elips atau Inset.
- Dalam mod Poligon, seret titik-titik bucu, klik dua kali ruang kosong untuk menambah titik, dan pilih satu sebelum memadamnya.
- Dalam mod Bulatan, Elips dan Inset, haluskan setiap nilai dengan peluncur atau taip peratusan yang tepat.
- Perhatikan pratonton langsung dikemas kini di atas imej sampel bergraduan yang dijana secara setempat.
- Salin peraturan clip-path satu baris dan tampalkan ke dalam helaian gaya anda.
Kekalkan bilangan titik poligon yang sama antara dua keadaan dan anda boleh menganimasikan bentuk itu dengan lancar menggunakan transisi CSS.
Alat Berkaitan
- Penjana Box Shadow CSS Penjana box-shadow CSS dalam talian percuma. Cipta bayangan cantik secara visual dengan ofset, kabur, sebar, warna dan sisip boleh laras. Pratonton langsung dan salin kod serta-merta.
- Penjana Gradien CSS Cipta gradien CSS menakjubkan secara visual. Jana gradien linear, radial dan konikal dengan pelbagai henti warna, sudut dan kedudukan tersuai. Salin kod CSS sedia pengeluaran serta-merta.
- Penjana Border Radius Kreatif Penjana border radius kreatif percuma dalam talian. Seret 8 pemegang atau pilih pratetap blob untuk mencipta bentuk CSS organik dan menyalin kod dengan serta-merta.
- Penukar Warna Penukar warna dalam talian percuma. Tukar format HEX, RGB, HSL, HSV serta-merta dengan pemilih visual. 100% peribadi, berjalan dalam pelayar anda.
- Penjana Easing CSS Penjana easing CSS dalam talian percuma. Seret titik kawalan cubic-bezier pada lengkung interaktif, pilih dari 18 pratetap, lihat pratonton bola berulang dan salin fungsi pengmasaan serta-merta.
- Penjana Text Shadow CSS Penjana text-shadow CSS dalam talian percuma. Tindih beberapa lapisan bayang dengan ofset, kabur, warna dan kelegapan, cuba pratetap Neon, 3D, Retro dan salin CSS serta-merta.
- Pengindah CSS Format dan indahkan kod CSS serta-merta. Tukar CSS yang diminifikasi kepada kod mudah dibaca dengan pilihan boleh disesuaikan.
- Peminit CSS Peminit CSS dalam talian percuma. Mampat dan optimumkan kod CSS serta-merta dengan membuang ruang putih, komen dan aksara tidak perlu. Kurangkan saiz fail untuk prestasi web lebih pantas.