MenusLesson 36Preview gratis
Navbar on Image
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini mengulas pembuatan Bilah Navigasi Transparan di Atas Gambar Latar (Navbar on Image / Hero Navbar). Pola desain visual yang memukau ini menempatkan bilah navigasi dengan latar belakang transparan atau semi-transparan mengambang persis di atas gambar hero banner layar penuh.
Poin kunci
- Gambar latar dipasang pada kontainer hero menggunakan background-image, background-size: cover
- Navbar diberi properti position: absolute; top: 0; width: 100%
- Warna latar navbar disetel transparan (background: transparent atau rgba semi-transparan)
- Warna teks tautan dibuat kontras (putih bersih) agar mudah terbaca di atas gambar
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.