Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Nelly

escurecer tela

Por , em Desenvolvimento frontend

Recommended Posts

Nelly    0

Nelly
Postado

Olá pessoal,

 

alguem sabe como fazer aquele efeito de escurecer a tela?

Seria igual ao efeito de quando visualizamos ums foto de uma galeria de fotos com lightboxsó que ao invés de apareceer a foto eu preciso que aparece uma div qulquer.

 

valeu!

Compartilhar este post

Link para o post
Compartilhar em outros sites

DSerma    19

DSerma
Postado

Olá pessoal,

 

alguem sabe como fazer aquele efeito de escurecer a tela?

Seria igual ao efeito de quando visualizamos ums foto de uma galeria de fotos com lightboxsó que ao invés de apareceer a foto eu preciso que aparece uma div qulquer.

 

valeu!

 

Crie uma div com o tamanho total da tela.. e o "z-index" grande.... tipo "100"....

Se quiser o efeito de "transparencia", use o "filter: alpha(opacity:50)" e o "opacity:0.5". Faça isso pelo CSS....

 

Ta compreendido ???

 

 

Abraços...

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

só um lembrete Darkdemo o opacity:0.5 é CSS3 em grande maioria os navegadores usam isso,

mas há exeções siga o seguinte:

 

Para alguns "mozillas" use -moz-opacity:0.5

e use -khtml-opacity:0.5; para Safari e Konqueror

 

;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nelly    0

Nelly
Postado

Valeu pelas respostas pessoal,

 

Eu cheguei até conseguir fazer um exemplo mais tem um bug de quando eu rolo a tela a div não acompanha.

 

O código que eu usei foi este:

 

html,body
{
   
	height: 100%;
	margin: 0px;
	padding: 0px;
}
.transparencia
{
	position: fixed !important;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 10;
	width: 100%;
	height:100%;
	opacity: 0.6;
	color: #000000;
	background-color: #E0E0E0;  
display:none;
z-index:100;  
}

*.transparencia
{
	filter: alpha(opacity = 60);
}

Valeu!

Compartilhar este post

Link para o post
Compartilhar em outros sites

donato    0

donato
Postado

tem dois positions, possivelmente a div não acompanha porque tem um "position: fixed". deleta isso!!! abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

Cara, você pode fazer isso de duas maneiras.

 

A primeira, é a mais complicada... fazer um javascript que calcule o tamanho da pagina TODA incluindo a rolagem, e aee a div oculpa todo esse tamanho.

 

Eu fiz isso no site da empresa que trabalho.

http://www.contactonet.com.br/?cont=portifolio

 

Só você clicar em algum item do portifólio que você vai ver.

 

 

 

A outra forma é mais simples.

 

Se você parar para ver quando você define 100% de altura para uma div ela vai pegar só o seu campo de visão....

 

Ele não conta o scroll, só a area vista pelo navegador.

 

a solução é você tirar o scroll da pagina.

 

<body scroll="no">

 

E a tag body ter 100% de altura (assim o body vai oculpar todo o campo de visão do navegador, justamente o que faz a div) um overflow: auto para gerar a rolagem a partir da tag.

 

html, body {
	overflow: auto; 
	height: 100%;	
}

 

Dessa forma seu site ainda teria um scroll, mas não seria gerado pelo navegador, mas sim pela tag.

 

E na verdade o position absolute que você utilizou funcionaria como um fixed, pois o absolute se posiciona de acordo com o navegador, e como o que rola não é o navegador e sim a tag, ele via permanecer la sacou.

 

;)

 

Flw aeee cara

 

http://forum.imasters.com.br/public/style_emoticons/default/natal_happy.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito