Transparência em Css 2

KaKarotto · Novembro 16, 2008

Oi pra todo mundo. o/

Seguinte, eu havia postado há algum tempo sobre como usar transparência em css aqui.

Lembrando que eu não ensinava como usar a transparência, mas como usá-la como fundo em objetos opacos.

Depois de amadurecer um pouco mais na área de Desenvolvimento, pensei em melhorar aquela solução, já que de cara teve alguns problemas, fora que usava posição absoluta mais de uma vez, isso me dava agonia rsrs.

Pensei um pouco e cheguei na seguinte solução.

Css:

.transparente{ position:relative }
       .transparencia{
           position:absolute; 
           width:100%; 
           height:100%;                 
           z-index:-1;
           opacity:.3;
           -moz-opacity:.3;
           -khtml-opacity:.3;
       }

Css iE6:

<!--[if IE 6]>
       <style type="text/css">
       .transparencia{             
           filter:alpha(opacity=30);
           height:expression(this.parentNode.scrollHeight) 
       }        
       </style>
   <![endif]-->

Agora o elemento que terá o fundo transparente não terá mais que utilizar posições absolutas, o que é MUITO bom. :D

Utilizei comentários condicionais para o caso do iE6, já que seus comandos não são padrão e nunca serão validados, devem ser tratados como comentários, pois só o ie6 vai enxergar. Uma boa prática.

O objeto ficará em posição relativa, o que é melhor para layouts que usam posicionamento com flutuação ( o que é recomendado ), o objeto se estenderá para baixo conforme o conteúdo for maior, nenhum script é necessário, exceto para o ie6, script que foi usado no CC acima.

Há 2 classes, uma pertencerá à um objeto de tipo transparente, seu container que terá fundo transparente.

A outra classe pertencerá à um objeto auxiliar do tipo transparencia, que ficará dentro do container que terá o fundo transparente.

Vou deixar aqui um código de exemplo para quem quiser ver e um anexo para quem quiser baixar.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>::::: Transparência em Css :::::  Eduardo Ottaviani</title>
		<style type="text/css">
			/*
				Abstração de elementos com fundo transparente
				Autor: Eduardo Ottaviani
				Email: edu.tata@gmail.com
				Descrição: Você pode ver mais sobre esse código em http://scriptbrasil.com.br/forum/index.php?showtopic=128628.
			*/
			body{ 
				background: 					
					url(http://vistawallpapers.files.wordpress.com/2007/03/vista-wallpaper-vista-perspective.jpg) 
					#000 fixed no-repeat center
				}

			.transparente{ position:relative }
				.transparencia{
					position:absolute; 
					width:100%; 
					height:100%; 				
					z-index:-1;
					opacity:.3;
					-moz-opacity:.3;
					-khtml-opacity:.3;
				}

			#box{		
				margin:100px auto;
				color:white;
				font:10pt tahoma;
				line-height:1.8em;
				width:500px;
			}
				#box 
				.transparencia{ background-color:black }
				#box 
				p{ padding:50px }

		</style>



	</head>
	<body>

	<div id="box" class="transparente">
		<span class="transparencia"></span>
		<p>
			Lorem ipsum dolor amec 	Lorem ipsum dolor amec Lorem ipsum dolor amec
			Lorem ipsum dolor amec 	Lorem ipsum dolor amec Lorem ipsum dolor amec
			Lorem ipsum dolor amec 	Lorem ipsum dolor amec Lorem ipsum dolor amec
			Lorem ipsum dolor amec 	Lorem ipsum dolor amec Lorem ipsum dolor amec
			Lorem ipsum dolor amec 	Lorem ipsum dolor amec Lorem ipsum dolor amec
			Lorem ipsum dolor amec 	Lorem ipsum dolor amec Lorem ipsum dolor amec
			Lorem ipsum dolor amec 	Lorem ipsum dolor amec Lorem ipsum dolor amec
			Lorem ipsum dolor amec 	Lorem ipsum dolor amec Lorem ipsum dolor amec
		</p>		
	</div>


	</body>
</html>

[/codebox]

Abraço.

index.htm

Entrar

Transparência em Css 2

Pergunta

KaKarotto

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades