CSS Box Shadow Generator dengan Preview Kartu | We.Inc
Buat box shadow CSS berlapis dan lihat hasilnya di kartu layanan dan harga sungguhan, di latar terang dan gelap, dengan status fokus yang terlihat. Salin CSS-nya dan komponen kartu siap pakai.
Bayangan sulit dinilai di atas kotak abu-abu. Di sini Anda menyetel box-shadow berlapis dan melihatnya di kartu layanan dan kartu harga, di halaman terang atau gelap, dengan cincin fokus keyboard yang bisa Anda uji dengan Tab. Salin CSS-nya atau seluruh komponen kartu saat hasilnya sudah pas. Semuanya berjalan di browser Anda. Tidak ada yang Anda ketik dikirim ke We.Inc atau pihak lain mana pun, dan hilang begitu Anda menutup tab.
Mulai dari preset atau sesuaikan lapisan pertama: offset horizontal dan vertikal, blur, spread, warna, opasitas, dan inset.
Tambahkan hingga lima lapisan. Bayangan berlapis (satu yang rapat plus satu yang lebar dan lembut) terlihat lebih alami dibanding satu bayangan besar tunggal.
Alihkan preview antara halaman terang dan gelap. Tekan Tab untuk memindahkan fokus ke tombol kartu dan cek apakah cincin fokusnya tetap terlihat.
Pengecekan akan memperingatkan saat bayangan terlalu samar untuk dilihat di latar yang dipilih dan saat teks kartu jatuh di bawah kontras WCAG AA.
Salin deklarasi box-shadow, atau komponen kartu lengkap dengan HTML dan CSS.
Di latar gelap, bayangan hampir menghilang. Gunakan warna kartu yang sedikit lebih terang atau border tipis untuk memisahkan kartunya sebagai gantinya.
Jaga warna bayangan condong ke warna latar Anda alih-alih hitam murni untuk tampilan yang lebih lembut.
Jangan pernah mengandalkan bayangan saja untuk menunjukkan fokus. Gunakan outline yang jelas juga.
Nilai blur yang besar lebih berat digambar. Hindari menganimasikannya di daftar panjang.
Gunakan satu atau dua level bayangan di seluruh situs, supaya kedalamannya berarti sesuatu.
Pertanyaan yang sering diajukan
Bagaimana cara kerja properti CSS box-shadow?
box-shadow mengambil offset horizontal, offset vertikal, radius blur opsional, spread opsional, dan warna, plus kata kunci inset untuk bayangan dalam. Beberapa bayangan bisa didaftar, dipisahkan koma; yang pertama digambar di atas.
Mengapa bayangan berlapis terlihat lebih baik?
Objek nyata melemparkan bayangan tajam yang dekat dengannya dan satu yang lembut serta lebar lebih jauh. Dua atau tiga lapisan dengan blur yang membesar dan opasitas yang mengecil meniru itu.
Mengapa bayangan saya tidak terlihat di latar gelap?
Bayangan gelap di halaman gelap hampir tidak punya kontras. Alat ini memperingatkan Anda soal ini. Angkat kartunya dengan warna permukaan yang lebih terang atau border tipis sebagai gantinya.
Apakah box-shadow memengaruhi aksesibilitas?
Bayangan adalah dekorasi, jadi tidak perlu memenuhi aturan kontras sendiri. Yang penting teks di kartu tetap mudah dibaca dan fokus ditunjukkan dengan outline yang terlihat, bukan hanya perubahan bayangan.
Apakah CSS shadow generator ini gratis?
Ya, tanpa pendaftaran. Salin kodenya ke proyek apa pun.
Uji bayangan di komponen yang akan Anda pakai
Bayangan yang terlihat pas di satu kotak tunggal bisa terlihat berat di deretan kartu harga atau menghilang di bawah foto. Melihat pratinjaunya di kartu yang sungguh dipakai situs usaha kecil, kartu layanan dengan ikon dan paket harga yang disorot, menunjukkan hasil yang akan Anda dapat.
Kode komponennya menyertakan outline focus-visible, jadi kartunya tetap bisa dipakai dengan keyboard apa pun bayangan yang Anda pilih.