Css

Css Transparencia de elemento sem afetar filhos | transparencia css

O site http://www.css-opacity.pascal-seven.de/ faz um trabalho simples, porem muito útil. Ele escreve os elementos css para opacidade.

O recurso é ótimo, porem os filtros de opacity afetam a todos os elementos filhos. Por isso é recomenda-se o uso do seguinte estilo:

.alpha60 {
 /* Fallback for web browsers that doesn't support RGBa */
 background: rgb(0, 0, 0);
 /* RGBa with 0.6 opacity */
 background: rgba(0, 0, 0, 0.6);
}

Certamente que não funciona em ie anterior ao 9, por isso é necessário o uso de valores hexadecimais de filtros:

.alpha60 {
 /* Fallback for web browsers that doesn't support RGBa */
 background: rgb(0, 0, 0);
 /* RGBa with 0.6 opacity */
 background: rgba(0, 0, 0, 0.6);
 /* For IE 5.5 - 7*/
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
 /* For IE 8*/
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Para saber mais leia o post: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

 

Anúncios
Padrão

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s