Estilizando las listas <ul> y <ol> con CSS

En el blog de marcofolio he econtrado unas ocho formas de como podemos estilizar meditante el uso de CSS las listas que integramos en las entradas o los menús, dándoles un aspecto más profesional y con mucho más diseño.

Debemos recordar que su uso sirve tanto para listas ordenadas como para las desordenadas, es decir, y para que podamos entendernos, es mejor hacerlo con ejemplos:

El empleo de las etiquetas de listas en HTML, ya sea de tipo <ol> (nos permite presentar listas de elementos ordenados de menor a mayor) o <ul> (nos permite presentar listas de elementos sin orden alguno), pueden ser modificadas mediante CSS. Su uso más común es para crear un sistema de navegación simple, tal y como se expone en el siguiente ejemplo:

<div id="list1">
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About </a></li>
      <li><a href="#">Contact</a></li>
   </ul>
</div>

El código HTML anterior, crea un simple menú sin ningún tipo de estructura, pero si añadimos el siguiente código CSS:

/* LIST #1 */
#list1 { }
#list1 ul { list-style:none; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:10px 0; }
#list1 ul li { display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; }
#list1 ul li a { text-decoration:none; color:#eee; }
#list1 ul li a:hover { text-decoration:underline; }

Obtendremos el siguiente resultado:

Entre todos los ejemplos que he visto en el blog marcofolio.net me quedo con el cual crea un menu rotado.

La sencilla razón de que me guste más no es solo por el diseño, sino por el empleo de CSS3, siendo este método soportado por las últimas versiones de los navegadores Firefox, Safari y Chrome.

Tomaremos como ejemplo el mismo código HTML anterior, pero debemos cambiar la identificación por “list8”, siendo el código CSS correspondiente, el siguiente:

/* LIST #8 */
#list8 {  }
#list8 ul { list-style:none; }
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px;
  text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover {  -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
  -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
  transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }