Sin javascript, sin cosas raras, una manera muy simple de hacer una precarga de imágenes para, por ejemplo, los hovers de un menú.

Si bien hoy por hoy la simple carga de imágenes no es un problema, sobre todo por las velocidades de conexión que tenemos, es divertido el ejemplo.

CSS

1
2
3
4
5
6
7
8

#imgCarga{
background: url(imagenes/imagen1.jpg);
background: url(imagenes/imagen2.jpg);
background: url(imagenes/imagen3.jpg);
 
...
display: none;
}

Luego, en el html, después del tag Body, podemos agregar un div

<div id='imgCarga'></div>

Las imágenes están disponibles, ahora podemos usarlas en cualquier momento sin los tiempos de espera de carga.

Podría haber puesto un título menos interesante(como si este lo fuera), pero más de una vez tuve que hacer esto en algún que otro proyecto, porque el cliente la mayoría de las veces es gente que se quedó en 1998. Pero en fin.

Una propiedad bastante útil a la hora de manejar contenido extenso dentro de un div es la propiedad overflow. Básicamente lo que hace es agregar o no barras de desplazamiento dentro del objeto(en este caso, un div). Es decir, el control sobre desbordamiento de contenido.

Para que la propiedad funcione solo hace falta establecer las dimensiones del objeto(pueden no aplicarse, en este caso el objeto tomaría el ancho de su objeto padre-bien podría ser body)

.divContenidoExtenso{
width: 250px;
height: 200px;
overflow: auto;
}

Este sería la manera más básica de aplicar overflow. Existen otros valores muy útiles para esta propiedad.

• overflow: visible; No se muestran las barras de desplazamiento, pero deja que el contenido exceda los limites del objeto.
• overflow: auto; El valor más usado a la hora de usar esta propiedad, las barras de desplazamiento se muestran solo cuando los limites son excedidos por el contenido(y, obviamente, el contenido no excede los limites nunca).
• overflow: scroll; Las barras de desplazamiento se muestran siempre, sin importar el contenido, deshabilitadas. Y se habilitan en el momento que el contenido excede los limites.

Pero mejor que leer es ver, así que por acá pueden ver un pequeño ejemplo.

Es hermoso(bastante nerd también ) de vez en cuando encontrarse con este tipo de recopilatorios que nos inspiran a embellecer nuestros desarrollos.

10 set de iconos para desarrolladores web que te van a hacer caer un hilito de baba.

10 hermosos packs de iconos gratis para desarrolladores.

En Noupe hacen una muy buena recopilación de tutoriales y pequeños detalles para salvar nuestros diseños y evitar fuertes dolores de cabeza.