Navbar đơn giản với hiệu ứng Blur

Simple Navbar with Blur Effect

Một thanh điều hướng khác với hiệu ứng làm mờ, Hy vọng bạn thích nó ^^

Navbar đơn giản với hiệu ứng Blur

Bước 1: Vào Mẫu >> Chỉnh sửa HTML chèn đoạn CSS sau trước thẻ ]]></b:skin>

 #nav {
float:left;
width:100%;
overflow:hidden;
background: -moz-linear-gradient(top, #25272C 0%, black 99%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25272C), color-stop(99%,black));
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25272C), color-stop(99%,black));}
#nav li{
float:left;
display:inline;
list-style:none;
line-height:13px;
margin-right:1px;
color:#ddd;}
#nav ul:hover, #nav li a {color: transparent;text-shadow: 0px 0px 3px white;}
#nav li a:hover, #nav li a.selected{
color:#fff;}
#nav li a {
float:left;
font-size:16px;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-decoration:none;
text-shadow: 0px 0px 1px white;
padding:15px 15px 25px 15px;
-webkit-transition: all 0.5s ease-in-out;}
#nav li a span{
font-size:11px;
letter-spacing:2px;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-shadow: 0px 0px 2px white;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;}
#nav li a:hover span, #nav li a.selected span{
color:#9E1C16;
text-shadow: 0px 0px 2px #9E1C16;} 

Bước 2: Chèn HTML sau vào vị trí mà bạn muốn menu hiển thị

 <div id='nav'>
<ul>
<li><a href='http://#'>IRIS TIPS<br/><span>Home</span></a></li> 
<li><a href='http://#'>BRUSHER<br/><span>PHOTOSHOP</span></a></li> 
<li><a href='http://#'>ANIME TEMPLATE<br/><span>Blogger</span></a></li>
<li><a href='http://#'>VIDEO<br/><span>NarutoShippuden</span></a></li>
<li><a href='http://#'>VIDEO<br/><span>Bleach</span></a></li>
<li><a href='http://#'>SOUNDTRACK<br/><span>Anime Music</span></a></li>
<li><a href='http://#'>J-Music<br/><span>Japan Music</span></a></li>
<li><a href='http://#'>K-Music<br/><span>Korean Music</span></a></li>
</ul>
</div> 

• DEMO

Chúc bạn thành công!

Created by Johanes/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm