Foros del Web » Creando para Internet » CSS »

CSS3 Filtro grayscale y Bordes Error en Chrome

Estas en el tema de CSS3 Filtro grayscale y Bordes Error en Chrome en el foro de CSS en Foros del Web. Mi Objetivo es lograr que se conserve el Border-Radios al Hacer Hover sobre la Imagen lo cual solo lo eh con: Firefox, safari y opera ...
  #1 (permalink)  
Antiguo 14/05/2013, 18:38
Avatar de danielugalde  
Fecha de Ingreso: marzo-2011
Ubicación: mexico
Mensajes: 45
Antigüedad: 8 años, 6 meses
Puntos: 3
Sonrisa CSS3 Filtro grayscale y Bordes Error en Chrome

Mi Objetivo es lograr que se conserve el Border-Radios al Hacer Hover sobre la Imagen lo cual solo lo eh con: Firefox, safari y opera pero el Chrome no se por que no sirve ojala me puedan ayudar aqui les dejo un link.


http://jsfiddle.net/danielugalde/EEYRf/2/


Saludos y muchas gracias.
  #2 (permalink)  
Antiguo 16/05/2013, 04:45
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 1 mes
Puntos: 2111
Respuesta: CSS3 Filtro grayscale y Bordes Error en Chrome

Es la primera noticia noticia que tengo de que aparte de WebKit haya filtros para otros motores.

Algo sumamente más fácil sería hacerlo así:

Código HTML:
Ver original
  1. <img src="http://2.bp.blogspot.com/-wi-jCCp3bHg/UXCfHyaAwoI/AAAAAAAAAKs/mtl0ke0SO2c/s1600/Personajes_Toy_Story_2.jpg">

Código CSS:
Ver original
  1. img {
  2.   width:150px;
  3.   height:150px;
  4.   border-radius: 50%;
  5.   border: 2px solid red;
  6.   -webkit-filter: grayscale(100%);
  7.   transition: all 0.5s ease-out;
  8. }
  9.  
  10. img:hover {
  11.   -webkit-filter: grayscale(0%);
  12. }

En Safari y Chrome funciona, en los demás el efecto máscara también debería pero no los filtros.

http://jsfiddle.net/EEYRf/3/
  #3 (permalink)  
Antiguo 20/05/2013, 12:51
Avatar de danielugalde  
Fecha de Ingreso: marzo-2011
Ubicación: mexico
Mensajes: 45
Antigüedad: 8 años, 6 meses
Puntos: 3
Respuesta: CSS3 Filtro grayscale y Bordes Error en Chrome

Gracias! pero aun estoy pensando una solución!

Etiquetas: blanco, border, border-radius, css3, filtros, hover, imágen, negro
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 02:34.