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à!

12 Principios que todo desarrollador web debería tener en cuenta en cualquier desarrollo

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.

Uf! casi no llega!.

Después de muchas vueltas de tuerca, sudor, café y tabaco, logré poner en marcha el diseño nuevo para este blog.

Como siempre, gracias Silvestre por tus mágicos templates

10 hermosos packs de iconos gratis para desarrolladores.