Efeito de Neon com CSS [Javascript]

Efeito de Neon com CSS

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

[ Hits: 17.634 ]

Download menu_neon.html

0 0

Denuncie Favoritos Indicar

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

Mudando o layout dinamicamente

Botão voltar e avançar

Escolha a cor de fundo

Redireciona a página de acordo com a Resolução

Display animado

Comentários

Nenhum comentário foi encontrado.