Hace un rato agregué al css de este sitio un recuadro de descarga.

Los ingredientes:

1. Una imágen vistosa que identifique al elemento como descargable.
2. Algo para descargar
3. Un div.

La preparación:

Voy a tomar una imágen del set de iconos Giøn de mi buen amigo Silvestre que anda distribuyendo su creación bajo licencia GPL.

Ahora, el css:

1
2
3
4
5
6
7
8
9
10
11

.download {
		background: #EFEFEF url('images/download.png')  left no-repeat;
		border: 1px solid #cacaca;
		width: 25%;
		margin: 0px auto;
		padding: 10px 10px 10px 128px;
		text-align: right;
	}
	.download p {
		text-align: center;
	}

Y el HTML:

1
2
3
4
5
6

<div class="download">
	<p>
		<strong>descarga</strong>
		<a href="miarchivo.zip">miarchivo.zip</a>
	</p>
</div>

Generando como resultado

Et voilà!

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.

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.

En estas epocas de innovación, reinventar la rueda y web 2.0, un formulario sin estilo es sinonimo de haberse quedado en el tiempo. Hoy Janko nos trae un par de tips css interesantes para que nuestros formularios sean más vistosos.