Padrões Web e CSS – Caio J Ruman

Estava eu fazendo a estrutura de mais um e-commerce (fiz tantos e-commerce nos últimos 3 meses que virei um expert no assunto), e chegou o momento de fazer o menu.

Verifico o psd, e para minha infelicidade, vejo que a fonte não é uma fonte padrão para a web.
Começo a fazer uma lista sobre o que tentar fazer no menu. Pelo modo como estava o menu, ele parecia ser gerenciável. Então eu descartei as técnicas de background-replacement.
Sobraram duas alternativas: siFR e conversar com o cliente para mudar a fonte. Fiquei brincando por 40 min com o siFR, e a combinação site 100% com o flash do siFR não ficou boa.
Depois de perder 40 minutos nisso, eu fiz algo que deveria ter feito antes, e perguntei se o menu era gerenciável. E ele não era. Nota mental: Deixar a preguiça de segunda de manhã de lado e sempre tirar as dúvidas antes de iniciar algum projeto.

Desse modo eu comecei a recortar as imagens para fazer um background-replacement.
Após recortar e salvar todas os 10 itens do menu, percebi que faltava o estado hover deles. Como no photoshop não tinha nenhum estado hover, comecei a fazer o padrão de link, deixar o texto com text-decoration: underground. Iria salvar 2 imagens, uma para cada estado, juntar elas e trocar o estado delas no :hover com background-position. Simples.

A visão dos próximos 20 minutos de tédio que seria pegar os 10 itens do menu, deixar eles com underline, salvar as imagens novamente e depois juntar todas, desencadeou uma epifania!
Ao invés de fazer mais 10 imagens e juntá-las para o menu, eu peguei cada imagem, fiz um traço transparente embaixo de cada texto, e no :hover eu somente dei uma cor de fundo para o link. Voi-lá! E está pronto um menu com imagem e um :hover comum de text-decoration: underline.

Como algo visual vale mais que mil palavras, segue abaixo um link com exemplo!

Exemplo de um css menu, utilizando uma única imagem com detalhes transparentes e o fazendo o hover com um background-color.

Testado no IE6, IE7, Firefox, Safari e Opera, somente no windows.
O único ponto contra dessa técnica é que a imagem não pode ter mais nenhum tipo de transparência.