Transisi antara dua bagian
Gratis, tanpa daftar, berjalan di peramban Anda.
Tempat dua bagian berwarna berbeda bertemu di tengah halaman. Lapisan bekerja lebih keras di sini daripada di mana pun, karena ada dua warna yang harus didamaikan, bukan satu tepi yang perlu dihias.
Resepnya
| Bentuk | Gelombang berlapis |
|---|---|
| Ekspor sebagai | Latar CSS |
| Ukuran | 1.071 B |
Langkah demi langkah
- Pilih Gelombang berlapis untuk mendapat beberapa kurva dari satu benih.
- Setel kedua warnanya ke warna bagian di atas dan di bawah.
- Ekspor sebagai Latar CSS dan terapkan pada sebuah div kosong yang pendek di antara kedua bagian.
- Beri div itu tinggi tetap — gambar latar tidak punya tinggi bawaan untuk memberinya satu.
Yang akan Anda salin
.shape {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M-288 95.89C-240 100.43,-96 109.48,0 123.14C96 136.8,192 170.05,288 177.86C384 185.66,480 180.48,576 169.98C672 159.48,768 126.46,864 114.84C960 103.23,1056 95.46,1152 100.31C1248 105.15,1392 136.65,1440 143.92L1440 320L-288 320Z' fill='%23a5b4fc' opacity='0.35'…Lebih rinci
Div kosong itulah bagian yang perlu dibuat benar. `background-image` tidak menentukan ukuran elemennya sendiri, jadi div tanpa tinggi adalah div yang tidak berisi bentuk apa pun — alasan paling umum resep ini tampak tidak melakukan apa-apa. Beri tinggi dalam satuan yang sama dengan jarak-jarak Anda yang lain dan setel `background-size: cover` supaya bentuknya mengisi pada lebar berapa pun.
Pertanyaan
Bentuk mana yang sebaiknya jadi titik awal untuk Transisi antara dua bagian?
Gelombang berlapis, diekspor sebagai Latar 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 1.071 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.