Foros del Web » Creando para Internet » CSS »

Como hacer el siguiente Efecto

Estas en el tema de Como hacer el siguiente Efecto en el foro de CSS en Foros del Web. Hola amigos del foro, he visto que en determinadas web, al pasar el mouse sobre una imagen se torna en blanco y negro, y no ...
  #1 (permalink)  
Antiguo 23/05/2008, 00:12
 
Fecha de Ingreso: mayo-2008
Mensajes: 112
Antigüedad: 9 años, 6 meses
Puntos: 1
Pregunta Como hacer el siguiente Efecto

Hola amigos del foro,
he visto que en determinadas web, al pasar el mouse sobre una imagen se torna en blanco y negro, y no es un rollover ya qe carga inmediatamente

A ver si saben

Muchas gracias
  #2 (permalink)  
Antiguo 23/05/2008, 00:26
Avatar de uokesita  
Fecha de Ingreso: enero-2008
Ubicación: Maracaibo
Mensajes: 214
Antigüedad: 9 años, 11 meses
Puntos: 17
Respuesta: Como hacer el siguiente Efecto

Sera con Flash?
  #3 (permalink)  
Antiguo 23/05/2008, 09:13
 
Fecha de Ingreso: mayo-2008
Mensajes: 112
Antigüedad: 9 años, 6 meses
Puntos: 1
Respuesta: Como hacer el siguiente Efecto

Nono no es flash, es algun javascript pero no lo conosco :s.
  #4 (permalink)  
Antiguo 23/05/2008, 09:55
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
Respuesta: Como hacer el siguiente Efecto

¿Tienes link a una de estas páginas? Suena muy interesante de averiguar...
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #5 (permalink)  
Antiguo 23/05/2008, 11:59
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
Respuesta: Como hacer el siguiente Efecto

¿Te refieres a esto?

Es muy, muy sencillo, aunque es un bonito truco.

Mikel.
  #6 (permalink)  
Antiguo 23/05/2008, 12:21
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
Respuesta: Como hacer el siguiente Efecto

Veo y veo el código y no comprendo como lo haces

¿Se supone que es una sola imagen o dos? Solo veo una, y la única diferencia es que uno está en top y el otro en bottom, y en verdad no veo que es lo que hace x¬x...
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #7 (permalink)  
Antiguo 23/05/2008, 12: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
Respuesta: Como hacer el siguiente Efecto



Impaciente eres, joven Jedy, ¿no se te ha ocurrido mirar la ruta a la imagen?

http://www.araudi.net/forosdelweb/img/color_BN.jpg

Mikel.
  #8 (permalink)  
Antiguo 23/05/2008, 12:56
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
Respuesta: Como hacer el siguiente Efecto

O_O'

Vaya que ha sido una excelente solución con un muy buen efecto. Lástima que si se quiere hacer algo similar en una página con varias imagenes, se deba hacer esto para cada una. En verdad esperaba ver un sencillo código que me lo hiciera automático

Aun así, el efecto es genial, una excelente idea, y de facil implementación. Muy bueno =P
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #9 (permalink)  
Antiguo 23/05/2008, 12:59
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
Respuesta: Como hacer el siguiente Efecto

Hombre, pasar una foto de color a blanco y negro con un código css lo veo difícil, pero quién sabe.

Mikel.
  #10 (permalink)  
Antiguo 23/05/2008, 14:14
 
Fecha de Ingreso: mayo-2008
Mensajes: 112
Antigüedad: 9 años, 6 meses
Puntos: 1
Respuesta: Como hacer el siguiente Efecto

Es cierto, es ese efecto! Muy bueno
Pero como se hace? jaja
perdona necesito saberlo!
  #11 (permalink)  
Antiguo 23/05/2008, 14:20
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Como hacer el siguiente Efecto

Este tema es muy parecido al que se está tratando aquí:
http://www.forosdelweb.com/f53/duda-...und-url-589207

practicamente es el mismo truco. Pero en IE no es un poco mas lento cuando se tiene el a:hover ?? o es solamente mi visión ?
  #12 (permalink)  
Antiguo 23/05/2008, 14:23
 
Fecha de Ingreso: mayo-2008
Mensajes: 112
Antigüedad: 9 años, 6 meses
Puntos: 1
Respuesta: Como hacer el siguiente Efecto

Me parece que tardan igual.
ya que sacaron el tema de lops navegadores
aprovecho para consultar

en FIREFOX me las tablas me aparecen con una sombra gris
saben como quitarla?
  #13 (permalink)  
Antiguo 23/05/2008, 16:03
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
Respuesta: Como hacer el siguiente Efecto

Lo del efecto o puedes ver en los dos enlaces que he puesto; en el primero ves el efecto y es muy fácil del el código, y en el segundo puse el enlace a la imagen que he usado. Supongo que viendo eso te bastará para entenderlo. Si algo no te queda claro pregunta y te lo explico con más detenimiento.

Y en cuanto a lo de las tablas, puedes probar esto:

<table border="0" style="border: solid 1px #000;">

Mikel.
  #14 (permalink)  
Antiguo 23/05/2008, 16:29
 
Fecha de Ingreso: mayo-2008
Mensajes: 112
Antigüedad: 9 años, 6 meses
Puntos: 1
Respuesta: Como hacer el siguiente Efecto

Gracias Mikel!
Usaste una imagen rollover no?
  #15 (permalink)  
Antiguo 23/05/2008, 18: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
Respuesta: Como hacer el siguiente Efecto

Esto es:



Se hace la imagen duplicada en color y blanco y negro, y luego se cambia la posición del fondo.

Cuando hay un enlace, pongo que se vea de fondo la parte de arriba:

background: url(img/color_BN.jpg) no-repeat center top;

y cuando pasa el ratón (a:hover), que se ponga de fondo la parte de abajo:

background: url(img/color_BN.jpg) no-repeat center bottom;

Así de simple. Para mi que es un bonito truco, que se puede aplicar a cualqueir cosa, y tiene de bueno que carga una sola imagen, así no debe haber pérdida al pasar el ratón.

Mikel.
  #16 (permalink)  
Antiguo 23/05/2008, 18:42
 
Fecha de Ingreso: mayo-2008
Mensajes: 112
Antigüedad: 9 años, 6 meses
Puntos: 1
Respuesta: Como hacer el siguiente Efecto

No se si sere algo inexperto para esto, pero por lo que entedí, en una tabla por ejemplo, se le carga el background color, y luego al pasar el mouse que se levante el background y se vea el b/n?
:S
No me pasarias el codigo que utilizaste para realizar la demostracion del comentario #5, en el cual me mostrabas el efecto.
Disculpa es que no lo llego a entender.

Muchas gracias!
  #17 (permalink)  
Antiguo 23/05/2008, 18:47
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
Respuesta: Como hacer el siguiente Efecto

No, no es eso, qué más quisiera yo. La que ves ahí es la imagen completa que estoy usando, una imagen que está compuesta de dos partes: la foto original y pegada debajo la misma foto pero en blanco y negro.

Lo que hay que hacer es usar la foto como fondo, de manera que se vea sólo la porcion de la foto que te interesa, es decir, o la mitad superior o la mitad inferior.

Este es el código, no obstante, era muy fácil cogerlo del la propia página donde está el ejemplo (botón derecho del ratón, ver código fuente)

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>Color a blanco y negro</title>
<style type="text/css">
.caja { margin: 0px auto;
position: relative;
width: 150px;
height: 99px;
}
a { display: block;
height: 100%;
width: 100%;
background: url(img/color_BN.jpg) no-repeat center top;
}
a:hover { background: url(img/color_BN.jpg) no-repeat center bottom;
}
</style>
</head>
<body>
<div class="caja"><a href="#"></a></div>
</body>
</html>
Mikel.
  #18 (permalink)  
Antiguo 23/05/2008, 19:06
 
Fecha de Ingreso: mayo-2008
Mensajes: 112
Antigüedad: 9 años, 6 meses
Puntos: 1
Respuesta: Como hacer el siguiente Efecto

Muchas gracias Mikel :)

me gustaria mostrarte mi pagina, pero todavia no pase los 30 dias de registracion :(

sera en otra ocasion



saludos!!
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 18:41.