Efeito de Neon com CSS

Publicado por Tiago da Silva Pimentel (última atualização em 30/11/2009)

[ Hits: 15.069 ]

Download menu_neon.html




Menu que cria um efeito de neon nas suas opções utilizando a propriedade "Text-shadow" do CSS.

Script comentado, qualquer dúvida me contate!

Espero que gostem.

  



Esconder código-fonte

<html>
   <head>
      <title>Menu Neon</title>
      <style type="text/css">
         ul{
            cursor:default;
            background-color:#000000;
            color:#FFFFFF;
            width:100px;
            font-family:tahoma;
            font-size:18px;         
            list-style-type:none;            
            }
         
         li:hover{
            color:#FFFFFF;
            text-shadow:
               0px 0px 10px #FFFFFF,
               0px 0px 10px #FFFFFF,
               0px 0px 10px #FFFFFF,
               0px 0px 10px #FFFFFF;
                  <!--
                     Acima esta a mágica, se você utilizar apenas uma linha,
                     o efeito será muito pequeno, ou seja, quanto mais linhas
                     você usar, mais forte será o efeito!
                     
                     A propriedade "TEXT-SHADOW" produz uma sombra
                     no texto a qual esta sendo usado!
                     
                     Para que serve cada atributo:
                        1º - define o deslocamento da sombra p/direira(valor +) e p/esquerda(valor -)
                        2º - define o deslocamento da sombra p/baixo(valor +) e p/cima(valor -)
                        3º - define o raio da sombra
                        4º - define a cor da sombra
                   -->
            }
      </style>
   </head>
   <body>         
      <ul>
         <li>Menu 1</li>
         <li>Menu 2</li>
         <li>Menu 3</li>
         <li>Menu 4</li>
         <li>Menu 5</li>
      </ul>
   </body>
</html>

Scripts recomendados

BARRA PERSONALIZADA

Escolha a cor de fundo

Barras

Abrir Janela exatamente no centro da tela

Efeito de Raio no Site


  

Comentários

Nenhum comentário foi encontrado.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts