JMiur [E]

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 sonrisa

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(http://img198.imageshack.us/img198/9223/ulsexy.gif) 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.

9 comentarios:

Graciela  

habría que pensar lo que es sexy para cada persona???
He mirado en el blog, me encanta el 'movimiento' en la sidebar, es sexy!!! jajaja...todo lo dejo para pensar luego, en éste momento neuronas no trabajando, neuronas no trabajando, caprichosas!!!

Responder
Marcos Gabriel  

Esta é uma boa forma de enumerar os comentarios do blogger sem javascript

=D

Responder
sharysce  

:O ... creo que si es realmente sexy!! :P

Responder
JMiur  

Graciela: Todo es opinable :)
sharysce: Es lo que yo digo, hay gustos para todos ;)

Marcos Gabriel: ¡Excelente idea! No se me había ocurrido :D

Responder
Vku  

realmente esta muy sexy. y si lo primero que pense es que quedaria bueno en los comentarios

Responder
Loco 21  

Mira, me volvi loco tratando de arreglar los Articulos Relacionados, y nada lo dejare para mas adelante. Pero ahora otra cosa, y antes de plantearte mi duda te pido mil perdones por las multiples preguntas que te hago, te debe molestar pero es que se poco.

Bueno ahora el tema es este: El icono de los comentarios que figura en el post.footer se ve perfecto en la pagina principal, pero a la hora de expandir la entrada, puedo notar que la palabra comentarios no esta y que su icono sigue solo. Yo lo que quiero es que de alguna manera el icono solo se vea en la pagina principal y no cuando expando las entradas. Se puede??

Responder
Gem@  

Pienso como Graciela habría que ver lo que es sexy para cada uno.
Para mi sexy es... sexy está claro :D
Es una idea genial, diferente, elegante, hay que probarlo ;)

Responder
JMiur  

Loco 21: es lo mismo que en el caso de los posts relacionados, deberías condicionar ese código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span class="post-comment-link">
.................
</span>
</b:if>

Gem@: Si crees que es sexy, lo será :D

Responder
Antony  

Pero que sexy es... :D Es perfecto...!!! Saludos!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR