Masker avatar blob
Gratis, tanpa daftar, berjalan di peramban Anda.
Memotong sebuah foto menjadi blob alih-alih lingkaran. Di sinilah clip-path membuktikan gunanya — gambarnya mempertahankan isinya dan mendapat siluet baru, alih-alih duduk di belakang sebuah bentuk.
Resepnya
| Bentuk | Blob organik |
|---|---|
| Ekspor sebagai | clip-path CSS |
| Ukuran | 620 B |
Langkah demi langkah
- Pilih Blob organik dan acak sampai siluetnya cocok dengan fotonya.
- Ekspor sebagai clip-path CSS — Anda akan dapat satu blok SVG sebaris dan satu aturan CSS.
- Tempel blok SVG-nya di mana saja dalam dokumen; ia tersembunyi dan hanya dirujuk lewat id.
- Terapkan kelasnya pada gambar Anda dan beri ukuran yang disebutkan keluarannya.
Yang akan Anda salin
<svg width="0" height="0" style="position:absolute">
<defs>
<clipPath id="shape-clip" clipPathUnits="userSpaceOnUse">
<path d="M100 54.85C116.91 53.97,145.16 39.06,153.41 46.59C161.66 54.11,150.46 83.17,149.49 100C148.51 116.83,155.8 138.58,147.55 147.55C139.3 156.52,117.11 152.56,100 153.82C82.89 155.08,56.37 164.08,44.89 155.11C33.41 146.14,29.94 117.2,31.11 100C32.28 82.8,40.44 59.45,51.92 51.92C63.4 4…Lebih rinci
Beri juga `object-fit: cover` pada gambarnya, atau foto dengan rasio aspek berbeda akan menggepeng sebelum sempat dipotong. Dan kalau Anda memakai lebih dari satu masker blob di satu halaman, ganti id-nya baik di blok SVG maupun di aturan CSS — id kembar membuat setiap elemen yang dipotong mengambil bentuk mana pun yang ditemukan peramban lebih dulu.
Pertanyaan
Bentuk mana yang sebaiknya jadi titik awal untuk Masker avatar blob?
Blob organik, diekspor sebagai clip-path CSS. Pasangan itulah yang menjadi dasar halaman ini, dan pratinjau di atas adalah bentuk itu persis — tetapi ia titik awal, bukan aturan. Semua penggeser tetap aktif begitu Anda membukanya.
Berapa banyak tambahannya ke halaman?
Sekitar 620 bita untuk kombinasi ini. Itu lebih kecil daripada satu ikon dan sama sekali tidak butuh permintaan jaringan, karena bentuknya adalah markah, bukan berkas gambar.
Apakah akan jalan di ponsel?
Ya. Pembatas gelombang disetel untuk melar mengikuti wadahnya alih-alih mempertahankan rasio aspek, dan itulah yang membuat satu bentuk bisa membentang di lebar layar mana pun tanpa bilah hitam. Blob mempertahankan proporsinya, karena blob yang dimelarkan hanyalah elips.
Setiap angka dan setiap bentuk di halaman ini dihasilkan dengan menjalankan generatornya saat build, jadi semuanya menggambarkan alat yang sebentar lagi Anda pakai, bukan versi yang pernah ada.