Menu Blur

World of Tutos

Heey galera! ^^

Trouxe um tutorial bem simples de um menu muito fofo! Vi no blog HTMLuv, então créditos a ele. Chama-se Menu Blur, ou seja, quando passa o mouse nele, ele fica desfocado. Veja a preview aqui. Lindo, não é?! Confira:

→ Cole o seguinte código acima de ]]></b:skin>

/**MENU BLUR SPACE TUTORIALS **/ .menusf a {padding: 5px ; color: #fff; margin: 2px; font-family: 'Qhytsdakx'; font-size: 27px; letter-spacing: 1px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;} .menusf:hover a{ text-shadow: 0px 0px 10px #fff; color: transparent; } .menusf a:hover{text-shadow: 1px 1px 10px rgba(71,80,23,0.6); color: #402056;}
/** Fonte personalizada **/ @font-face {font-family: 'Qhytsdakx'; src: url('http://static.tumblr.com/6vl7vom/d0sm50bns/qhyts__.ttf') format('truetype'); font-weight: normal; font-style: normal;}

→ Agora, adicione um gadget HTML/JavaScript e nele cole:

<div class="menusf"> <a href="LINK">NOME</a>
<span onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('conteudo').innerHTML=document.getElementById('IDDOIFRAME').innerHTML">NOME</span></div>

Até Mais :)