Penjana Bayang Kotak CSS
Cipta bayang-kotak CSS berlapis dengan gelangsar langsung untuk ofset, blur, sebaran, warna, kelegapan dan inset — pratonton pada elemen sebenar dan salin CSS yang sedia tampal serta-merta.
box-shadow: —;
Semua dikemas kini secara langsung dalam pelayar anda — tiada muat naik, tiada pendaftaran, percuma sepenuhnya.
Mengenai Penjana Bayang Kotak CSS
Penjana Bayang Kotak CSS membolehkan anda mereka bentuk bayang-bayang kotak secara visual dan bukannya meneka nilai dalam kod. Seret gelangsar untuk ofset mendatar dan menegak, jejari kabur, jejari sebaran, warna dan kelegapan — dengan togol inset — dan lihat elemen sebenar dikemas kini secara langsung. Apabila ia kelihatan betul, salin CSS sedia-tampal dengan satu klik.
Bayang antara muka moden jarang sekali hanya satu lapisan. Penjana ini menyokong lapisan bayang bertindan: tambah, duplikasi, sembunyi atau alih keluar lapisan, dan pratonton sama ada lapisan terpilih sahaja atau semua lapisan digabungkan. Melapiskan bayang gelap yang ketat di bawah bayang lembut yang luas adalah cara kad dan butang yang kemas mendapat kedalamannya.
Anda juga boleh menggayakan elemen pratonton itu sendiri — warna kotak, jejari sempadan dan latar belakang kanvas — supaya bayang dinilai dalam konteks yang realistik, termasuk permukaan gelap. Mulakan daripada satu pratetap, tekan "Rawakkan lapisan" untuk inspirasi, dan tetapkan semula apabila anda mahukan permulaan yang bersih. Semuanya berjalan dalam penyemak imbas anda.
Cara menggunakan Penjana Bayang Kotak CSS
- Laraskan gelangsar untuk ofset mendatar, ofset menegak, kabur, sebaran, warna dan kelegapan, dan togol "Bayang inset" jika anda mahukan bayang dalaman.
- Klik "Tambah lapisan" atau "Duplikasi lapisan" untuk menindan bayang, dan tukar mod pratonton antara "Lapisan ini" dan "Semua lapisan" untuk memperhalusi setiap satu.
- Laraskan elemen dan kanvas — warna kotak, jejari sempadan dan latar belakang — supaya pratonton sepadan dengan reka bentuk sebenar anda.
- Gunakan pratetap atau klik "Rawakkan lapisan" jika anda mahukan titik permulaan berbanding set gelangsar kosong.
- Salin peraturan CSS penuh (atau hanya nilainya) dan tampalkannya ke dalam helaian gaya anda.