DIBALIK LAYAR - Header dengan shadow atau bayangan seperti situs ini sangatlah mudah untuk membuatnya, hanya menambahkan beberapa kode di bagian CSS
Situs ini tidak punya penjelasan terkait manfaat dan fungsi shadow atau bayangan, hanya sekedar memberikan tutorial singkat untuk membuatnya. Ini hanya kelanjutan dari tutorial membuat sticky header atau header mengambang saat di gulir.
Sebelumnya saya perlu disclaimer dulu, tutorial ini saya baca pertama kali dari situs Saifullah.id, cukup mudah dan berhasil diterapkan. Berikut tutorial yang di sudah dipersingkat
- Buka setelan HTML (Tema - panah kecil di Kotak orange - Edit HTML)
- Scroll kebawah hingga ke bagian CSS, (kode yang umumnya berwarna biru dan menggunakan tanda kurung '{}')
- Cari kode @media screen and (max-width:896px){/* Header */ .ntfC{padding-left:20px;padding-right:20px} /* Remove this to keep header floating */ header{position:sticky;border:0} atau kode seperti ini header{position:relative;border:0}, Jika belum pernah merubah header.
header{position:sticky;border:0}
- Tambahkan Kode diatas dengan border-bottom:2px solid var(--content-border);box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3)} Sehingga menjadi seperti dibawah ini
header{position:sticky;border-bottom:2px solid var(--content-border);box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3)}
- Jika sudah, Simpan dan lihat hasilnya
Kode border-bottom:2px solid var(--content-border) untuk membuat garis, silahkan sesuaikan ukuran dengan mengganti 2px
Kode box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3)} untuk menghasilkan tampilan bayangan atau shadow.
Ini hanya berlaku untuk template median UI 1.6, jika menggunakan template yang berbeda silahkan disesuaikan dan cari kode yang sama.