Nome:
Local: Rio de Janeiro, RJ, Brazil

Que perguntinha hein?! Mas vamos lá, adoro estudar assuntos relacionados à web, sempre que posso aprendo uma tecnologia, técnica ou linguagem nova. Tento sempre ver quais são as tendências e acompanha-las, enfim eu sou um eterno aprendiz. Deixando o lado profissional, entrando no lado pessoal, sou uma pessoa super gente-boa (pelo menos eu me acho. rs), adoro curtir a night, sair com os amigos, fazer novas amizades e viajar (tem coisa melhor do que isso?) Acho que você já está sabendo demais sobre mim. Fuiii...

sábado, 5 de abril de 2008

Nao propagar a opacidade aos elementos filhos

Após um longo tempo, aqui estou eu.

Você provavelmente já fez uso da propriedade de opacidade (filter, opacity, -moz-opacity), portanto sabe que todos os elementos filhos do qual você adicionou opacity, herdam o valor dessa propriedade, pois bem outro dia estava desenvolvendo e não queria que o valor da opacidade fosse herdado para os seus filhos, fui ao oráculo (leia-se: google), para tentar resolver esse problema pelo css, pesquisei um pouco e nada encontrei, pelo que pesquisei não é possível impedir essa hereditariedade. Como não tinha muito tempo fiz um script para resolver o problema, é o script que está logo abaixo, porém se você sabe uma forma de impedir essa hereditariedade a dica será muito bem-vinda, pois o código foi a maneira mais prática que encontrei.

Código:

function fundoTransparente ( node, trans, props ){
/**
* Criado por Ramon
* www.coisasdeweb.blogspot.com
**/
node = ( typeof(node) == "string" ) ? document.getElementById( node ) : node; //Se veio apenas o id, pegarei o nó
var newNode = node.cloneNode(false); //Macaco de imitação
var opacity = node.style.opacity; //Grau de opacidade
opacity = opacity || node.style.MozOpacity || 1; //Grau de opacidade
trans = trans || opacity*100; //Transparência que eu quero
with (newNode.style) { //Configurando o nó
filter = "alpha(opacity=" + trans + ")";
MozOpacity = trans / 100;
opacity = trans / 100;
position = "absolute";
top = 0 + "px";
left = 0 + "px";
}

newNode.id += "bg"; //Modifico o id do clonado, para id + bg

node.appendChild( newNode ); //Vamos pra árvore DOM.
node.style.opacity = 1;
node.style.MozOpacity = 1;
node.style.background = "none";

if ( typeof(props) == "undefined" ) return;

for (var i in props){
node.style[ props[i] ] = "none"; //Propriedades recebem o valor none
}
}


A função é bem simples, recebe 3 parâmetros:

  • Nó ou id, vc escolhe.

  • Transparência que você quer (escala de 0 à 100). Opcional

  • Propriedades (tipo array) que receberão valor none, para o elemento que têm o alpha possa dar o efeito esperado. Por padrão, o background recebe none (para dar o efeito de opacidade).



Para utiliza-lá, basta fazer a chamada dessa forma:


fundoTransparente("fundo", 40); //Id

//Ou

fundoTransparente(document.getElementById('fundo'), 40); //Elemento


O segundo parâmetro referente ao grau de opacidade, funciona da seguinte forma:

  • Se você não passá-lo, a função vai procurar no css do elemento se a propriedade opacity possui algum valor, se possuir esse vai ser o grau de opacidade ( se estiver usando o FF, a função também consegue pegar o valor de –moz-opacity)


  • Se passar o parâmetro, é o valor que prevalecerá sobre os demais.


Espero que gostem, pois para mim está sendo bem útil essa função, agora com uma linha no javascript, não tenho mais problemas de opacidade ser herdada.

Fuiii...

Marcadores: , ,

2 Comentários:

Blogger Micox - Náiron J. C. G. disse...

CAra, e isso tá funcionando no FF??
Testa com uma transparencia forte aí pra ver se tá realmente funfando no FF (que é onde dá mais problemas).
Pelo que eu entendi do seu script você apenas tira a propriedade da opacidade dos filhos e funfa, ENTÃO, seria mais fácil fazer isto:
#elemento * { opacity: none }

não?
té.

7 de abril de 2008 08:30  
Blogger ramon disse...

Está funcionando no FF e pelos testes que eu fiz, quem dá problema é o IEca, pois é nele que os filhos herdam o valor dessa propriedade, no FF não.

No código, na verdade eu não tiro a propriedade de opacidade dos filhos, porque essa propriedade foi herdada do pai e, pelo que eu saiba, não dá para cancelar a propagação do valor dessa propriedade (no IEca).

No código duplico o elemento pai que têm as propriedades alphas e este não terá filhos, para que o filtro fique restrito nele.

Eu testei essa regra css, mas não funcionou.

Ps: Gostaria de uma regra css para isso também, porém não encontrei, então foi assim que resolvi.

7 de abril de 2008 09:27  

Postar um comentário

Assinar Postar comentários [Atom]

<< Página inicial