Como faço isso em CSS?

[angus 0]

 

Como faço esse efeito com imagens igual a esse menu?

Queria fazer esse efeito quando mudo de fase ele troca a cor mais note que a imagem não e retangular ela tem que ser duas imagensp ara gerar o efeito aqui . Obrigado!

[André Severino 3]

Acredito que uma lista não ordenada,

e dentro das <li> tenha 1 span p/ uma imagem .png e a outra ele usa de fundo da propria li, então no .hover ele apenas altera a cor de fundo... acredito que assim de certo

:thumbsup:

 

 <ul>
   <li><a href="#">Home</a> <span class="img2"></span></li>
 </ul>

[gjsalles 0]

eu tenho um exemplo aki de css usando a lista do André

 a.home
{background-position:top;	
text-indent:-9999px;
   display: block;
background-image:url(imagens/menuinfra.jpg);
height:44px;
width:164px;
float:left;
margin-left:355px;
margin-top:60px;


}

.home:hover
{background-position:bottom;	
text-indent:-9999px;
   display: block;
background-image:url(imagens/menuinfra.jpg);
height:44px;
width:164px;


}

[angus 0]

seria esta imagem que tenho que usar, como que faço o efeito dele trocar as cores usando uma unica imagem como essa?

[T.Colucci 33]

Amigo, isso se chama CSS Sprites.

 

A técnica consiste em você alterar a posição do background usando a propriedade "background".

 

Aqui vai dois link que o ajudarão melhor.

 

Link 1 (em português)

Link 2 (em inglês, mas mais completo)

 

Abraços e qualquer dúvida, volte a postar.

[André Severino 3]

background-position: 0px 20px;

background-position: 0px 40px;

etc....

 

Assim você carrega apenas 1 imagem para o menu inteiro... :thumbsup: