Foros del Web » Creando para Internet » CSS »

Efecto oscurecido sólo con CSS

Estas en el tema de Efecto oscurecido sólo con CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/01/2007, 03:07
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Efecto oscurecido sólo con CSS

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.

Última edición por Mikmoro; 14/11/2008 a las 17:14
  #2 (permalink)  
Antiguo 18/01/2007, 03:22
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: Efecto oscurecido sólo con CSS

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?
  #3 (permalink)  
Antiguo 18/01/2007, 04:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Efecto oscurecido sólo con CSS

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.
  #4 (permalink)  
Antiguo 18/01/2007, 05:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Efecto oscurecido sólo con CSS

Otro ejemplo hecho para Firefox:

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

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

Mikel.

Última edición por Mikmoro; 14/11/2008 a las 17:14
  #5 (permalink)  
Antiguo 18/01/2007, 07:18
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.021
Antigüedad: 13 años, 6 meses
Puntos: 832
Re: Efecto oscurecido sólo con CSS

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

Saludos.

Última edición por metacortex; 19/01/2007 a las 06:31 Razón: Corregir error ortográfico
  #6 (permalink)  
Antiguo 19/01/2007, 02:09
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: Efecto oscurecido sólo con CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
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
  #7 (permalink)  
Antiguo 19/01/2007, 03:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Efecto oscurecido sólo con CSS

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.
  #8 (permalink)  
Antiguo 19/01/2007, 08:54
 
Fecha de Ingreso: octubre-2006
Ubicación: Quart de Poblet, Valencia
Mensajes: 767
Antigüedad: 11 años, 1 mes
Puntos: 8
Re: Efecto oscurecido sólo con CSS

Muy bueno el efecto, enhorabuena ;)

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

Saludos!!
  #9 (permalink)  
Antiguo 19/01/2007, 19:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Efecto oscurecido sólo con CSS

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.
  #10 (permalink)  
Antiguo 03/04/2008, 13:16
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Re: Efecto oscurecido sólo con CSS

¿Quitaron la página?

Me parecio atrayente el tema, pero ya no veo nada. ¿Dónde puedo ver dicho efecto y código?
  #11 (permalink)  
Antiguo 03/04/2008, 13:35
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Efecto oscurecido sólo con CSS

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

Mikel.
  #12 (permalink)  
Antiguo 03/04/2008, 16:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Efecto oscurecido sólo con CSS

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.
  #13 (permalink)  
Antiguo 04/04/2008, 10:31
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Re: Efecto oscurecido sólo con CSS

¡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!
  #14 (permalink)  
Antiguo 11/02/2009, 08:00
 
Fecha de Ingreso: mayo-2008
Ubicación: Caracas
Mensajes: 33
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Efecto oscurecido sólo con CSS

Me parece excelente el efecto :)
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:24.