Las listas HTML son un recurso muy utilizado tanto por diseñadores y desarrolladores web como por blogueros, pero la verdad es que por defecto suelen estar bastante desnutridas en cuando a diseño.
prenderemos en este post a maquetar listados con CSS dándoles un aspecto mucho más moderno. El origen de los modelos, proviene de la bibliografía expuesta al final, y, de modelos que he visto en otros autores en sus post, y los he copiado y adaptado,
De manera que esta publicación está sujeta a posteriores ediciones del material original, en virtud de adiciones que haré por lo que vea en otras publicaciones. En ese sentido, la presente se constituye en un excelente archivo compilador de modelos de publicaciones con diseños de listas muy bien acabadas, para que cada quien selecciones la que más le impresione.
Comprobarás que hay muchísimas maneras de maquetar listas, acá vamos a poner varios ejemplos diferentes. La ventaja de todo esto, es que puedes personalizar estos estilos y crear tus propias listas con los efectos que se te ocurran.
Y, un daeo previo muy importante, es que se encuentran en internet varios generadores online de listas. Acá algunos:
Listas animadas
Lista #1
Vamos a crear un efecto de rotado y sombreado en el elemento activo. Con esto se consigue resaltar de una manera llamativa el elemento donde está el puntero del ratón, ideal para crear menús.
El HTML:
<div id="lista1">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</div>
El CSS:
#lista1 ul {
list-style:none;
}
#lista1 ul li {
font-family:Georgia,serif,Times;
font-size:18px;
}
#lista1 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;
}
#lista1 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(4deg); box-shadow:10px 10px 20px #000000;
margin-left: 10px;
}
Resultado:
A título de ejemplo, este modelo de lista lo apliqué en la bibliografía de una publicación mía, que puedes consultar en el siguiente enlace:
Nota: Los modelos de listas 1, 2 y 3 requieren el uso del siguiente link:
<link id='gavern-override-css' media='all' rel='stylesheet' type='text/css' href='https://blog.endeos.com/wp-content/themes/MeetGavernWP-endeos/css/override.css?ver=50b3f12952bb9c0214375ba8a1aabf13' />
...........................................................................................................................
Lista #2
Ahora, vamos a crear una lista ordenada resaltando el elemento activo y maquetando la numeración dentro de círculos.
El HTML:
<ol id="lista2">
<li>List item</li>
<li>List item</li>
<li>List item
<ol>
<li>List sub item</li>
<li>List sub item</li>
<li>List sub item</li>
</ol>
</li>
<li>List item</li>
<li>List item</li>
</ol>
El CSS:
#lista2 {
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);
}
#lista2 ol {
margin: 0 0 0 2em;
}
#lista2 li{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #ddd;
color: #444;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
#lista2 li:hover{
background: #eee;
}
#lista2 li:hover:before{
transform: rotate(360deg);
}
#lista2 li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}
Resultado:
- List item
- List item
- List item
- List sub item
- List sub item
- List sub item
- List item
- List item
A título de ejemplo, este modelo de lista lo apliqué en una publicación mía, que puedes consultar en el siguiente enlace:
...........................................................................................................................
Lista #3
Parecida a la anterior, en esta ocasión para los que prefieren un cuadrado en vez de círculos.
El HTML:
<ol id="lista3">
<li>List item</li>
<li>List item</li>
<li>List item
<ol>
<li>List sub item</li>
<li>List sub item</li>
<li>List sub item</li>
</ol>
</li>
<li>List item</li>
<li>List item</li>
</ol>
El CSS:
#lista3 {
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);
}
#lista3 ol {
margin: 0 0 0 2em;
}
#lista3 li{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 2.5em;
background: #ddd;
color: #444;
text-decoration: none;
transition: all .3s ease-out;
}
#lista3 li:hover{
background: #eee;
}
#lista3 li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #fa8072;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
#lista3 li:after{
position: absolute;
content: '';
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
#lista3 li:hover:after{
left: -.5em;
border-left-color: #fa8072;
}
Resultado:
- List item
- List item
- List item
- List sub item
- List sub item
- List sub item
- List item
- List item
A título de ejemplo, este modelo de lista lo inserté en el diseño una imagen de una publicación mía, que puedes consultar en el siguiente enlace:
...........................................................................................................................
Lista #4
Ahora vamos a insertar flechas que aparecerán al dar clic sobre el objeto.
El HTML:
<h2>Indice:</h2> <ul> <li> <a class="arrow" dir='ltr' href='#link1'> Link1</a> </li> <li> <a class="arrow" dir='ltr' href='#link2'> Link2 </a> </li> </ul>
El CSS:
.arrow {
position: relative;
display: inline-block;
transition: transform .25s ease;
}
.arrow:before {
pointer-events: none;
content: "\27A5";
opacity: 0;
position: absolute;font-size:20px;
top: 0;
left: 0;
display: block;
transform: translateX(-1.5em) translateZ(0);
transition: transform .25s ease, opacity .25s ease;
}
a:hover .arrow,
.arrow:hover {
transform: translateX(1em) translateZ(0);
}
a:hover .arrow:before,
.arrow:hover:before {
transform: translateX(-1em) translateZ(0);
opacity: 1;
}
Resultado:
Coloca el mouse sobre el link y verás aparecer una flechita señalizadora:
Aunque comparativamente al resto de los modelos expuestos en este post, el modelo 4 pareciera a primera vista muy sencillo, yo lo aplico para llamar la atención en títulos o en enlaces individuales (incluso reforzando el empleo de un strong o un mark), donde no deben excederse los detalles estilísticos para no sobrecargar el resultado, y, la sola flechita es suficiente para el fin de capturar atención.
A título de ejemplo, este modelo de lista lo apliqué en el índice de una publicación mía, que puedes consultar en el siguiente enlace:
...........................................................................................................................
Lista #5
Las tablas de contenido son muy frecuentemente empleadas por escritores de blogs. Anexo otro modelo, al posar el mouse sobre el texto, se produce en el mismo un efecto de dilatación. Adicionalmente, se agrega un div de color celeste, que lo puedes aplicar igualmente al efecto 4.
El HTML:
<div class="table-of-contents">
<p>Tabla de contenidos</p>
<ul>
<li><a class="toc-main-link" href="#concepto"><span class="toc-number">
01</span><span class="toc-title">El Concepto </span></a></li>
<li><a class="toc-main-link" href="#caracteristicas"><span
class="toc-number">02</span><span class="toc-title">
Las características</span></a></li>
</ul>
</div>
El CSS:
.table-of-contents{font-size:20px;display:inline-block;
padding:1.8em 2em 2em;border:1px solid #aabaf2;
background:#e9ebf2;min-width:40%;text-align:left;
border-radius:4px;box-shadow:inset 0 0 8em #bdcbfc}
.table-of-contents p{font-family:Oswald,sans-serif;
text-transform:uppercase;font-size:1.4em;font-weight:700;
color:#356494;text-indent:0;margin:0 0 .5em}
.table-of-contents ul{margin:0;padding-left:0;list-style-type:none}
.table-of-contents ul.toc-list-level-2 a{padding:.5em 0 0 4.2em;
transition:all .2s cubic-bezier(.165,.84,.44,1);
transform:translate3d(0,0,0) skew(0) rotate(0);}
.table-of-contents ul.toc-list-level-2 a:hover{transform:translate3d
(15px,0,0) skew(0) rotate(0)}
.table-of-contents ul.toc-list-level-3 a{padding:.5em 0 0 5.2em;
transition:all .2s cubic-bezier(.165,.84,.44,1);transform:
translate3d(0,0,0) skew(0) rotate(0);}
.toc-main-link{margin:20px 40px 20px 0;}
.table-of-contents ul.toc-list-level-3 a:hover{transform:translate3d
(15px,0,0) skew(0) rotate(0)}
.table-of-contents li{position:relative}
.table-of-contents a{transition:all .2s cubic-bezier(.165,.84,.44,1);
position:relative;line-height:1.9em;padding-top:1em;display:block;
color:#356494;text-decoration:none}
.table-of-contents a:hover{color:#0b2a4b}
.table-of-contents a.toc-main-link .toc-number{position:relative;
transition:all .3s cubic-bezier(.165,.84,.44,1);transform:
translate3d(0,0,0) skew(0) rotate(0);line-height:1em;display:
inline; padding:.7em 1.2em .9em 1.2em;width:2em;height:1em;
background:blue;color:#fff;text-align:left;vertical-align:bottom}
.table-of-contents a.toc-main-link:hover .toc-number{ padding:20px;
font-size:30px;background:#19a2ba;border-bottom-color:#356494;
transform:translate3d(15px,0,0) skew(0) rotate(0)}
.table-of-contents a.toc-main-link .toc-title{font-size:30px;
transition:all .2s cubic-bezier(.165,.84,.44,1);position:relative;
transform:translate3d(0,0,0) skew(0) rotate(0);line-height:1.9em;
display:inline-block;border-bottom:1px solid #a5b6c8;padding:0 1em 0}
.table-of-contents a.toc-main-link:hover .toc-title{font-size:30px;
border-bottom-color:#356494;transform:translate3d(15px,0,0) skew(0)
rotate(0)}@media screen and (max-width:480px){.table-of-contents
ul.toc-list-level-2 a{padding:.5em 0 0 2.5em}}@media screen and
(max-width:370px){.table-of-contents ul.toc-list-level-2
a{padding:.5em 0 0 1em}}
Resultado:
Tabla de contenidos
Este modelo de lista lo apliqué en una publicación mía, que puedes consultar en el siguiente enlace:
...........................................................................................................................
Modelos estáticos
Lista #6
Probemos algo diferente. Ahora vamos a poner números grandes y parcialmente escondidos en el <li>
El HTML:
<ol id="lista4">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
El CSS:
#lista4 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);
}
#lista4 ol {
margin: 0 0 0 2em;
}
#lista4 {
list-style-type: none;
list-style-type: decimal !ie; /*IE 7- hack*/
margin: 0;
margin-left: 3em;
padding: 0;
counter-reset: li-counter;
}
#lista4 > li{
position: relative;
margin-bottom: 20px;
padding: 1em;
border-left: 2px solid #CCCCCC;
background-color: #f5f5f5;
}
#lista4 > li:before {
position: absolute;
top: 0;
left: -0.95em;
width: 1em;
font-size: 4em;
line-height: 1;
font-weight: bold;
text-align: right;
color: #464646;
transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
z-index: -99;
overflow: hidden;
content: counter(li-counter);
counter-increment: li-counter;
}
Resultado:
Lista #7
Parecido al anterior ejemplo, superponiendo ahora el índice por encima del <li>.
El HTML:
<ol id="lista5">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
El CSS:
#lista5 {
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);
}
#lista5 ol {
margin: 0 0 0 2em;
}
#lista5 {
list-style-type: none;
list-style-type: decimal !ie; /*IE 7- hack*/
margin: 0;
margin-left: 1em;
padding: 0;
counter-reset: li-counter;
}
#lista5 > li{
position: relative;
margin-bottom: 1.5em;
padding: 1.5em;
background-color: #eaeaea;
}
#lista5 > li:before {
position: absolute;
top: -0.3em;
left: -0.5em;
width: 1.8em;
height: 1.2em;
font-size: 2em;
line-height: 1.2;
font-weight: bold;
text-align: center;
color: #464646;
background-color: #d0d0d0;
transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
z-index: 99;
overflow: hidden;
content: counter(li-counter);
counter-increment: li-counter;
}
Resultado:
- List item
- List item
- List item
- List item
A título de ejemplo, este modelo de lista lo apliqué un listado de ítems de una publicación mía, que puedes consultar en el siguiente enlace:
| Salu2 y bendiciones, Atte, Angel Paz |  |
