Blob di belakang kartu
Gratis, tanpa daftar, berjalan di peramban Anda.
Sebuah blob yang duduk di belakang kartu atau blok teks, sebagai warna dan bukan sebagai bentuk yang memang dimaksudkan untuk dilihat langsung. Pemakaian blob yang paling pemaaf, dan yang paling cocok untuk prasetel yang nyaris bulat.
Resepnya
| Bentuk | Blob halus |
|---|---|
| Ekspor sebagai | Latar CSS |
| Ukuran | 491 B |
Langkah demi langkah
- Pilih Blob halus — keacakan rendah tetap senyap di belakang konten.
- Pilih warna yang dekat dengan latar halaman Anda, terpaut satu dua nada.
- Ekspor sebagai Latar CSS dan terapkan pada wadah kartu itu sendiri.
- Pakai `background-position` untuk menggesernya dari tengah — blob yang terpusat tampak seperti kekeliruan.
Yang akan Anda salin
.shape {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 33.65C118.88 33.14,151.1 49.98,159.29 65.77C167.49 81.56,159.05 113.2,149.17 128.39C139.29 143.58,116.48 156.87,100 156.92C83.52 156.98,59.27 143.39,50.27 128.71C41.27 114.03,37.71 84.67,46 68.82C54.29 52.98,81.12 34.16,100 33.65Z' fill='%234f46e5'/%3E%3C/svg%3E");
background-repeat…Lebih rinci
Jaga kontrasnya tetap rendah. Latar hias yang bersaing dengan teks di depannya gagal dua kali: ia mengganggu, dan ia menyeret turun rasio kontras teks itu bersamanya. Kalau Anda tidak bisa membaca kartunya dengan nyaman saat ada blob di belakangnya, blobnya yang terlalu gelap, bukan teksnya yang terlalu terang.
Pertanyaan
Bentuk mana yang sebaiknya jadi titik awal untuk Blob di belakang kartu?
Blob halus, 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 491 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.