Foros del Web » Creando para Internet » CSS »

Parpadeo Blanco

Estas en el tema de Parpadeo Blanco en el foro de CSS en Foros del Web. Hola amigos tengo un problema que me viene molestando de hace rato, me parpadea el hover, parpadea en color blanco pero solo sucede una vez ...
  #1 (permalink)  
Antiguo 30/09/2010, 16:52
Avatar de christianphp  
Fecha de Ingreso: mayo-2010
Ubicación: Rosario
Mensajes: 79
Antigüedad: 7 años, 7 meses
Puntos: 2
Exclamación Parpadeo Blanco

Hola amigos tengo un problema que me viene molestando de hace rato, me parpadea el hover, parpadea en color blanco pero solo sucede una vez al cargar por primera vez la página...

Despues queda bien es como que no me reconoce al principio que tiene una imagen hover y me sale un color blanco y luego si funciona bien quiero arreglar esto.

El CSS esta puesto en un campo tipo LOGIN

Código:
}  
.inputadmin {
    border: none;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    color: #FF6600;
    padding: 2px 3px;
    background-image: url(mensd/admin1.png);
    width: 254px;
    height: 63px;
}
.inputadmin:hover {
    border: none;
    background-image: url(mensd/admin2.png);
    width: 254px;
    height: 63px;

ME PASA EN LOS 2 NAVEGADORES: FIREFOX E IE 7

Si a alguno le pasò y me puede dar una mano agradeceria

SALUDOS Y GRACIAS DE ANTEMANO !
  #2 (permalink)  
Antiguo 30/09/2010, 17:36
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Parpadeo Blanco

esto te pasa porque el archivo esta algo pesado y tarda en cargarlo, una posible solucion es en lugar de utilizar dos imágenes (admin1.png y admin2.png) utilizar una sola (admin.png)

por ejemplo tu boton mide 254 x 63px crea una sola imagen de 254 x 126px en la parte superior colocas la imagen admin1 y abajo admin2

y para obtener el efecto con el hover el estilo seria algo así:


Código CSS:
Ver original
  1. .inputadmin {
  2.     border: none;
  3.     font-size: 14px;
  4.     font-style: normal;
  5.     font-weight: bold;
  6.     color: #FF6600;
  7.     padding: 2px 3px;
  8.     background: url(mensd/admin.png);
  9.     width: 254px;
  10.     height: 63px;
  11. }
  12. .inputadmin:hover {
  13.     border: none;
  14.     background: url(mensd/admin.png) 0 -63px;
  15.     width: 254px;
  16.     height: 63px;
  17. }
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 06/10/2010, 21:25
Avatar de christianphp  
Fecha de Ingreso: mayo-2010
Ubicación: Rosario
Mensajes: 79
Antigüedad: 7 años, 7 meses
Puntos: 2
Exclamación Respuesta: Parpadeo Blanco

No me funciona pongo ms código .

este es el input:

<input name="password" type="password" class="input2" id="password" "style="border:none" />


Código:
}  
.input {
    border: 0px;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    color: #FF6600;
    padding:2px 32px;
    background-image: url(mensd/botonlogin.png);
    background-repeat: no-repeat;
    width: 75px;
    height: 22px;
}
.input:hover {
    border: 0px;
    background-image: url(mensd/botonlogin2.png);
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    width: 75px;
    height: 22px;
}
Con los demas CSS botones con imagenes no me pasa el problema: ejemplo que me funciona bien, ese es con ID.

<div id="lista" align="center">
INICIO
</div>

Y el CSS:

Código:
#lista {
    width: 257px;
    display: block;
    font-style: normal;
    font-size: 14px;
    font-weight: bold;
    line-height: 1px;
    color: #CCCCCC;
    text-align: center;
}
#lista a{
    width: 200px;
    height: 32px;
    font-style: normal;
    font-size: 14px;
    font-weight: bold;
    line-height: 31px;
    color: #CCCCCC;
    text-align: left;
    outline-style:none;
    display: block;
    list-style-type: none;
    text-decoration:none;
    background-image:url(mensd/boto1.png);
    background-repeat: no-repeat;
    padding-left: 41px;
    padding-right: 12px;
}
#lista a:hover{
    font-style: normal;
    font-family:Verdana,Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bolder;
    color: #006699;
    background-image: url(mensd/boto2.png);
}
Hay alguna manera de poner un a:hover al otro CSS, me aprece que ahí está el problema aunque tengo muchas dudas y ya hace meses vengo con lo mismo y no encuentro solución

Espero alguna ayuda gracias de antemano por su tiempo

Última edición por christianphp; 06/10/2010 a las 21:31
  #4 (permalink)  
Antiguo 06/10/2010, 21:46
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Parpadeo Blanco

has oido de las precargas de imagenes ??

Solo debes poner un pequeño codigo javascript, asi de esta manera cuando se active el hover, ya este cargada la imagen y no parpadee como dices.

Tu codigo seria algo asi:
Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. imagen = new Image();
  3. imagen.src = "mensd/botonlogin2.png"; //la ruta de la imagen que quieres pre cargar.
  4. </script>

Suerte
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #5 (permalink)  
Antiguo 06/10/2010, 22:32
Avatar de christianphp  
Fecha de Ingreso: mayo-2010
Ubicación: Rosario
Mensajes: 79
Antigüedad: 7 años, 7 meses
Puntos: 2
Exclamación Respuesta: Parpadeo Blanco

Perdon mas arriba tengo un error:

<input name="password" type="password" class="input2" id="password" "style="border:none" />

en vez de input2 es input así:

<input name="password" type="password" class="input" id="password" "style="border:none" />

Sigo con el problema, gracias por tu ayuda Master, pero esto me tiene loco !

El problema es al pasar por primera vez, el mouse por encima hay algun truco para que no pase esto, por ejemplo acá también me lo hace.

<div id="soclist" align="center"> <a href="https://twitter.com/website" target="_blank"></a> </div></td>
<td width="33" valign="top"><div align="center"></div>



Y el CSS:

Código:
#soclist {
    width: 32px;
    display: block;
    font-style: normal;
    font-size: 14px;
    font-weight: bold;
    line-height: 1px;
    color: #CCCCCC;
    text-align: center;
}
#soclist a{
    width: 32px;
    height: 32px;
    line-height: 31px;
    color: #CCCCCC;
    text-align: left;
    outline-style:none;
    display: block;
    list-style-type: none;
    text-decoration:none;
    background-image:url(socials/stwitter1.png);
    background-repeat: no-repeat;
    padding-left: 4px;
    padding-right: 1px;
}
#soclist a:hover{
    background-image: url(socials/stwitter2.png);
}
Ya no se que hacer me digeron antes que es por el peso, pero dendo está este es de solo 4 kb alguna otra sugerencia, gracias de antemano
  #6 (permalink)  
Antiguo 06/10/2010, 22:35
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Parpadeo Blanco

Pero no me respondiste si usaste el codigo que te pase o no

El codigo que te pase funciona muy bien y solo debes reemplazar la ruta de la imagen por aquella imagen que quieres precargar.

Comenta ^^
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #7 (permalink)  
Antiguo 06/10/2010, 22:36
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Parpadeo Blanco

Snple usa sprites -.- aprovechandote de la propiedad background position, lee algo al respecto podría ser por ejemplo:

#boton{
background-position: left top;
}

#boton:hover{
background-position: left bottom;
}
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #8 (permalink)  
Antiguo 06/10/2010, 23:20
Avatar de christianphp  
Fecha de Ingreso: mayo-2010
Ubicación: Rosario
Mensajes: 79
Antigüedad: 7 años, 7 meses
Puntos: 2
De acuerdo Respuesta: Parpadeo Blanco

Muchisimas Gracias delvenjha , Master había probado el codigo pero mal

Ahora me funciona muy bien , con los scrips precargando imágenes, ahora bien a que se podría deber esto?

Pienso que por hacer el sitio medio pesado pero no lo está tanto, buee masomenos...

Hay algun límite de peso para los CSS ? al principio tenía el Styles principal de la web a 35 Kb, les parece pesado para un CSS?

Bueno gracias por las recomendaciones y he solucionado el problema con la precarga de imágenes !

Muchisimas gracias !
  #9 (permalink)  
Antiguo 07/10/2010, 00:37
 
Fecha de Ingreso: julio-2008
Ubicación: Córdoba, Argentina
Mensajes: 266
Antigüedad: 9 años, 4 meses
Puntos: 26
Respuesta: Parpadeo Blanco

Yo creo que 35 KB es bastante para un CSS, el más grande que tengo yo no llega ni a 7 KB. ¿Probaste alguna herramienta como Clean CSS? Te dejo el link: http://www.cleancss.com/
Si buscas "optimize css", "clean css" y demás en Google hallarás más herramientas de ese tipo que te ayudan a comprimir las hojas de estilo, no sólo quitando espacios innecearios, sino también para encontrar formas abreviadas de escribir los parámetros (colores, estilo de fuente...) o formatos repetidos..
Saludos.
  #10 (permalink)  
Antiguo 07/10/2010, 09:57
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Parpadeo Blanco

La precarga de imágenes es una mala praxis, pq tendrías que estar precargando todas las imágenes que quieres poner.

Usa Sprites y te irá mucho mejor.

Saludos
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #11 (permalink)  
Antiguo 10/10/2010, 03:32
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Parpadeo Blanco

Hola:

Cita:
Iniciado por Dalvenjha Ver Mensaje
Usa Sprites y te irá mucho mejor.
Totalmente de acuerdo, además sobrecargas menos el código.

Saludos.


Etiquetas: blanco, parpadeo
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 09:47.