Pequenas Dúvidas

  • HTML
  • CSS
  • JS
  • PHP
  • MySQL
  • Marketing Digital
  • Photoshop

CSS opacidade (transparência) em qualquer navegador, como fazer?

Outro recurso muito interessante que chegou “as mãos” dos desenvolvedores é a possibilidade de deixar um elemento com certa transparência para dar um “ar” de desenvolvimento moderno.

Lembrando que esse é um recurso do CSS3 que está em desenvolvimento e por isso alguns navegadores podem não funcionar corretamente.

IMPORTANTE: ao aplicar a transparência em um elemento, tudo o que estiver “dentro” desse elemento também será afetado pelo eleito.

Bom, vamos lá:

A sintaxe para opacidade é intuitiva, porém deve se observar um detalhe, acompanhe abaixo:

opacity: 0.5;

Onde 0.5 significam 50%, ou seja, os valores podem ser 0 (0%) até 1 (100%), simples, não? Mas (e quando tem um, prepare-se) alguns navegadores ainda não interpretam corretamente apenas essa propriedade, dessa forma é necessários utilizar alguns hacks para garantir que funciona em um numero maior de (versões de) navegadores.

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Transparências</title>
</head>
<body>
    <div id="transp">

    </div><!-- #transp -->
</body>
</html>

CSS:

<style type="text/css">
#transp {
	width: 350px;
	height: 100px;
	display: block;
	background-color: #000;

	/* PARA FUNCIONAR EM INTERNET EXPLORER 8 E 9 */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

	/* CERTIFICAR QUE FUNCIONE EM OUTRAS VERSÕES DO INTERNET EXPLORER */
	filter: alpha(opacity=50);

	/* VERSÕES ANTIGA DO MOZILLA FIREFOX */
	-moz-opacity:0.5;

	/* SAFARI/OPERA */
	-khtml-opacity: 0.5;

	opacity: 0.5;
}
</style>

Resultado:

Opacidaed (transparência) com CSS3Como é possível observar no resultado, a cor de fundo preta ficou com uma transparência de 50%.

 

 

 

 

Também funciona em imagens, acompanhe o exemplo abaixo:

Transparência com imagem

 

 

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Transparências</title>
</head>
<body>
	<img src="lighthouse.jpg" title="exemplo sem transparência" alt="exemplo sem transparência" />
    <img id="transp" src="lighthouse.jpg" title="exemplo com transparência" alt="exemplo com transparência" />
</body>
</html>

CSS:

<style type="text/css">
img {
	float: left;
	display: block;
	margin-right: 10px;	
}
#transp {
	/* PARA FUNCIONAR EM INTERNET EXPLORER 8 E 9 */		
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

	/* CERTIFICAR QUE FUNCIONE EM OUTRAS VERSÕES DO INTERNET EXPLORER */
	filter: alpha(opacity=50);
	
	/* VERSÕES ANTIGA DO MOZILLA FIREFOX */
	-moz-opacity:0.5;
	
	/* SAFARI/OPERA */
	-khtml-opacity: 0.5;
    
	
	opacity: 0.5;	
}
</style>

Dúvidas nos comentários e até a próxima.

jan 26, 2015Rodrigo Sarri
CSS Borda arredondada, como utilizar?CSS plano de fundo (background), quais são as diferenças e como usar?

Deixe uma resposta Cancelar resposta

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

6 years ago Sem categoriacss, css3, opacity, transparência com css3
Posts recentes
  • Como abrir arquivos php no navegador? 21 de dezembro de 2015
  • Utilizando o F12, a ferramenta do desenvolvedor 7 de dezembro de 2015
  • Como recortar qualquer imagem usando a ferramenta caneta do Photoshop 3 de dezembro de 2015
  • Enviar dados de um formulário sem atualizar a página com JQUERY (ajax) 7 de abril de 2015
  • Separar as palavras de uma frase em PHP 9 de fevereiro de 2015
Categorias
  • Adobe Dreamweaver
  • CSS
  • Dicas
  • facebook
  • HTML
  • JQUERY
  • JS
  • Marketing Digital
  • MySQL
  • Photoshop
  • PHP
  • Sem categoria
Nuvem de tags
phpcssjqueryhtmljavascriptcss3inlinematrizlayoutfacebookfan pagedimensõesstyleimagensremover espaço em brancoclassdreamweaveradobetruqesdicaclasseidpáginacadastrar site no googleimplodeadicionar item de segurança banco de dadosvalidar emailarrayrandacertar horahorário de verãofuso horáriogerar número aleatóriovalidar campos phpmysqlsitemapcomo cadastrar site no buscadorcadastrar site no bingcadastrar site no yahoositemap para videossitemap para imagenscadastro no banco de dados phpsitemap para smartphonesitemap para googlecomo construir um sitemap
Outras postagens
PHP função rand
Como gerar um número aleatório em php?
6 years ago
Como recortar qualquer imagem usando a ferramenta caneta do Photoshop
5 years ago
Validando campos de um formulário com a Jquey e a biblioteca validate.
6 years ago
Buscar
2018 © Pequenas Dúvidas - Aprenda um pouco de HTML CSS JS PHP MySQL e Marketing Digital