Ontem, edit: Que mané ontem...faz muito tempo, desenvolvendo um layout para um dos meus projetos, me deparei com um problema clássico. Eu queria usar uma div com efeito de transparência mas com objetos opacos dentro dessa div. Mas como?
Sabemos que isso não é possível da maneira mais intuitiva, pois, ao criarmos uma div com um filtro transparente, todos os seus objetos filhos herdarão essa transparência, e não é o que eu queria.
Depois de muito procurar, não achei nenhum artigo sobre como resolver esse problema, então tive uma idéia e a desenvolvi para resolver essa questão.
E lá vai ela:
Crie 2 divs, a primeira servirá para englobar todos os elementos que você quer colocar, e a segunda servirá como o fundo transparente:
Agora, o Css. O primeiro apenas atribui a estilização padrão do div "box" como largura, posicionamento e esse tipo de coisa, sem nenhuma mágica:
div#box{
position:absolute; top:5%; left:30%;
width:120px; height:125px;
overflow:hidden; // O overflow é usado para inibir o aumento não desejado do div.
border:1px solid white;
z-index:0
}
Explicação linha por linha após o seletor "div.f-transp":
1: O div "f-transp" vai assumir uma posição absoluta, ou seja, sua posição não influirá qualquer elemento criado na div "box".
2, 3: Sua largura é definida para ocupar toda a div "box" servindo como um pseudo-fundo. É utilizado em porcentagem para o IE, e com atributo inherit (herdado) para o FF.
4: A cor foi definida para o fundo trasparente, mas é possível usar imagens para o fundo usando o atributo: background-image:url('imagem.gif')
5, 6, 7: A utilização dos filtros transparentes, o primeiro é usado para o IE, o segundo para o FF e o terceiro para navegadores com engine KHTML(Safari e Konqueror).
8: Não vou explicar né....=/
Obs: Não coloque nada dentro da div usada para o fundo, ela será usada apenas para a estilização do fundo transparente.
Bom é isso ae. Repito, eu procurei bastante para achar algum texto sobre isso embora a solução seja simples, o que me faz imaginar que alguém já deve ter feito isso. De qualquer forma, se alguém viu um artigo assim, manda o link pra mim ok? Como eu achei a solução sozinho, talvez não seja a melhor rsrsrs.
Pergunta
KaKarotto
Olá,
Ontem, edit: Que mané ontem...faz muito tempo, desenvolvendo um layout para um dos meus projetos, me deparei com um problema clássico. Eu queria usar uma div com efeito de transparência mas com objetos opacos dentro dessa div. Mas como?
Sabemos que isso não é possível da maneira mais intuitiva, pois, ao criarmos uma div com um filtro transparente, todos os seus objetos filhos herdarão essa transparência, e não é o que eu queria.
Depois de muito procurar, não achei nenhum artigo sobre como resolver esse problema, então tive uma idéia e a desenvolvi para resolver essa questão.
E lá vai ela:
Crie 2 divs, a primeira servirá para englobar todos os elementos que você quer colocar, e a segunda servirá como o fundo transparente:
O html:
Agora, o Css. O primeiro apenas atribui a estilização padrão do div "box" como largura, posicionamento e esse tipo de coisa, sem nenhuma mágica:div#box{ position:absolute; top:5%; left:30%; width:120px; height:125px; overflow:hidden; // O overflow é usado para inibir o aumento não desejado do div. border:1px solid white; z-index:0 }O segundo Css é onde acontece o truque:div.f-transp{ position:absolute; top:0; left:0; width:100%; height:100%; width:inherit; height:inherit; background:red; filter:alpha(opacity=30, finishopacity=30, style=1); opacity:.3; -moz-opacity:.3; -khtml-opacity:.3; border:none; z-index:-1 }Explicação linha por linha após o seletor "div.f-transp":
1: O div "f-transp" vai assumir uma posição absoluta, ou seja, sua posição não influirá qualquer elemento criado na div "box".
2, 3: Sua largura é definida para ocupar toda a div "box" servindo como um pseudo-fundo. É utilizado em porcentagem para o IE, e com atributo inherit (herdado) para o FF.
4: A cor foi definida para o fundo trasparente, mas é possível usar imagens para o fundo usando o atributo: background-image:url('imagem.gif')
5, 6, 7: A utilização dos filtros transparentes, o primeiro é usado para o IE, o segundo para o FF e o terceiro para navegadores com engine KHTML(Safari e Konqueror).
8: Não vou explicar né....=/
Obs: Não coloque nada dentro da div usada para o fundo, ela será usada apenas para a estilização do fundo transparente.
Bom é isso ae. Repito, eu procurei bastante para achar algum texto sobre isso embora a solução seja simples, o que me faz imaginar que alguém já deve ter feito isso. De qualquer forma, se alguém viu um artigo assim, manda o link pra mim ok? Como eu achei a solução sozinho, talvez não seja a melhor rsrsrs.
Abraços.
Edit: Pessoal, postei uma solução melhorada desta que postei sobre como usar fundo transparente com objetos opacos, aqui: http://scriptbrasil.com.br/forum/index.php?showtopic=128628
Editado por KaKarottoLink para o comentário
Compartilhar em outros sites
16 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.