miércoles, 28 de octubre de 2009

Otras formas de añadir estilos a las listas

Visitando Cosas Sencillas he visto un enlace a Marcofolio donde habla de "8 formas diferentes de añadir bonitos estilos a nuestras listas". Con Explorer el efecto del siguiente ejemplo se pierde, pero aún así no he podido resistirme a probarlo.


Estilos CSS antes de ]]></b:skin>

/* 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; }

En HTML:

<div id="list8">
<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>

No hay comentarios:

Publicar un comentario