Alpha Opacity (com efeito gradiente) + scrollbar

[olliver 0]

Boa tarde.

 

Seguinte... to finalizando um trabalho em tableless e nele tem um dropdown menu com efeito alpha opacity...

consegui fazer funcionar usando css e ficou dessa forma.

O problema é que na hora de validar o css e o xhtml no W3C ele acusa esse erro:

 

#menu_dropdown li ul __ Parse Error Opacity=70, FinishOpacity=100, Style=1, StartX=0, StartY=90, FinishX=0, FinishY=5)

#menu_dropdown li ul __ Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 0.85

usei esse código p/ dar o efeito alpha no menu... um cod. p/ o IE e outro p/ FF & MZ.

O código que to usando por enquanto é esse:

#menu_dropdown li ul {
background:#C93B0E; 
filter: alpha(Opacity=70, FinishOpacity=100, Style=1, StartX=0, StartY=90, FinishX=0, FinishY=5); /* alpha IE */
opacity: 0.85; /* alpha FF & MZ */
}

Depois fuçando nuns outros tópicos e recebendo retorno do pessoal, me indicaram o uso de JQuery pra resolver isso. Tentei usar alguma coisa do cod. que usei em CSS e altera-lo, entao ficou assim:

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
	$("#teste").load("mouseenter",function(){
	$(this).animate({opacity:0.6, finishopacity:0.3, style:1, startX:90, startY:90, finishX:10, finishY:0.10},300);
	});
	});
</script>

Com isso ae em cima, funciona só até a opacidade com valor 0.6 (em 0,3s), mas o restante ele não interpreta... ou seja, fica com opacidade homogênea, sem efeito gradiente... e outra, ele só funciona quando clica com o mouse (devido o evento mouseenter)...

 

Como resolvo isso, deixando com efeito alpha gradiente tanto pra IE qto pra outros??

 

 

Outra dúvida e parecida com essa é sobre como ocultar os scroll (x e y)... tbm consegui com css, mas não valida no W3C.

O erro que dá é esse: Property overflow-x doesn't exist in CSS level 2.1 but exists in [css3] : hidden

O código que to usando é esse:

html { 
overflow-x: hidden; 
overflow-y: hidden; 
}

Tem como fazer isso com js também?

 

Obrigado.

Rafael

[brcontainer 16]

amigo é por que isso:

filter: alpha(Opacity=70, FinishOpacity=100, Style=1, StartX=0, StartY=90, FinishX=0, FinishY=5);

não é valido pelo w3c.

Recomendo cria-lo diretamente em javascript, assim o w3c não VERÁ ele.

[olliver 0]

exatamente isso que to querendo Silverfox...

so que nao sei qual o comando pra fazer em js.

 

Sabe como faz?

 

Obrigado

[brcontainer 16]

seria assim, mas tem que aplicar ao script.

document.getElementById("teste").style.filter="Alpha(Opacity=70, FinishOpacity=100, Style=1, StartX=0, StartY=90, FinishX=0, FinishY=5);";

não sei se no jquery isso funciona, mas testa assim:

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
	document.getElementById("teste").style.filter="Alpha(Opacity=70, FinishOpacity=100, Style=1, StartX=0, StartY=90, FinishX=0, FinishY=5);";
	$("#teste").load("mouseenter",function(){
	$(this).animate({opacity:0.6, finishopacity:0.3, style:1, startX:90, startY:90, finishX:10, finishY:0.10},300);
	});
	});
</script>

PS.: põe um link para vermos.

[olliver 0]

Valeu cara... quase lá.

funcionou o feito em jQuery, mas com uns problemas. dá uma olhada.

ele ta cortando a lista do menu (aparecem apenas os 2 primeiros itens) e também ta com essa borda preta em volta do símbolo. esses rabiscos eu coloquei na imagem de fundo pra ficar melhor pra visualizar a transparência. Outro problema é que só ta funcionando no IE7+

 

Tinha colocado um link no post anterior, mas não ficou com underline... então ficou dificil de ver. O resultado anterior (com css) tá dessa forma..

 

 

Ja alterei algumas coisas no css pra ver se acertava mas nao funcionou.

 

Obrigado pela ajuda até então.