Membuat Menu Navigasi transparan pada Website dengan HTML dan CSS

Hallo teman-teman coders, mungkin dari kalian sudah tidak asing lagi dengan HTML dan CSS. Keduanya merupakan bahasa pemrograman untuk membuat sebuah halaman website . HTML sendiri merupakan singkatan dari "Hyper Text Markup Language" yaitu sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi pada web tersebut. Sedangkan CSS sendiri singkatan dari "Cascading Style Sheets" yaitu struktur bahasa yang menentukan penampilan konten pada sebuah website.

Nah bagi kalian yang suka dengan Desain Web, saya akan sedikit memberikan tutorial nih tentang cara mambuat Menu Navigasi transparan dengan menggunakan HTML dan CSS. Ok langsung saja.

Langkah pertama buatlah coding HTML seperti dibawah ini

Selanjutnya buatlah coding CSS seperti dibawah ini

Untuk background image kalian bisa sesuaikan sendiri. Dalam hal ini saya menggunakan background kode dengan nama file 1.png yang saya letakan di dalam folder img. Kamu bisa sesuaikan dengan kebutuhanmu.

Jika sudah membuat coding HTML dan CSS seperti yang diatas maka hasilnya akan seperti ini

Langkah selanjutnya masukan coding berikut :

opcity: 0.7;

filter:alpha(opacity=70);

 Tulis pada Bagian #nav_wrapper

Jika sudah maka hasilnya akan seperti ini

Mudah bukan!

Selamat Mencoba.