Precargar imagenes con CSS


Una buena (y accesible) opción siqueremos evitar sobrecargar el servidor con elementos javascript es la de añadir por medio del lenguaje CSS la precarga de aquellas imágenes que necesitemos para la página, normalmente para utilizarlas como reemplazos en el hover. Podríamos añadir un código como este a nuestro archivo CSS:


a { background: url(image_hover.gif); }
a:link { background: url(image_default.gif); }
a:hover,
a:focus { background: url(image_hover.gif); }

Y ya que hablamos de imágenes y CSS otra opción muy vistosa es la de utilizar una pequeña imagen para que se muestren mientras las imágenes se van cargando en la página, como por ejemplo esta:

Loading

Para ello sólo tenemos que añadir en nuetsro archivo CSS el siguente código y añadir la clase preload a las imagenes en las que queramos dar una sensación de ‘precarga’.


img.preload {
border: 1px solid #000; /* Borde opcional, si no lo queremos basta con borrar la linea o ponerlo a cero */
background: url("/ruta_de_la_imagen/loading.gif") no-repeat center center;
}

Posted in código, cssComments (1)

Quitar los bordes automáticos al hacer clic en un enlace


Seguramente os habréis fijado que a algunos elementos al funcionar como enlace dejan un nada atractivo reborde punteado tras hacer click. Se trata de un problema que afecta sobre todo a enlaces sobre imágenes.

Para solucionar esto podemos recurrir al siguiente código en nuestra hoja de estilos css:

a {outline:0;}

Sin embargo este truco no funciona bien en Internet Explorer, por lo que para este navegador podemos especificar una regla general que deje los bordes a 0.

Via: Anieto2k

Posted in código, css, diseño webComments (1)