Efecto oscurecido sólo con CSS

[Mikmoro]

Hola a todos.
A ver si os gusta este efecto. Está hecho exclusivamente con CSS. El html no es muy semántico, pero no es una web real; se trataba de conseguir el efecto con css, que me llevó un buen rato.
Hay que desplazar el ratón hacia la derecha, hacia la zona negra.
Es una tontería pero igual le puede servir a alguien para algo.

http://www.araudi.net/mundo.html

Y aquí el acceso directo a la css:

http://www.araudi.net/css/mundo.css

No es nada complicado, pero cuesta un rato concebirlo. Ya diréis si os gusta.

Mikel.

[kahlito]

Hola Mikmoro, lo he visto en Opera 9.1, Firefox 2.0 y van muy bien. En Iexplorer 7 lo hace de golpe es decir que se oscurece nada más salir del mundo y no lo hace bajando poco a poco como en los otros dos.

En Iexplorer 6 no va.

Tambien he visto que tienes algunos "div" vacios pero viendo que forma parte del truco y solo para lograr el efecto lo veo muy interesante, Css cada vez me sorprende más



PD: ¿De que me sonará esa imagen?

[Mikmoro]

Vaya. Yo tengo IE 6.0.2900 y va perfectamente. Recuerdo que no es la primera vez que hay diferencias entre las distintas numeraciones del propio IE6. ¿Cuál usas?

Lo del IE7, pues no lo incluí en la hoja alternativa porque pensé que no lo necesitaría (ya que no lo podía comprobar), pero ahora veo que sí. Lo he incluído y ya se ve bien en IE7, es decir, comete exactamente los mismos errores de interpretación que IE6.

Efectivamente los divs vacíos son para el efecto. Si fuera una web real no se haría así, claro.

Se me olvidó decir que está pensado para 1024 x 768.

Gracias por comentarme los errores que hay. A mi tampoco me deja de sorprender CSS, por eso lo he hecho y puesto en conocimiento de todos; me parece interesante ir viendo posibilidades que ofrece.

Mikel.

[Mikmoro]

Otro ejemplo hecho para Firefox:

http://www.araudi.net/mundo.html

Algún día todos los navegadores serán respetuosos.

Mikel.

[metacortex]

Gracias Mikmoro. A mí me va bien en FF e IE. En Opera no funciona; tengo la v. 8.56.

Saludos.

[kahlito]

Iniciado por Mikmoro

Otro ejemplo hecho para Firefox:

http://www.menoslobos.com/mikel/forosdelweb/mundo2.html

Algún día todos los navegadores serán respetuosos.

Mikel.

En este ejemplo me va bien en todos incluso en Iexplorer 6.0.

En el anterior la versión que me fallaba era precisamente la 6.0

[Mikmoro]

Bueno, en realidad en este ejemplo tiene un pequeño fallo en IE6 en la parte inferior, pero no me voy a poner a arreglarla porque no tiene importancia, no es una web en producción, por eso decía "hecho para Firefox", y se trata de mostrar el efecto que se puede conseguir sólo con CSS.

Gracias otra vez por echarle un vistazo.

Mikel.

[T_O_N_N_Y]

Muy bueno el efecto, enhorabuena ;)

La verdad es que es increible la cantidad de cosas que se puede hacer con CSS.

Saludos!!

[Mikmoro]

Me alegro de que te guste. A mi me parece muy guapo, y casi hasta sorprendente poder hacer eso con css. Si algún día necesitas algo parecido, los archivos los dejaré ahí colgados y están a tu disposición (Copyleft )

Mikel.

[daPhyre]

¿Quitaron la página?

Me parecio atrayente el tema, pero ya no veo nada. ¿Dónde puedo ver dicho efecto y código?

[Mikmoro]

Disculpa pero es que ese dominio no era mio.
Esta noche busco los archivos, los subo a mi dominio y arreglo los enlaces.

Mikel.

[Mikmoro]

He encontrado los archivos, aunque no estoy seguro de si son la última y definitiva versión.
Era un efecto curioso de hace ya bastante tiempo. Estaba pensado para 1024 x 768, sin mayores preocupaciones, porque no era nada real:

http://www.araudi.net/mundo.html

También he encontrado otro efecto que hice hace tiempo y el link también estará roto:

http://www.araudi.net/opacidad.html

Nada, divertimentos de hace un tiempo.

Mikel.

[daPhyre]

¡Excelente! Y es justo lo que necesitaba para una página en la que comencé a trabajar hace poco. Muchas gracias por el código, en verdad efectos impresionantes!

[stravaganzza]

Me parece excelente el efecto :)