Efeito de transparência usando CSS

Esse post não será mais atualizado nesse blog. Para visualizar esse post em seu novo endereço, acesse:
http://milaneze.com.br/post/2009/12/27/Efeito-de-transparencia-usando-CSS.aspx


O CSS3 trás a propriedade opacity, que pode ser usada pra definir a transparência de um objeto. O único problema, como sempre, é o Internet Explorer, que nem na versão 8 usa CSS3.

Como quase 40% das pessoas usam Internet Explorer, então é preciso código para satisfazer esse navegador.

Essa página do Maujor explica sobre transparência: http://maujor.com/tutorial/transparencia.php

Usando apenas as propriedades CSS abaixo foi possível satisfazer tanto o IE (6, 7 e 8) quanto o Firefox:

opacity: 0.65;
filter: alpha(opacity=65);

Menus drop-down usando CSS e JavaScript

Esse post não será mais atualizado nesse blog. Para visualizar esse post em seu novo endereço, acesse:
http://milaneze.com.br/post/2009/12/26/Menus-drop-down-usando-CSS-e-JavaScript.aspx


Fazer um menu drop-down usando CSS não é tão difícil. O maior problema é manter a compatibilidade com o Internet Explorer 6. Isso envolve adicionar alguns hacks no código e usar JavaScript para fazer o que não é possível ser feito somente com CSS no IE6.

Algo que não é possível usar no IE6 e anteriores é a pseudo-classe hover em outros elementos além do a. Em navegadores em que isso é permitido, é possível usar hover para o elemento li, tornando bem simples criar o efeito de submenu.

Para contornar essa limitação do IE6, basta criar uma nova classe que seja usada para substituir a pseudo-classe hover. Com o JavaScript é possível atribuir essa classe a todos os elementos que já tenham uma outra classe, indicando que ali existe um submenu.

Como esse código JavaScript precisa ser usado somente em navegadores anteriores ao IE6, é possível usar comentários condicionais, que funcionam somente nos navegadores Internet Explorer para Windows. Assim, o Firefox não precisará usar esse código JavaScript, já que basta somente o CSS para rodar os efeitos do menu.

Esse tipo de código precisa ser testado em vários navegadores diferentes e sabemos que não é possível instalar duas versões diferentes do Internet Explorer numa mesma máquina. Uma saída para isso é usar uma máquina virtual, porém também existem alguns emuladores, como o MultipleIE. O grande problema dele é não funcionar em nem no Windows Vista, nem no Windows 7. Para não ter que rodar sempre uma máquina virtual, estou usando o IETester, que apesar de ter alguns bugs, tem funcionado muito bem para testes rápidos sem muito compromisso.

Faça aqui o download dos menus:

Menu horizontal

Menu vertical