Utilore

Generator bayangan CSS

Geser penggesernya dan contohnya ikut berubah. Tumpuk beberapa lapis bila satu bayangan tidak cukup: begitulah kedalaman lembut dan meyakinkan pada antarmuka sungguhan dibuat.

Lapisan

Prasetel

Cara pakai

  1. Pilih apa yang diberi bayangan: sebuah blok atau teks.
  2. Atur offset, blur, dan warnanya: contohnya digambar ulang seketika.
  3. Tambahkan satu lapis bila butuh kedalaman: dua atau tiga bayangan tipis terbaca lebih baik daripada satu bayangan berat.
  4. Salin baris CSS di bawah panel kendali.

Perlu diketahui

Kenapa text shadow punya lebih sedikit pengaturan

Properti text-shadow hanya menerima offset, blur, dan warna. Spread dan mode dalam hanya milik box-shadow, dan satu nilai tambahan membuat seluruh deklarasi tidak sah: peramban membuangnya diam-diam dan bayangannya hilang begitu saja. Saat Anda beralih ke mode teks, kedua kendali itu disembunyikan, bukan sekadar diharapkan akan diabaikan.

Beberapa lapis tipis mengalahkan satu lapis berat

Bayangan sungguhan tidak rata: ia pekat tepat di bawah objek dan meluruh saat menjauh. Satu bayangan dengan blur besar menghasilkan halo kelabu, sedangkan dua atau tiga lapis dengan offset berbeda dan opasitas rendah memberi kedalaman yang Anda lihat pada antarmuka yang digarap baik. Alat ini menjaga tiap lapis tetap terpisah, dan baris yang disalin menyebutnya berurutan.

Pertanyaan umum

Apa fungsi spread?

Ia membesarkan atau mengecilkan bayangan sebelum blur diterapkan. Nilai negatif menarik bayangan ke dalam sehingga tidak mencuat ke samping: itulah kunci bayangan rapi pada kartu, ketika cahayanya harus tetap berada di bawah blok, bukan mengelilinginya.

Bagaimana membuat bayangan di dalam?

Centang «Bayangan dalam»: kata kunci inset muncul di awal baris dan bayangannya berpindah ke dalam blok. Ini dipakai untuk tombol yang ditekan dan kolom isian, ketika kedalamannya harus terbaca sebagai cekungan, bukan sebagai tonjolan.

Kenapa bayangan saya tidak terlihat?

Paling sering karena opasitasnya nol, atau offset dan blur sama-sama nol sehingga bayangannya bersembunyi persis di balik blok. Bayangan juga hilang bila induk elemennya memakai overflow: hidden dan bayangan itu jatuh di luar area yang terlihat.

Apakah jalan di semua peramban?

Ya. Baik box-shadow maupun text-shadow sudah menjadi standar bertahun-tahun dan tidak butuh awalan vendor; nilai yang dihasilkan alat ini adalah CSS biasa tanpa perluasan apa pun.

Alat terkait