» Publicación:
14 Abril 2012
/
Categoría:

Ordenando listas desordenadas con CSS3

Después de bastante tiempo, vamos con una nueva entrada, esta vez trabajaremos con algo bastante experimenta por así decirlo en CSS3. Vamos a a crear una lista
desordenada con la visualización de lista ordenada ¿Cómo? Si tal como leen. Todo esto empleando CSS3 para conseguir un diseño agradable visualmente con los atributos de la pseudo-clase :hover y los pseudo-elementos ::before y ::after.

Debemos recordar que a partir de CSS3 los pseudo-elementos van con doble dos puntos delante de la palabra y las pseudo-clases con dos puntos únicamente.

Para comenzar con el ejemplo primero debemos crear un archivo HTML nuevo y hacer una lista desordenada, como explico a continuación:

El resultado de esta lista en pantalla no es nada, solo unos círculos hacia abajo, sin contenido.
Ahora iremos colocando los estilos para que la lista desordenada vaya tomando una apariencia aceptable y al mismo tiempo practicar con el uso de pseudo-clases y pseudo-elementos. Primero aplico algunos estilos al body:

Destacar únicamente la utilización de la propiedad counter-reset, el empleo del tipo de colores empleado para background-color y la imagen “bg.png” que la pueden bajar de acá.

Ahora voy a crear los círculos y el contador aplicando algunos estilos a la etiqueta li directamente y otros mediante el pseudo-elemento :before.

De estos estilos destacamos counter-increment: circulo; que será nuestro contador incrementando en 1 cada uno de los elementos li de nuestra lista desordenada.
También destacar en los estilos aplicados mediante nuestro pseudo-elemento :before, content: counter(circulo); que será quien haga que se muestre el número.
Los demás estilos aplicados creo que no hace falta que los explique. Quedando así nuestro ejemplo en este paso.

Después de colocar esto nos queda únicamente añadir el texto para cada uno de los elementos de la lista y algunos estilos para que se muestren más elegantes en pantalla. En este caso una sombra para el texto y un efecto :hover para que el texto cambie de color una vez que pasamos nuestro mouse encima.
Para el ejemplo, he decidido colocar el texto también con el pseudo-elemento :after. No debemos olvidar que el valor de esta lista se suele dar mediante código HMTL.

Dando como resultado la primera imagen que mostrábamos en la entrada.

Ver demo

Importante: La complicación que podríamos tener al realizar este ejercicio es que ni el Dreamweaver en su versión CS5.5 no toma correctamente los parámetros para visualizarlos, por eso trabajamos un poco a ciegas, aunque los navegadores lo verán sin problemas.
  • Facebook
  • Twitter
  • Tumblr
  • Digg
  • Reddit
  • LinkedIn
  • Google Bookmarks
  • E-Mail
» Sobre el autor: Reckless
Joven chileno de 29 años, con un paso por la escuela de Ingenieria de la UNAB, que dejo a medio camino para tomar la carrera de Diseñador Gráfico Profesional en la Universidad Santo Tomás, que era lo que siempre busco desde los 12 años. Fanático de la Universidad de Chile, el Metal y el Hardrock. Actualmente trabajando como Diseñador & Desarrolador Web para Especiales de Emol.com, ademas de "Freelancear" cuando se puede.
Comentarios
Por ahora esta entrada no contiene ningún comentario...
Se el primero en comentar está entrada en el formulario de abajo.
Escribe tú comentario
*
*
» Mensaje: