Una lista numerada fuera de lo común

Sexy Ordered Lists with CSS, es decir listas numeradas pero .. sexy ¿Por qué sexy? Vaya uno a saber, seguramente, porque es más llamativo que llamarlas lista con fondos.

De todas maneras, es una buena idea.

¿Qué es una lista ordenada? Una etiqueta HTML que muestra eso, una lista con una serie de items y de manera automática se coloca delante un número de orden (ver Las listas en HTML 1 y 2):

1. el primer item
2. el segundo item
3. el tercer item

<ol>
<li>el primer item</li>
<li>el segundo item</li>
<li>el tercer item</li>
</ol>

El truco sexy consiste en colocar dentro de cada item, dos datos separados, un encabezado y un párrafo y de esa manera, tenemos varios elementos que podemos personalizar de manera independiente:

<ol class="steps">
<li class="first">
<h2>encabezado 1</h2>
<p>párrafo 1</p>
</li>
<li>
<h2>encabezado 2</h2>
<p>párrafo 2</p>
</li>
<li class="last">
<h2>encabezado 1</h2>
<p>párrafo 1</p>
</li>
</ol>

Y claro, la clave está en cuáles son las propiedades CSS a aplicarle a cada sector; por ejemplo:

<style type='text/css'>
ol.steps {
/* la imagen de fondo de los números */
background: transparent url(archivo) repeat-y scroll 0 0;
border: 1px solid #111;
margin: 20px 0;
padding: 0 0 0 40px; /* la alineación horizontal de los números */
}
ol.steps li {
background:#222 none repeat scroll 0 0;
/* el efecto resaltado del los bordes de cada item */
border-top: 1px solid #000;
border-right: 1px solid #333;
border-bottom: 1px solid #353535;
border-left: 1px solid #151515;
/* la fuente de los números */
color: #DEF;
font-family: 'Century Gothic';
font-size: 25px;
margin: 0;
padding: 15px;
}
ol.steps li h5 { /* la fuente de los títulos */
border-bottom: 1px dashed #333;
color: #BCD;
font-family: 'Century Gothic';
font-size: 22px;
font-weight: normal;
padding: 0 0 5px 0;
}
ol.steps li p { /* la fuente de los textos */
color: #AAA;
font-family: Tahoma;
font-size: 14px;
font-weight: normal;
line-height: 1.2em;
}
ol.steps li.first { /* el borde superior opatativo */
border-top: 1px solid #333;
}
ol.steps li.last { /* el borde inferior optativo */
border-bottom: none;
}
</style>

Daría como resultado algo así:

1. Curabitur mattis nibh

   Vestibulum sapien dolor, viverra bibendum accumsan condimentum, fermentum id sem. Duis vel sapien id dui vestibulum aliquet ut ut libero. Pellentesque eget libero odio. Ut lacus tortor, auctor eget commodo ut, commodo eu nisi. Donec eleifend dapibus justo ut auctor! Donec risus quam, eleifend id suscipit consectetur, iaculis a purus. Morbi magna mauris, ultricies ac consequat ac, lobortis non enim. Curabitur in purus est! Pellentesque aliquam; velit consectetur feugiat ornare, tortor lectus tincidunt leo, in blandit tellus velit vel quam. Mauris eleifend enim quis lectus fringilla consequat. Maecenas arcu est, tincidunt et varius sed, faucibus ut diam. Sed elementum mollis bibendum.

2. Quis dolor interdum lobortis

   Morbi volutpat ipsum sit amet enim iaculis condimentum. Suspendisse mattis neque a enim molestie dignissim. Nulla turpis diam, euismod bibendum laoreet sed, vulputate ac sapien. Sed dignissim nibh hendrerit lacus accumsan vestibulum? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at hendrerit arcu. Aenean convallis nisl nec nisi feugiat tempor. Phasellus interdum mollis eros; ut rhoncus arcu feugiat ac. Vivamus posuere suscipit risus, sed bibendum massa lacinia non. Mauris dapibus eros quis risus dictum consectetur non ac libero. Quisque tincidunt nunc ac metus posuere varius? Sed cursus tincidunt mauris, a vestibulum ante rhoncus eget! Nullam sodales sagittis tincidunt. Duis dapibus lacinia venenatis. Donec tincidunt nisl nisl? Donec viverra consequat est, eget metus.

3. Proin sem nibh

   In nulla orci, imperdiet sed viverra ac, vulputate sed magna. Vestibulum viverra ullamcorper venenatis? Proin ac aliquet purus. Suspendisse at ligula sed dui lacinia feugiat. Proin lectus est, ultricies eget hendrerit a, molestie vitae arcu! Suspendisse rhoncus, metus id rhoncus iaculis, nisi lacus egestas sem, et feugiat eros arcu in nisl? Ut consequat interdum enim, eget dapibus ligula ultricies at. Donec consequat luctus neque. Maecenas ac magna a quam porttitor ullamcorper semper eu metus. Proin vel dui ipsum, laoreet dapibus massa! Sed interdum rutrum porta. Nam nisl ante, ultricies accumsan aliquam vitae, lacinia id sem! Aliquam erat volutpat. Nulla facilisi.