Ir a contenido


Foto
- - - - -

Capas Semi-transparentes


  • Please log in to reply
8 replies to this topic

#1 Reboot

Reboot

    Guru del foro-chat

  • Hentais
  • PipPipPipPipPip
  • 2017 Mensajes:

Escrito 18 May 2005 - 01:45 AM

Hola chicos, os suelto aquí una dudilla de nivel. A ver si alguien lo sabe.

Resulta que para explorer conseguí en su día hacer las capas semi-transparentes con unos estilos que se pueden usar sólo en IE. El efecto queda de coña, porque no quiero que el fondo se vea totalmente y quiero que la zona que se escrollea queden sus límites visibles sin tener que recurrir a un borde.

No me importa si no es una forma directa, si tengo que meter una capa intermedia con semitransparencia con color gris, tanto me da. El tema es que no se aplicar una semitransparencia a una capa en Firefox/mozilla/ns

¿Sabéis si se puede hacer algo parecido en dichos navegadores?

PD: Y ya que estáis, ¿sabéis de alguna web tipo el MSDN de microsoft pero para los navegadores basados en Mozilla?

Thnx a todos.

#2 genizai

genizai

    Advanced Member

  • Hentais
  • PipPip
  • 514 Mensajes:

Escrito 18 May 2005 - 06:08 AM

yo ni idea tenia de esas capas, pero se escucha interesante :eins:

#3 Reboot

Reboot

    Guru del foro-chat

  • Hentais
  • PipPipPipPipPip
  • 2017 Mensajes:

Escrito 18 May 2005 - 03:22 PM

Bueno, al final, buscando, buscando, encontré una solución waltrapillas que funciona sólo con Mozilla y derivados: Poner de fondo de la capa un pixel en PNG con transparencia. Queda de puta madre.

Ahora con el Explorer se ve de culo... en fin. Seguiré indagando.

#4 Maeghith

Maeghith

    Zidane

  • FL Vintage
  • 4997 Mensajes:

Escrito 19 May 2005 - 12:16 AM

echale un ojo al código de las animaciones de esta página, busca "Animation engine" en el código, y luego revisa la parte del CSS.

Creo que usa opacity (para moz like) y filter:alpha (para ie like):

#floater {
    background: #DF9;
	border: 3px solid #999;
	color: #DF9;
    position: absolute;
	left: -99999999px;
	top: -99999999px;
	width: 1px;
    opacity: 0.5;
    filter: alpha(opacity=50);
	display: none;
}

Por lo visto, como moz no entiende filter e ie no entiende opacity, cada uno parece que ignora la que le molesta y no se pelean.
Imagen enviada
||-- navega sin temor --||-- /dev/soma --||-- flickr --||-- last.fm --||-- twitter --||
A foreign substance is introduced into our precious bodily fluids without the
knowledge of the individual, and certainly without any choice.

#5 Reboot

Reboot

    Guru del foro-chat

  • Hentais
  • PipPipPipPipPip
  • 2017 Mensajes:

Escrito 20 May 2005 - 10:46 AM

Coño qué bueno. Eso era lo que buscaba, lo del opacity.
Mil gracias Maeghith!!

#6 Reboot

Reboot

    Guru del foro-chat

  • Hentais
  • PipPipPipPipPip
  • 2017 Mensajes:

Escrito 20 May 2005 - 01:01 PM

Bueno, al final lo he conseguido hacer cargando el pixel PNG con transparencia, incluso en el explorer. El problema, que para que el explorer interprete el canal alfa de un PNG, tienes cargar la imagen con el DXImageTransform.Microsoft.AlphaImageLoader, mientras que mozilla lo carga directamente.

Al final todos los trucos del almendruco no me han funcionado y he tenido que tirar finalmente de Javascript y según que navegador uses, cargar un estilo u otro distinto, que era justo lo que no quería hacer, pero no hay más remedio, porque al igual que el FF no huele las líneas de estilo de los ImageTransforms, el IE sí que carga el background-image, jodiéndose todo.

Al final estilos y página queda algo así:
estilo:
div.contentIE { 
	position:absolute; 
	left:0px; top:0px; 
	z-index:1; 
	width: 572px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/imgs/pixel20_blanco.png',sizingMethod='scale');
	padding-right: 5px;
}

div.contentMoz { 
	position:absolute; 
	left:0px; top:0px; 
	z-index:1; 
	background-image: url(/imgs/pixel20_blanco.png);
	width: 572px;
	padding-right: 5px;
}

y luego a la hora de generar la capa:
<script>
if (navigator.appName!="Microsoft Internet Explorer") {
	document.write('<div class="contentMOZ" id="content">');
} else { 
	document.write('<div class="contentIE" id="content">');
}
</script>

No se cómo funcionará con el Opera... pero me la suda, con eso ya cubro el 95% de los navegadores.

EDIT: Una forma de escribir lo mismo, pero de manera menos radical (sin hacer el write):
<div class="contentIE" id="content">
<script>
if (navigator.appName!="Microsoft Internet Explorer") {
	document.getElementById("content").className="contentMoz";
}
</script>

Este tema ha sido editado por Reboot: 20 May 2005 - 01:27 PM


#7 Orbatos

Orbatos

    Member

  • Hentais
  • Pip
  • 224 Mensajes:

Escrito 21 May 2005 - 09:04 AM

Veo que te has "topado" con la "interpretacion de los standares" de M$.

El problema del Javascript, es que es comun a todos los navegadores EXCEPTO en el Explorer, ya que M$ cambio "por la cara" un lenguaje de script que no era suyo, sino de Sun Microsistems en otro intento de "si el estandar no es mio no vale"

Por cierto, las transparencias se pueden hacer en IE con controles Active-X, que son mas peligrosos que un mono con una metralleta en cuestiones de seguridad

#8 willem

willem

    Member

  • Hentais
  • Pip
  • 159 Mensajes:

Escrito 21 May 2005 - 09:52 AM

Sun inventó Java, no Javascript que fue inventado por Netscape:

http://es.wikipedia....wiki/Javascript

Personalmente yo no recomendaría a nadie que dedicara ni un minuto a explotar las características no estándar del IE, concretamente los filtros,
por dos razones, primera porque supuestamente IE 7 soportará mejor los estándares y segunda porque si no lo hacemos así los estándares de calidad como el CSS3 o SVG no cuajarán a pesar de llevar años ya desarrollados y haber navegadores superiores que los soportan.
Imagen enviada

#9 Reboot

Reboot

    Guru del foro-chat

  • Hentais
  • PipPipPipPipPip
  • 2017 Mensajes:

Escrito 22 May 2005 - 10:40 PM

Veo que te has "topado" con la "interpretacion de los standares" de M$.

Me topé con ella hace seis años

El problema del Javascript, es que es comun a todos los navegadores EXCEPTO en el Explorer, ya que M$ cambio "por la cara" un lenguaje de script que no era suyo, sino de Sun Microsistems en otro intento de "si el estandar no es mio no vale"

Voy a romper una lanza en favor del siempre malogrado microsoft.

En plena guerra de navegadores y cuando el W3C aún no tenía claro qué hacer con las nuevas posibilidades que se abrían en el mundo del html dinámico, MS tuvo que mover pieza antes que nadie y sacó sus movidas especiales que sólo funcionan en IE, que se resumen sobre todo en los atributos a los cuales el W3C aún no había llegado a estandarizar y la forma de llamar a los elementos de una página.

MS lanzó el IE3 con soporte para CSS1 (que NS no tenía). Sin ningún patrón predefinido crearon el intérprete de JScript que ya incluía todo el árbol estructural de atributos y funciones, cuando el NS no implementaba ni la mitad, o si lo hacía, lo hacía mal (en las últimas revisiones de la versión 3)

Por entonces W3C propuso el DOM. Y cada cual lo interpretó a su manera.

Cuando MS lanzó el IE5 era el que mayor afinidad al estandar DOM tenía. Era la época de las últimas y más lamentables revisiones de la versión 4 de NS.

Cuando NS murió y dejó libre su código para crear el proyecto mozilla se decidió coger las especificaciones DOM2 y reescribir por completo el intérprete de JS.

No es que microsoft hiciera lo que le viniera en gana. Simplemente cogió lo que había y lo superó. Con muchas creces. Prueba de ello es que NS se vino abajo.

Ahora, el problema viene con que MS ha ido escribiendo "encima" de lo que había y han mantenido todo como estaba. Incluyendo las inestabilidades para acceder al DOM con sintaxis excesivamente complejas y ciertos bugs en la interpretación de estilos que no han conseguido/querido arreglar.

En el punto en el que estamos, posiblemente MS esté reescribiendo Explorer para su tan cacareada versión 7 y posíblemente las diferencias entre navegadores lleguen a ser cero, en lo que a javascript y estilos se refieren.

Eso que dices que la interpretación de JS es igual en todos los navegadores, excepto en el IE, por tanto, es una afirmación arriesgada. De hecho, puedo afirmar que el JS que funcionaba en NS4 era 99% compatible con IE.

En cualquier caso, todos estos vaivenes a los únicos a los que putea es a los diseñadores web y a los scripters que se ven en la urgencia de convertir todo a los nuevos estandares. No a los usuarios.


Por cierto, las transparencias se pueden hacer en IE con controles Active-X, que son mas peligrosos que un mono con una metralleta en cuestiones de seguridad

<{POST_SNAPBACK}>

Ya ves en el código que lo hago, accediendo a las funciones DX. Y sí, son un boquete de seguridad brutal, pero gracias a eso tienes los antivirus gratuítos on-line.

Personalmente yo no recomendaría a nadie que dedicara ni un minuto a explotar las características no estándar del IE, concretamente los filtros,
por dos razones, primera porque supuestamente IE 7 soportará mejor los estándares y segunda porque si no lo hacemos así los estándares de calidad como el CSS3 o SVG no cuajarán a pesar de llevar años ya desarrollados y haber navegadores superiores que los soportan.

Ya tronco, pero la versión 7 se va a hacer esperar. :(
Además, para una mísera llamada a los filtros que hago en una CSS, tampoco es para tanto. Y seguramente la versión 7 tendrá soporte pleno a PNGs, con lo cual todo será más facil (al menos en lo que a mi problema se refiere :neko: ;) )

Este tema ha sido editado por Reboot: 22 May 2005 - 10:42 PM





1 usuarios están leyendo este tema

0 miembros, 1 invitados, 0 usuarios anónimos