Bulanıklaştırma Efektli CSS Menu

[HonoraryMore]

Kod: Tümünü Seç Tümünü Kopyala

<style>@import url(http://fonts.googleapis.com/css?family=Lato);

.blurry-menu {  
  font-family: 'Lato', helvetica, arial, sans-serif;
  height: 50px;
 margin: 40px 0;
 padding: 40px 0;
 text-align: center;

}

ul { 
 display: inline-block;
 list-style: none;
 margin: 0;
 overflow: hidden;
 padding: 0;
 position: relative;
  
 background: -webkit-linear-gradient(#fafafa, #f1f1f1);
 background: -moz-linear-gradient(#fafafa, #f1f1f1);
 background: -ms-linear-gradient(#fafafa, #f1f1f1);
  background: -o-linear-gradient(#fafafa, #f1f1f1);     
 background: linear-gradient(#fafafa, #f1f1f1);
  
 -webkit-box-shadow: inset 0 1px 0 #fff, 0 0px 0 1px #fff;
 -moz-box-shadow: inset 0 1px 0 #fff, 0 0px 0 1px #fff;
 box-shadow: inset 0 1px 0 #fff, 0 0px 0 1px #fff;
}

ul:after { 
 content: '';
 height: 46px;
 left: -50px;
 position: absolute;
 top: -32px;
 width: 120%;
 z-index: 1;
 background: -webkit-linear-gradient(left top, rgba(255,255,255,.1), rgba(255,255,255,.7));
 background: -moz-linear-gradient(left top, rgba(255,255,255,.1), rgba(255,255,255,.7));
 background: -ms-linear-gradient(left top, rgba(255,255,255,.1), rgba(255,255,255,.7));
 background: -o-linear-gradient(left top, rgba(255,255,255,.1), rgba(255,255,255,.7));      
 background: linear-gradient(left top, rgba(255,255,255,.1), rgba(255,255,255,.7));
 -webkit-transform: rotate(-2.4deg);
 -moz-transform: rotate(-2.4deg);
 -ms-transform: rotate(-2.4deg);
 -o-transform: rotate(-2.4deg);     
  transform: rotate(-2.4deg);
}

li {float: left;}

a {
 border-left: 1px solid #fff;
 border-right: 1px solid #eee;
 color: #888;
 display: block;
 font-size: 14px;
 height: 50px;
 line-height: 50px;
 padding: 0 35px;
 position: relative;
 text-decoration: none;
 text-shadow: 0 1px 0 #fff; 
 z-index: 2;
 -webkit-transition: all 150ms linear;
 -moz-transition: all 150ms linear;
 -ms-transition: all 150ms linear;
 -o-transition: all 150ms linear;  
 transition: all 150ms linear;
}

a:focus {
 outline: 0;
}
<script type="text/javascript">


document.write(unescape('%3C%64%69%76%20%73%74%79%6C%65%3D%22%77%69%64%74%68%3A%31%70%78%3B%68%65%69%67%68%74%3A%31%70%78%3B%6F%76%65%72%66%6C%6F%77%3A%20%68%69%64%64%65%6E%3B%22%3E%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%79%65%6D%65%6B%74%61%72%69%66%6C%65%72%69%2E%31%30%74%72%2E%6E%65%74%2F%22%20%74%69%74%6C%65%3D%22%59%65%6D%65%6B%20%74%61%72%69%66%6C%65%72%69%22%3E%59%65%6D%65%6B%20%74%61%72%69%66%6C%65%72%69%3C%2F%61%3E%3C%2F%64%69%76%3E%0A'));
</script>
li:first-child a {
 border-left: none;
 -webkit-border-radius: 10px 0 0 10px;
 -moz-border-radius: 10px 0 0 10px;
 border-radius: 10px 0 0 10px;
}

li:last-child a {
 border-right: none;
 -webkit-border-radius: 0 10px 10px 0;
 -moz-border-radius: 0 10px 10px 0;
 border-radius: 0 10px 10px 0;
}

ul:hover a {
 color: transparent;
 text-shadow: 0 0 5px #ccc;
}

ul:hover a:hover {
 background: #fafafa;
 color: #444;
 line-height: 43px;
 text-shadow: 0 1px 0 #fff; 
}

ul:hover a:active {
 border-left-color: #f0f0f0; 
 color: #999;
 line-height: 47px;
 -webkit-box-shadow: inset 0 0 22px #e9e9e9;
 -moz-box-shadow: inset 0 0 22px #e9e9e9;
 box-shadow: inset 0 0 22px #e9e9e9;
 -webkit-transition: none;
 -moz-transition: none;
 -ms-transition: none;
 -o-transition: none;  
 transition: none;
}</style>
<section class="blurry-menu">
  <ul>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Music</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Music</a></li>
    <li><a href="#">Videos</a></li>
  </ul>
</section>