Jalur tugas / dari masukan ke hasil
Cara membuat pola latar belakang CSS
- 01
Pilih pola
Buka Pola dan pilih Titik, Kisi, atau Diagonal. Ketiganya dibangun hanya dari gradien CSS — tidak ada berkas gambar yang dilibatkan kapan pun. Berpindah di antara ketiganya mempertahankan nilai ubin, tanda, dan warna Anda, jadi membandingkan gaya tidak memakan biaya. Kisi titik 28 px bawaan adalah awal yang tenang.
- 02
Atur ubinnya
Pilih Ukuran ubin dari 8 hingga 96 px dan Lebar tanda dari 1 hingga 16 px. Tanda tidak boleh melebihi setengah ukuran ubin; jika ya, status menampilkan PERIKSA NILAI dengan aturan yang tepat.
- 03
Pilih dua warna
Warna pola menggambar tanda dan Warna kanvas mengisi alas di bawahnya. Pola yang halus lahir dari kontras rendah di antara keduanya — tanda yang hanya sedikit lebih gelap dari kanvas terbaca sebagai tekstur, bukan dekorasi.
- 04
Nilai pengulangan pada skala nyata
Pratinjau mengubin hasilnya ke seluruh panel, dan di situlah kontras lemah serta ubin yang sempit menampakkan diri. Sebagai patokan, jaga tanda jauh di bawah setengah ubin: tanda 2 px pada ubin 28 px terbaca sebagai tekstur, bukan derau.
- 05
Salin CSS pola
Tekan Salin CSS atau Unduh .css untuk menyimpan toolars-background-pattern.css. Aturan .pattern hanya tiga deklarasi — background-color, background-image, dan background-size — siap dipasang ke elemen mana pun.
- 06
Terapkan dan adaptasikan aturannya
Aturan ini menempel ke elemen mana pun tanpa efek samping tata letak, karena hanya mengecat latar. Sesuaikan background-size nanti untuk mengubah kepadatan pola, dan turunkan kontras di antara kedua warna — alih-alih mengecilkan tanda — saat pola bersaing dengan teks.