Pembuat Latar Bermotif

CSS murni, tanpa berkas gambar

Setiap motif digambar dengan gradien CSS di atas background-color yang solid. Hasilnya tidak memerlukan berkas gambar untuk dihosting atau diminta. Sebagai contoh, motif titik terlihat seperti ini:

.hero {
  background-color: #1F2937;
  background-image: radial-gradient(#FFFFFF 1px, transparent 1px);
  background-size: 20px 20px;
  background-repeat: repeat;
}

Latar CSS berulang secara bawaan. Nilai ukuran dan posisi yang dihasilkan menyelaraskan lapisan motif ketika berulang, tetapi zoom browser dan piksel pecahan dapat sedikit mengubah tampilan tepinya. Ubah nilai jarak untuk membuat tekstur lebih rapat atau lebih renggang.

Terbuat dari apa setiap motif

Tips warna dan kontras

• Gunakan kontras rendah untuk latar. Warna motif yang dekat dengan warna latar biasanya tampak halus. Kontras tinggi dapat bersaing dengan isi halaman.
• Sesuaikan dengan merek Anda. Gunakan warna merek sebagai warna pola alih-alih abu-abu polos agar teksturnya terhubung dengan identitas Anda.
• Mode gelap. Cobalah warna latar gelap dan warna motif yang sedikit lebih terang. Kontras kuat dapat terlihat ramai pada bidang gelap yang luas.
• Uji teks terhadap kedua warna. Jika teks berada di atas motif, periksa kontras warna teks terhadap warna latar dan warna motif di setiap tempat yang mungkin berada di bawah huruf. Alat ini menampilkan motif, tetapi tidak melakukan audit kontras WCAG.

Di mana menggunakannya

• Latar belakang hero dan bagian yang butuh sedikit tekstur tanpa gambar.
• Kartu dan panel dalam sebuah dasbor, di mana kisi atau titik samar menambah struktur.
• Status kosong dan placeholder, di mana papan catur terbaca netral.
• Tata letak bergaya cetak dan slide yang menuntut kesan kertas grafik atau arsir silang.

Karena motif berupa CSS dan bukan aset latar terpisah, motif tidak menambah permintaan gambar. Nilai gradien, ukuran, dan posisinya juga dapat disesuaikan kemudian melalui alat pengembang browser.