Membuat Hidangan Navigasi Transparan

Cara Membuat Menu Navigasi Transparan hanya dengan memakai properti CSS, sajian navigasi transparan dimaksudkan maka benda atau warna di balik navigasi akan terlihat dengan terang mirip warna pada backgrund Template. Warna navigasi akan terlihat mirip dengan warna pada background.

Demo   CODE

Jika ka Anda tertarik ingin memasangnya pada Blog, berikut ini langkah mudahnya :

1. Login keakun Blogger
2. Pilih template, kemudian klik Edit HTML
3. Selanjutnya Anda cari kode ]]></b:skin>
4. Kemudian Anda salin instruksi di bawah ini dan pasangkan diatasnya atau sebelumnya.

nav {
  max-width: 960px; /*image
  mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
  margin: 0 auto;
  padding: 75px 0;
}
nav ul {
  text-align: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
  width: 100%;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  padding: 20px;
  font-family: "Roboto";
  color: rgba(0, 0, 0, 0.5);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
  font-size: 25px;
  text-decoration: none;
  display: block;
}
nav ul li a:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(0, 0, 0, 0.7);
}

5. Selanjutnya Anda cari kode <div class="content-wrapper"> kemudian copy instruksi dibawah ini dan pastekan di atasnya . Apabila instruksi tidak Ada pada Template Anda, Anda cari instruksi yang hampir mirip alasannya yaitu instruksi pada setiap Template biasanyan berbeda.

<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>

6. Simpan Tempate


Semoga bermanfaat!


Sumber http://www.websiteedukasi.com/