Lista ordenadas mediante CSS3

A pesar de que todos los programadores web alguna vez han realizado una lista ordenada, con las etiquetas HTML apropiadas, en esta ocasión y con la llegada de CSS3 adquieren una nueva dimensión en la que podemos tener lsitas ordenadas cómo hasta ahora pero con el añadido de poder tener en la lista cierta animación en la que el usuario final puede estar encandado de poder interactuar mediente su ratón con la web que está visitando. En este ejemplo de listas ordenadas al pasar el ratón por cada uno de los elementos el número de la lista empieza a dar vueltas contento de haber sido seleccionado por el usuario.

Estilo a Listas Ordenadas

CODIGO HTML

<ol class="lista-redondeada">
    <li><a href="">Item Lista</a></li>
    <li><a href="">Item Lista</a></li>
    <li><a href="">Item Lista</a>
        <ol>
            <li><a href="">Item Sublista</a></li>
            <li><a href="">Item Sublista</a></li>
            <li><a href="">Item Sublista</a></li>
        </ol>
    </li>
    <li><a href="">Item Lista</a></li>
    <li><a href="">Item Lista</a></li>						
</ol>

<ol class="lista-rectangular">
    <li><a href="">Item Lista</a></li>
    <li><a href="">Item Lista</a></li>
    <li><a href="">Item Lista</a>
        <ol>
            <li><a href="">Item Sublista</a></li>
            <li><a href="">Item Sublista</a></li>

            <li><a href="">Item Sublista</a></li>
        </ol>
    </li>
    <li><a href="">Item Lista</a></li>
    <li><a href="">Item Lista</a></li>			
</ol>

<ol class="lista-circular">
    <li>
        <h2>T&iacute;tulo a destacar en esta lista</h2>
        <p>Descripcion del servicio o producto.</p>
    </li>
    <li>
         <h2>T&iacute;tulo a destacar en esta lista</h2>
        <p>Descripcion del servicio o producto.</p>
    </li>
    <li>
        <h2>T&iacute;tulo a destacar en esta lista</h2>
        <p>Descripcion del servicio o producto.</p>
    </li>
    <li>
        <h2>T&iacute;tulo a destacar en esta lista</h2>
        <p>Descripcion del servicio o producto.</p>
    </li>
    <li>
        <h2>T&iacute;tulo a destacar en esta lista</h2>
        <p>Descripcion del servicio o producto.</p>
    </li>           
</ol>		

CODIGO CSS

/* Listas Ordenadas con CSS */
ol{
	counter-reset: li;
	list-style: none;
	*list-style: decimal;
	font: 15px 'trebuchet MS', 'lucida sans';
	padding: 0;
	margin-bottom: 4em;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

ol ol{margin: 0 0 0 2em;}

/* Lista Redondeadas */			
.lista-redondeada a{
	position: relative;
	display: block;
	padding: .4em .4em .4em 2em;
	*padding: .4em;
	margin: .5em 0;
	background: #FCCA8F;
	color: #444;
	text-decoration: none;
	-moz-border-radius: .3em;
	-webkit-border-radius: .3em;
	border-radius: .3em;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;	
}

.lista-redondeada a:hover{
	background: #FDECD0;
}

.lista-redondeada a:hover:before{
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);	
}

.lista-redondeada a:before{
	content: counter(li);
	counter-increment: li;
	position: absolute;	
	left: -1.3em;
	top: 50%;
	margin-top: -1.3em;
	background: #F49824;
	height: 2em;
	width: 2em;
	line-height: 2em;
	border: .3em solid #fff;
	text-align: center;
	font-weight: bold;
	-moz-border-radius: 2em;
	-webkit-border-radius: 2em;
	border-radius: 2em;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
}

/* Lista Rectangular */
.lista-rectangular a{
	position: relative;
	display: block;
	padding: .4em .4em .4em .8em;
	*padding: .4em;
	margin: .5em 0 .5em 2.5em;
	background: #FCCA8F;
	color: #444;
	text-decoration: none;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;	
}

.lista-rectangular a:hover{
	background: #FDECD0;
}	

.lista-rectangular a:before{
	content: counter(li);
	counter-increment: li;
	position: absolute;	
	left: -2.5em;
	top: 50%;
	margin-top: -1em;
	background: #F60;
	height: 2em;
	width: 2em;
	line-height: 2em;
	text-align: center;
	font-weight: bold;
}

.lista-rectangular a:after{
	position: absolute;	
	content: '';
	border: .5em solid transparent;
	left: -1em;
	top: 50%;
	margin-top: -.5em;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;				
}

.lista-rectangular a:hover:after{
	left: -.5em;
	border-left-color: #F60;				
}

/* Lista Circular */
.lista-circular li{
	padding: 2.5em;
	border-bottom: 1px dashed #ccc;
}

.lista-circular h2{
	position: relative;
	margin: 0px;
	padding-left:20px;
}

.lista-circular p{
	margin: 0;
	padding-left:20px;
}

.lista-circular h2:before{
	content: counter(li);
	counter-increment: li;
	position: absolute;    
	z-index: -1;
	left: -1.3em;
	background: #f5f5f5;
	height: 1.5em;
	width: 1.5em;
	border: .1em solid rgba(0,0,0,.05);
	text-align: center;
	font: italic bold 1em/1.5em Georgia, Serif;
	color: #ccc;
	-moz-border-radius: 1.5em;
	-webkit-border-radius: 1.5em;
	border-radius: 1.5em;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-ms-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;    
}

.lista-circular li:hover h2:before{
	content: counter(li);
	counter-increment: li;
	position: absolute;    
	z-index: -1;
	left: -1.3em;
	background: #FBF5E1;
	height: 1.5em;
	width: 1.5em;
	border: .1em solid rgba(0,0,0,.05);
	text-align: center;
	font: italic bold 1em/1.5em Georgia, Serif;
	color: #666;
	-moz-border-radius: 1.5em;
	-webkit-border-radius: 1.5em;
	border-radius: 1.5em;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-ms-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;
}

Ver Demo