css con efecto fade?

[jandro lopez]

Hola a tod@s:

Intento hacer un menu con fotos pequeñas (pretendo que sean vínculos a sus respectivas fotos en mayor tamaño) y que, al hacer mouseover cambiaran el aspecto:

1. se puede hacer un efecto fade con css?
2. Si no se puede, existe algún otro efecto curioso?

Perdón por mi torpeza y muchas gracias por la ayuda

[AlvaroG]

No se puede hacer en tanto que un efecto como ese (si entendí bien) es un efecto que cambia muchas veces (cambiando el color lentamente), pero en css solo se cambia 1 vez. Necesitás Javascript para completar el efecto y que se hagan los cambios suficientes para lograr el efecto.


Saludos.

[JavierB]

Bienvenido al foro jandro lopez

Mensaje movido al foro de JavaScript desde Css.

Saludos,

[fearlex]

Si se puede pero solo en IE

http://msdn.microsoft.com/workshop/s...o/dxtidemo.htm

http://msdn2.microsoft.com/en-us/library/ms532853.aspx

[caricatos]

Hola:

Para textos se puede conseguir con el código de este mensaje: FadeOut en un talbla...

Para imágenes habría que cambiar los valores y los estilos (opacity en navegadores estándares y filter.alpha en explorer)

Saludos

[jandro lopez]

Muchas gracias por la pronta respuesta y por la ayuda (eso si es una buena bienvenida a un foro)

Ya que el efecto fade con css es complicado o se complicaría en algunos navegadores, ¿conoceis algún efecto de css sobre imágenes que quede presentable en un menú de selección?(donde las imágenes son los vínculos)

Muchísimas gracias

[fearlex]

Iniciado por jandro lopez

Muchas gracias por la pronta respuesta y por la ayuda (eso si es una buena bienvenida a un foro)

Ya que el efecto fade con css es complicado o se complicaría en algunos navegadores, ¿conoceis algún efecto de css sobre imágenes que quede presentable en un menú de selección?(donde las imágenes son los vínculos)

Muchísimas gracias

Anja, mira este link:

http://exploding-boy.com/images/EBmenus/menus.html

[caricatos]

Hola:

Efectos sencillos podrían ser cambiar algún atributo de tamaño (width/height) o si son imágenes con fondo transparente cambiárselo... otra cosa sencilla es el borde...

Saludos

[Mikmoro]

Una cosa que yo tengo puesta y me parece bastante bonita es con el opacity (filter alpha en IE, como te han dicho). En la cuadrícula, las fotos se ven muy suaves, casi tranparentes (sin exagerar) y al pasar por encima se pone la opacidad a 100% (1.0) y se ven con todos sus colores (las miniaturas). Es bonito. y encima es tan sencillo como this.ClassName, haciendo una clase con una opacidad de 0.3 (digamos) y otra con 1.0.

onmouseover="this.className='clase_a_1'"
onmouseout="this.className='clase_a_0,3'"

También está bien hacer un DynloadArea, es decir, una zona donde aparecerá cada foto real sólo con pasar por encima de la miniatura.

Mikel.

[jandro lopez]

Gracias nuevamente,

Fearlex, gracias por el link, veré si puedo adaptarlo a lo que busco (en vez de un menú como ese, serían fotos en miniatura)

Caricatos, lo del borde lo he intentado, un borde que cambiaba de color con onmouseover, pero todavía soy muy torpe en esto y no me salió. ¿funciona ese efecto en todos los navegadores?

Mikmoro, gracias por la explicación tan clara. Lo probaré. ¿que pasaría en otros navegadores? ¿simplemente estaría activo el vínculo sin cambio alguno? ¿tienes eso puesto en tu web?¿me podrías dar la dirección para ver como queda?

Me habeis ayudado un montón, ahora mismo me pongo a probar esas soluciones

[caricatos]

Hola:

Cambiar el color del borde con un script es:
<img onmouseover="this.style.borderColor = 'red'"
onmouseout="this.style.borderColor = 'blue'" style="border:1px solid blue" ... />

Para que sea visible debe tener un mínimo de 1 pixel.

Saludos

[Mikmoro]

Yo no lo tengo puesto exactamente eso mismo, pero si el mismo efecto, en lugar de con fotos con celdas y botones. No te puedo dar el enlace porque todavía no tengo el bonus de mensajes escritos aquí para hacerlo, pero sí te puedo decir que la web es de Artsaia, y si pones eso en Google saldrá la primera.
Verás que en la portada, las celdas tienen una opacidad de 0,3 y al pasar por encima se ponen a 1.0. El efecto cambia en que no le he dicho que se apaguen onMouseout (es una gracia que me pegué en el diseño), pero si entras, verás que el efecto de los botones de navegación de los menús laterales es exactamente ese, el que te puse, que sí se apagan.
También verás en la portada que al pasar por encima de cada celda con una palabra, hace aparecer un gif con la palabra encima de la tabla. Eso es muy fácil de hacer si quieres que despliegue una foto o cualquier cosa en la zona que tú quieras.
Espero que te guste. El código es claro. Si necesitas ayuda lo dices. Esa idea la obtuve de la web de dynamic drive. Cojonuda web.
Mikel.

[zacariaslavin]

estem..podes probar con un gif TODAVIA EXISTEN

#menu li a:hover {
background: url('images/IMAGEN.gif') 50% 0;
}
a veces las soluciones estan mas cerca de lo que parrecen

[caricatos]

Tema cerrado por viejo