Apa yang dilakukan alat ini
Box shadow adalah area gelap, lembut atau tegas, yang membuat kartu, tombol, atau menu tampak terangkat dari halaman. Di CSS itu satu properti, box-shadow, tetapi tiap bayangan punya hingga enam nilai dan boleh ada banyak bayangan, yang sulit dibayangkan hanya dari angka. Alat ini membiarkan Anda menyusunnya dengan mengubah angka sambil melihat kartu bereaksi, lalu memberi CSS untuk disalin. Anda bisa menumpuk hingga delapan lapisan, memakai bayangan dalam, memilih warna transparan, dan menempel box-shadow yang sudah ada untuk diedit. Semua berjalan di browser dan tidak ada yang diunggah.
Arti tiap angka
Sintaks satu bayangan adalah inset? offset-x offset-y blur spread color. Dua offset menggeser bayangan ke kanan dan ke bawah; nilai negatif ke kiri dan ke atas. Blur melembutkan tepi: spesifikasi meminta blur Gauss dengan simpangan baku setengah nilai blur, jadi 30px memudar sekitar 30px. Tidak boleh negatif. Sebaran membesarkan bayangan ke segala arah sebelum diburamkan, atau mengecilkannya jika negatif. Sebaran negatif dengan offset vertikal besar memberi kesan "terangkat", karena bayangan lebih kecil dari kartu dan hanya terlihat di bawahnya. Bayangan mengikuti border-radius kartu dan tidak mengubah tata letak di sekitarnya.
Berlapis: mengapa beberapa bayangan tampak lebih nyata
Cahaya nyata tidak membuat satu bayangan seragam. Dekat benda bayangan kecil dan gelap; lebih jauh lebar dan samar. Contoh Berlapis meniru ini dengan lima bayangan, masing-masing dua kali lipat sebelumnya dan semuanya beropasitas 8%: 0 1px 1px, 0 2px 2px, 0 4px 4px, 0 8px 8px, dan 0 16px 16px. Jumlahnya lebih halus daripada satu bayangan dengan total blur yang sama. Di CSS bayangan dipisah koma dan yang pertama digambar paling atas, jadi urutan penting saat saling menimpa.
Bayangan terlihat terbaik dengan warna gelap transparan, bukan abu-abu pekat, karena warna halaman tembus dari bawahnya. Opasitas adalah bagian dari warna: rgba(0, 0, 0, 0.15) dan hex #00000026 adalah warna yang sama, dan Anda boleh memilih format mana pun. Pada latar gelap bayangan hitam hampir tak terlihat; pakai offset lebih besar, opasitas lebih kuat, atau cahaya berwarna.
drop-shadow() dan hal yang perlu diketahui
filter: drop-shadow() adalah kerabat box-shadow yang mengikuti kontur terlihat dari gambar, cocok untuk PNG dengan sudut transparan atau ikon SVG. Ia tidak punya sebaran dan inset, jadi alat ini hanya menawarkan versi itu untuk lapisan yang tidak memakainya. Bayangan digambar di luar kotak, jadi elemen induk dengan overflow: hidden akan memotongnya. Dalam mode warna paksa (kontras tinggi), browser menghapus box shadow, jadi jangan hanya mengandalkan bayangan untuk menandai fokus. Padukan dengan pembuat gradien CSS dan periksa warna teks dengan alat warna.
