Transparências sem PNG (e caixa de diálogo modal)

Muitas vezes vi artigos e posts afirmando que é impossível se ter transparêcia com compatibilidade para diversos navegadores utilizando somente CSS, mas isto não é verdade. É possivel sim conseguir transparencia sem o uso de imagens.

Supondo que queremos um DIV semi-transparente (50% opaco), podemos criar um código de estilo (css):

.transparente {

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50) !important;
opacity: .5;
-moz-opacity: .5;
-khtml-opacity: .5;

}

e usá-lo em um DIV com class="transparente".

Entretanto, tudo que você colocar dentro deste DIV ficará com esta transparência. Mesmo que você coloque dentro do DIV transparente um DIV com os filtros setados para 100% da opacidade, os elementos dentro deste DIV opaco continuarão transparentes.

Então como colocar elementos opacos dentro de um DIV com transparência feita por este método? Não coloca dentro. Coloque na frente!

Isso acarreta que os elementos sólidos não estarão dentro do código do DIV transparente, mas em outro DIV posicionado à frente. Você consegue fazer isso setando a propriedade position para absolute e posicionando o DIV opaco na frente do transparente usando as propriedades top e left (Também é sensato neste caso fazer o mesmo com o DIV transparente).

Ok, se a transparência for ocupar somente parte da tela e você precisar de elementos sólidos dentro do DIV transparente, este não é um método ideal. Mas no meu caso, eu queria construir um caixa de diálogo modal (que só permite que se use o resto do sistema após a caixa ter sido fechada).

Para tal, criei um DIV transparente e o coloquei na posição top:0px e left:0px, também com width e height iguais a 100% da página (na verdade IE requer width:103%;height:101.5% e Firefox requer width:100%;height:120% mas não me perguntem porque) e claro com display:none. Lembre-se que para o height fucionar, você deve setar o height do body para 100% também.

Então criei outro DIV (fora do DIV transparente), posicionei no meio da página e quando quero exibir o diálogo modal, seto display do DIV transparente e do sólido para block. É prudente também que você use a propriedade z-index para o DIV sólido sempre aparecer na frente do DIV transparente.

É isso. Caso você não saiba como posicionar um DIV no meio da tela independentemente da resolução do usuário é só perguntar que eu escrevo aqui minha função javascript que faz isso.

O código fica mais ou menos assim:

body {

height:100%;

}
.transparente {

position: absolute;
top:0px;
left:0px;
width:103%;
height:101.5%;
border: none;
background-color:#aaa;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50) !important;
opacity: .5;
-moz-opacity: .5;
-khtml-opacity: .5;
overflow:hidden;
display:none;
z-index: 5;

}
html>body .transparente {

width:100%;
height:120%;

}

.solido{

position: absolute;
top:0px;
left:0px;
width:102%;
height:101%;
border: none;
display:none;
z-index: 10;

}
html>body .solido{

width:100%;
height:100%;

}

Aqui vocês vêem o uso de html>body .estilo, que é um CSS hack. IE não interpreta esses códigos, então quando você precisa de estilos diferentes para o Firefox e IE isso ajuda muito.

Qualquer DIV que você colocar dentro do DIV da classe solido terá 100% de opacidade.

Parece que no código, o !important no filtro da microsoft saiu em duas linhas, mas é em uma só. Deve aparecer logo após o filtro.