Created
April 28, 2011 04:28
-
-
Save thalesfsp/945798 to your computer and use it in GitHub Desktop.
Transparência Cross-Browser
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br"> | |
<head> | |
<!-- Meta IMPORTANTE! --> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | |
<meta name="author" content="Oxylabtech Corp"> | |
<meta name="generator" content="Mac OS X Coda 1.7"> | |
<meta name="copyright" content="Oxylabtech Corp 2011"> | |
<meta http-equiv="content-language" content="pt-BR"> | |
<title>Página de Teste</title> | |
<!-- CSS --> | |
<style type="text/css"> | |
/* Opcional */ | |
p { | |
padding-top: 45px; | |
} | |
#alpha60 { | |
/* | |
Configuração opcional | |
*/ | |
position: absolute; | |
top: 100px; | |
left: 100px; | |
width: 150px; | |
height: 150px; | |
color: white; | |
text-align: center; | |
/* | |
É sempre importante ter uma cor pré-definida | |
para caso as coisas dêem errado | |
*/ | |
background: rgb(0, 0, 0); | |
/* | |
Essa é a forma de configurar a transparência. | |
Nesse caso estamos configurando a cor preta -> 0,0,0 | |
para 60% de transparência -> 0.6 | |
*/ | |
background: rgba(0, 0, 0, 0.4); | |
} | |
</style> | |
<!-- | |
As linhas abaixo são específicas para o IE do 6 até o 9 | |
A microsoft, como sempre, toda TOSCA, utiliza um formato nada | |
legal nem convencional para passar as cores e a transparência. | |
Leia mais em http://bit.ly/lkpKMh | |
--> | |
<!--[if IE]> | |
<style type="text/css"> | |
#alpha60 { | |
background: transparent; | |
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); /* IE5.5 até o 7 */ | |
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000)"; /* IE8 */ | |
zoom: 1; /* Necessário, os filtros só funcionam se tiverem layout! */ | |
} | |
</style> | |
<![endif]--> | |
</head> | |
<body> | |
<div id="alpha60"> | |
<p>Esse é um teste!</p> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment