Generator Box Shadow CSS

Anatomi properti box-shadow

Sebuah box-shadow tunggal adalah daftar nilai dengan urutan yang tetap: offset horizontal, offset vertikal, radius blur, radius spread, dan warna, dengan kata kunci inset yang opsional. Hanya kedua offset dan warna yang wajib; blur dan spread bernilai nol secara default. Jadi bentuk singkat yang terbaca sebagai 0px 4px 12px rgba(0, 0, 0, 0.15) berarti tanpa pergeseran horizontal, empat piksel ke bawah, blur dua belas piksel, tanpa spread, dan hitam 15 persen. Slider pada alat ini menuliskan persis untaian itu untuk Anda, tetapi memahami urutannya membuat penyuntingan manual jadi tanpa kerumitan.

Offset menempatkan bayangan relatif terhadap kotak. Offset vertikal positif menggerakkan bayangan ke bawah, yang merupakan apa yang Anda inginkan untuk ilusi umum sumber cahaya di atas elemen; nilai negatif mengangkatnya ke atas. Offset horizontal bekerja dengan cara yang sama dari kiri ke kanan. Offset adalah petunjuk tunggal terbesar yang digunakan otak Anda untuk menilai seberapa tinggi sebuah elemen mengambang, jadi gunakanlah ini sebelum yang lain.

Blur dan spread: dua radius yang sering dikira sama

Radius blur mengendalikan seberapa lembut tepinya. Pada nol Anda mendapatkan duplikat kotak dengan tepi tajam; seiring blur membesar, bayangan memudar di sepanjang pita yang lebih lebar dan terlihat lebih menyerupai cahaya menyebar yang sesungguhnya. Sebagian besar bayangan alami menggunakan blur yang kira-kira dua hingga tiga kali offset vertikalnya. Perhatikan bahwa blur tidak boleh bernilai negatif.

Spread adalah nilai yang hampir tidak pernah disetel siapa pun, dan ia sangat ampuh. Spread positif menggembungkan bayangan ke luar ke segala arah sebelum blur diterapkan, membuatnya lebih besar dari kotak; spread negatif menyusutkannya. Spread negatif yang sangat kecil dipadukan dengan offset ke bawah dan blur yang cukup besar adalah resep klasik untuk bayangan yang menempel erat di bawah kartu alih-alih bocor ke sisi-sisinya. Spread juga merupakan cara Anda menggambar cincin padat: offset nol, blur nol, spread positif beberapa piksel, dan warna datar.

Bayangan inset untuk permukaan tertekan dan cekung

Menambahkan kata kunci inset menggambar bayangan di dalam elemen alih-alih di belakangnya, sehingga permukaan tampak terukir ke dalam. Beginilah cara Anda membuat kolom isian teks tampak seperti sumur, sebuah sakelar tampak tertekan, atau sebuah panel tampak tertanam ke dalam halaman. Offset kini mengarah ke tepi dalam yang menangkap bayangan, sehingga offset ke bawah menggelapkan tepi dalam bagian atas, meniru cahaya yang jatuh dari atas. Aktifkan opsi Inset pada alat ini untuk membalik antara bayangan luar dan bayangan dalam serta saksikan angka-angka yang sama membalikkan maknanya.

Menumpuk beberapa bayangan

Properti box-shadow menerima daftar yang dipisahkan koma, dan browser melukis setiap bayangan secara berurutan dengan yang pertama berada di paling atas. Ini adalah trik tunggal yang paling berguna untuk kedalaman yang realistis. Objek nyata tidak menjatuhkan satu bayangan; mereka menjatuhkan bayangan kontak yang rapat dan lebih gelap tepat di bawah tepinya serta bayangan ambien yang lebih lebar dan lebih samar di lebih jauh ke luar. Menumpuk bayangan kecil dengan blur rendah di atas bayangan besar dengan blur tinggi mereproduksi hal itu, dan hasilnya terbaca jauh lebih meyakinkan daripada yang dapat dicapai bayangan tunggal mana pun.

Penumpukan juga merupakan cara sistem desain membangun skala elevasi: elevasi bergaya Material biasanya berupa dua atau tiga bayangan bertumpuk yang disetel bersama, dan menaikkan sebuah kartu satu tingkat berarti menukar seluruh tumpukan alih-alih menggeser satu angka. Anda bahkan dapat mencampur bayangan inset dengan bayangan luar dalam deklarasi yang sama untuk mendapatkan tepi yang tersorot cahaya dan bayangan yang dijatuhkan sekaligus.

Contoh nyata: bayangan kartu yang lembut

Berikut adalah resep yang terlihat bagus di hampir semua permukaan terang. Mulailah tanpa offset horizontal agar bayangan tetap di tengah, offset vertikal sekitar 8px, blur kira-kira 24px, dan spread sekitar negatif 6px agar ia menyelip di bawah kartu. Gunakan warna mendekati hitam tetapi turunkan opasitasnya ke sekitar 12 persen, dinyatakan sebagai rgba(0, 0, 0, 0.12). Spread negatif menjaga tepi yang lembut agar tidak melebar melewati sudut, opasitas rendah mencegahnya terlihat seperti noda, dan offset yang moderat memberi kesan cahaya lembut dari atas. Untuk hasil yang ekstra tajam, tumpuk bayangan kedua dengan offset 1px, blur mendekati nol, dan hitam sekitar 6 persen untuk memalsukan garis kontak yang tajam.

Kesalahan umum dan cara menghindarinya

Kesalahan yang paling sering terjadi adalah bayangan hitam murni yang sepenuhnya buram dengan blur tinggi, yang terbaca keruh dan tidak alami alih-alih sebagai cahaya. Latar berwarna memperburuk ini: bayangan hitam di atas biru yang pekat terlihat kotor, jadi warnai bayangannya ke arah hue latarnya saja. Kesalahan lain adalah memperlakukan spread sebagai kontrol blur kedua; ia bukan itu, dan membiarkannya di nol sambil menaikkan blur adalah alasan mengapa sebagian bayangan terasa kabur sekaligus terlalu kecil.

Orang juga keliru menyamakan box-shadow dengan filter drop-shadow. box-shadow selalu mengikuti kotak persegi panjang elemen, termasuk border-radius-nya, sehingga PNG transparan di dalam kotak tetap mendapat bayangan persegi panjang. Filter drop-shadow menelusuri piksel tak-transparan yang sebenarnya, yang merupakan apa yang Anda inginkan untuk bentuk tak beraturan dan gambar potongan. Gunakan box-shadow untuk kartu, tombol, dan panel; gunakan filter saat siluetnya bukan persegi panjang.

Performa dan jebakan blur besar

Bayangan dilukis oleh browser, dan radius blur yang sangat besar benar-benar mahal, terutama saat mereka beranimasi atau muncul pada banyak elemen sekaligus. Menganimasikan blur atau spread dari bayangan besar dapat menyebabkan penggambaran ulang setiap frame dan tersendat pada perangkat kelas bawah. Jika Anda perlu sebuah bayangan membesar saat hover, pendekatan yang lebih mulus adalah merender bayangan yang lebih besar terlebih dahulu pada pseudo-element lalu menganimasikan opasitasnya, karena opasitas murah untuk disusun. Jaga nilai blur tetap wajar, hindari ratusan node berbayangan di layar sekaligus, dan antarmuka Anda akan tetap mulus.