Gelombang di atas footer
Gratis, tanpa daftar, berjalan di peramban Anda.
Gagasan yang sama dengan pembatas hero, terbalik. Kurvanya adalah tepi atas footer, jadi isiannya berada di atasnya dan menutup ke warna footer itu sendiri.
Resepnya
| Bentuk | Gelombang footer |
|---|---|
| Ekspor sebagai | SVG |
| Ukuran | 551 B |
Langkah demi langkah
- Pilih Gelombang footer — ia sudah dibalik tegak untuk keperluan ini.
- Setel isiannya ke warna latar footer Anda.
- Salin SVG dan letakkan tepat di atas elemen footer.
- Hapus margin apa pun antara bentuk dan footer, atau sepotong tipis latar halaman akan menyembul.
Yang akan Anda salin
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 207.13C-300 198.98,-120 174.18,0 158.27C120 142.36,240 112.09,360 111.66C480 111.23,600 137.74,720 155.71C840 173.68,960 218.07,1080 219.5C1200 220.93,1380 173.48,1440 164.28L1440 0L-360 0Z" fill="#a5b4fc" opacity="0.35"/><path d="M-360 116.33C-300 112.14,-120 88.78,0 91.21C120 93.64,240 120.61,360 130.91C480 141.…Lebih rinci
Pakai balik tegaknya, bukan `transform: scaleY(-1)` CSS. Baliknya sudah dipanggang ke dalam jalur, jadi SVG yang diekspor berdiri sendiri tanpa pembungkus dan tanpa transformasi yang perlu diingat — yang paling terasa kalau nanti Anda beralih ke ekspor latar CSS, di mana sejak awal tidak ada elemen untuk ditransformasi.
Pertanyaan
Bentuk mana yang sebaiknya jadi titik awal untuk Gelombang di atas footer?
Gelombang footer, diekspor sebagai SVG. 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 551 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.