Css blur menu yapımı

Evet bir kaç gündür bloğumda yazı yazmayı aksatmıştım.Bugün sizlerle yeni öğrendiğim blur yöntemi ile menü yapımını göstereceğim.


Bu uygulayacağımız yöntem ile üzerine geldiğimiz link daha belirgin,diğer linkler ise soluk bir hâl alacak.İsterseniz direk kodları ve demoyu paylaşayım.

Html Kodları

<div class="menu">
  <a href="#">Anasayfa</a>
  <a href="#">Hakkımda</a>
  <a href="#">Link1</a>
  <a href="#">Link2</a>
  <a href="#">Link3</a>
  <a href="#">Link4</a>
  <a href="#">İletişim</a>
</div>

Css Kodları

.menu {
  overflow: hidden;
  background-color: #333;
  position: fixed; 
  top: 0; 
  width: 100%;
}
.menu a {
  float: left;
  font-size:1.2em;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 20px 26px;
  text-decoration: none;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s linear;
 -moz-transition: all 0.3s linear;
 -o-transition: all 0.3s linear;
 -ms-transition: all 0.3s linear;
 transition: all 0.3s linear;
}
.menu:hover a{
 text-shadow: 0px 0px 5px #fff;
 color: transparent;
 background: rgba(0,0,0,0.4);
}
.menu a:hover {
  color: #fff;
}

Sitemizdeki görünümü ise şu şekilde olacaktır. DEMO

Bu tür eklentileri beğeneceğinizi düşündüğüm için benzer yazılarıma buradan ulaşabilirsiniz.Emin olun pişman olmayacaksınız.

Bir sonraki yazımda görüşmek üzere iyi bloglar.