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

Tags: Css, diseño, div, html

Este artículo fue publicado en Viernes, Diciembre 19th, 2008 a las 12:31 pm bajo las categorías Css. Podés seguir las respuestas a este artículo vía RSS 2.0. También podés dejar una respuesta, o hacer un trackback desde tu sitio.