Generator Box Shadow

Cara menggunakan generator box shadow

1. Mulai dari sebuah preset, atau biarkan bayangan bawaan Lembut. Baris Preset menyediakan Lembut, Tegas, Berlapis, Elevasi, Neumorphism, Dalam, dan Cahaya.
2. Di Lapisan bayangan, klik sebuah lapisan untuk memilihnya. Setiap lapisan bisa dipindahkan dengan Naikkan dan Turunkan, atau dihapus dengan Buang. Tambah lapisan menduplikasi lapisan terpilih sehingga Anda bisa mengubah salinannya.
3. Edit lapisan terpilih di bagian Edit lapisan terpilih: seret titik pada panel Offset, atau gunakan slider dan kolom angka untuk Offset horizontal (px), Offset vertikal (px), Blur (px), dan Spread (px).
4. Pilih Warna bayangan dengan pemilih warna atau ketik warna CSS apa pun di kolom kode, lalu atur Opasitas (%). Centang Inset (bayangan dalam) untuk menggambar bayangan di dalam kotak.
5. Sesuaikan Pengaturan pratinjau (Warna kotak, Warna latar belakang, Radius sudut (px)) untuk melihat bayangan pada warna Anda yang sebenarnya. Pengaturan ini hanya memengaruhi pratinjau.
6. Salin deklarasi dari Kode CSS dengan tombol Salin.

Keyboard: fokuskan titik di panel Offset dan gunakan tombol panah untuk memindahkannya 1 px, atau 10 px dengan Shift.

Cara kerja box-shadow

Sintaks satu bayangan adalah box-shadow: [inset] x y blur spread color.

• x dan y menggeser bayangan ke kanan dan ke bawah. Nilai negatif menggesernya ke kiri dan ke atas. Sumber cahaya di atas elemen berarti y bernilai positif.
• Blur memperhalus tepinya. Nilainya tidak boleh negatif. Blur 0 menghasilkan salinan kotak dengan tepi tajam.
• Spread memperbesar (positif) atau memperkecil (negatif) bayangan sebelum diberi blur. Spread negatif dengan y yang besar membuat bayangan tetap berada di bawah elemen, bukan di sekelilingnya.
• Warna biasanya mengandung transparansi. Alat ini menulis warna buram sebagai HEX dan warna transparan sebagai rgba(), yang dipahami semua browser. Jika Anda mengetik warna yang sudah memiliki kanal alfa, Opasitas (%) akan mengalikannya.
• inset menempatkan bayangan di dalam border, seolah-olah kotak ditekan ke dalam halaman.

Bayangan mengikuti border-radius elemen dan tidak pernah mengubah tata letak: bayangan tidak memakan ruang dan tidak memunculkan scrollbar.

Mengapa memakai beberapa lapisan bayangan?

Bayangan nyata bukan sekadar satu persegi panjang yang dikaburkan. Bayangan kecil, gelap, dan rapat berada tepat di bawah objek, sementara bayangan besar, samar, dan kabur menyebar lebih jauh. Menumpuk dua sampai lima lapisan meniru hal ini dan terlihat jauh lebih alami daripada satu bayangan tebal. Preset Berlapis menggandakan offset dan blur di setiap langkah dengan opasitas rendah, teknik yang dipopulerkan oleh banyak design system. Elevasi meniru bayangan tiga lapis Material Design.

Lapisan pertama dalam daftar digambar di atas lapisan lainnya, persis seperti pada nilai CSS. Urutan terutama penting saat Anda mencampur bayangan inset dan bayangan luar, atau memakai warna yang kuat.

Neumorphism

Neumorphism (“soft UI”) menggunakan dua bayangan pada elemen yang warnanya sama dengan latar belakangnya: bayangan gelap yang digeser ke kanan bawah, dan bayangan terang yang digeser ke kiri atas. Preset Neumorphism mengatur kedua warna tersebut ke #e0e5ec. Ingat bahwa gaya ini memiliki kontras rendah, jadi tombol yang dibuat dengan gaya ini memerlukan status fokus yang jelas dan label yang mudah dibaca.