Ver Mensaje Individual
  #24 (permalink)  
Antiguo 06/01/2008, 05:23
furoya
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Compatibilidades.

Existen muchos efectos que usan código propietario o que no funciona en todos los navegadores. Y también hay algunas formas de reemplazar o al menos simular esos códigos para hacer un efecto compatible.
Aquí va una lista con enlaces a temas de foros como XHTML, CSS o Javascript, que contienen varios ejemplos cross-browser.


Blink ( parpadeo ).

Un clásico de Netscape.

hacer que el texto parpadee


Marquee ( desplazamiento ).

Un clásico de IExplorer. Firefox lo reconoce, pero no acepta atributos.

Etiqueta "nobr" no aceptada
Marquesina ascendente con cualquier clase de contenido!
scroll con opciones de pausar y reanudar


Cursor hand.

Hasta IE 5.5 ( y otros navegadores ) el puntero 'manecilla' se mostraba con el valor hand en vez de pointer. Aquí hay algunos métodos para mantener la compatibilidad, que pueden servir para otros cursores propietarios.

La "manito" del link
Como cambiar el puntero del raton (como la manito)sobre una celda de tabla o un texto
Detección de browsers


Fixed ( fijar objetos en desplazamientos ).

Internet Explorer -al menos hasta la versión 6- no aceptaba position : fixed. Aquí hay un par de soluciones usando capas.

Colocar imágenes en las esquinas


Conditional Comments ( Comentarios Condicionales ).

Sirven para mostrar u ocultar comentarios y código entre versiones de IE. Pero también entre IE y otros navegadores.

if else en CSS


Esquinas redondeadas (como -moz-radius-.

Generalmente se hacen con imágenes, pero aquí hay otras opciones. (Al final del mensaje)

Cómo hacer que una division con <DIV> se alargue a la misma altura que la de al lado?


Fuentes con glifos en Mozilla.

En CSS no muestra fuentes del tipo Symbol, Dingbats, Wingdings. La forma de verlas es usar HTML Transitional.

Sintaxis para fuente en Firefox. ¿Qué hago mal?


Guardar en Favorites, Bookmark, Hot-link.

El método de Mozilla es quizá el más eficiente, y el más complicado de escribir. Aquí hay un tema sobre guardar en Favoritos o Marcadores.

"Agregar a Favoritos" no funciona en Opera


Ejecutar Js desde CSS. (expression() ).

Una manera de simularlo en Opera.

help Genios de las CSS : "On mouse over" y "Oncontextemenu" en la hoja...


Función home() (ir a Inicio).

La versión HTML o JS para IE.

conocer cual es la pagina de inicio del visitante


Simulación de filtros rotation ; matrix transform y propiedades layout-flow writing-mode para rotar texto 90; 180 y 270 grados.

Más que nada, experimentos.

Rotar Texto
Texto Vertical


Simulación de filtro blur.

Probado en Firefox.

Efecto borroso o nublado o desenfocado, sin filter blur.


Simulación de filtro wave.

Probado en Firefox y otro también en Opera.

Efecto "En agua" no arranca.
Voltear texto verticalmente en Firefox ( sin filter : flipV(); flipH() )


Filtro alpha(type=) ; gradient.

Formas de simularlos tipos y otras variables del filtro con la propiedad opacity. También para crear capas de color degradadas.

Opacidad degradada en Firefox ( como alpha (type=) ).
Fondo degradado
degradacion de color


Color degradado en caracteres ( gradient ).

Gradiente simulado con capas.

Voltear texto verticalmente en Firefox ( sin filter : flipV(); flipH() )


Filtro glow ( borde de color en caracteres ).

Otro tema muy tratado, se imita con capas y hay muchas versiones.

Letras con borde de otro color
>> Este CSS no funciona en Firefox <<


Filtro shadow. ( sombra en texto ).

Una versión del anterior.

Texto con sombra


Filtro gray ( cambiar colores a "escala de grises" ).

No hay un buen método para suplir a este filtro de IE. Un comienzo podría ser

Desvanecer colores
Coloreando la pantalla al cerrar sesión


Filtro flipV() ; flipH(). ( Voltear texto o imagen )

Una simulación -muy limitada- que se ve en Firefox.

Voltear texto verticalmente en Firefox ( sin filter : flipV(); flipH() )


Filtro Stretch(stretchStyle='PUSH').

validacion css
Otro carrousel de imágenes manual. ( imagen 3D )


Fondos semitransparentes ( *.png; *.gif; filtros ).

Lo más común es usar una imagen png con canal alpha, pero IE 5.x no reconoce el cambio de opacidad y IE 6 solamente aplicando un filtro. En este tema hay un hack y varias sugerencias para ver el efecto en Internet Explorer usando HTML/CSS.

Función "opacity"
Tablas tranparentes y Contenido 100% Visible
A vueltas con la compatibilidad


Transiciones.

Una colección de alternativas a las de IE.

Entre imágenes.

Efecto desvanecer
Mostrar imágenes con efecto


Cursor animado en Firefox.

Un truco usando JS.

Cambiar el cursor del raton


Colores en la barra de desplazamiento.
Aún no está resuelto para FF, pero hay alguna compatibilidad con algunos navegadores.

Aplicar CSS la barra de scroll
Cambiar el color de la barra de desplacamietno...


Center ( alineación centrada ).

La versión propietaria de Mozilla / Firefox viejos.

Código Fuente Ayuda Urgente!!


Tabla con barra de desplazamiento..

En un tema hay un enlace a un ejemplo de tbody con scrollbar para varios navegadores. Y algunas otras sugerencias.

Inmovilizar Columnas y Filas
primera fila de una tabla
tabla con primera fila fija ?


Posición de los marcadores de lista.

Si bien no está recomendado cambiar la posición de las viñetas o bullets de cada ítem en una lista, a veces se nos hace necesario; y en IE aparecen algunos bugs que se pueden corregir así

Marcadores del liasta fuera de lugar
usando css y viñetas