Algunos efectos interesantes que se pueden lograr con listas en CSS

16-12-2025 - 👤 Andrés Cruz

Las listas HTML siempre han estado ahí, casi invisibles, cumpliendo su función básica. Sin embargo, con la evolución de CSS, las listas han pasado de ser simples bloques de texto a convertirse en auténticos elementos de diseño. En mi caso, cuando empecé a experimentar con estilos y animaciones, descubrí que muchas interfaces podían resolverse únicamente con listas bien trabajadas, sin recurrir a tablas ni a JavaScript.

Las listas son un elemento fundamental para mostrar información de manera organizada; debido a la gran evolución que ha tenido CSS en los últimos años de algún modo los listados simples le han quitado terreno a las tablas y son cada vez más y más empleadas.

En esta guía veremos cómo crear listas elegantes en CSS, empezando por una base sólida y usable, y avanzando hacia efectos visuales y animaciones que aportan personalidad sin romper la experiencia de usuario.

Base técnica: cómo funcionan las listas HTML

Por lo tanto debemos conocer cómo trabajar con ellas; en esta entrada veremos cómo trabajar con los listados y algunos efectos interesantes, pero antes de ello veremos cómo crear un listado básico:

<ul>
	<li>Uno</li>
	<li>Dos</li>
	<li>Tres</li>
	<li>Cuatro</li>
	<li>Cinco</li>
</ul>

Y tendríamos:

Uno
Dos
Tres
Cuatro
Cinco

Qué entendemos por listas elegantes en CSS

Cuando hablamos de CSS listas elegantes, no nos referimos solo a cambiar la viñeta. Una lista elegante cumple tres principios:

Claridad visual: el contenido se lee rápido.
Consistencia: espaciado, alineación y jerarquía coherentes.
Personalidad: pequeños detalles visuales o animaciones sutiles.

Con el tiempo he comprobado que, incluso en proyectos pequeños, una lista bien diseñada transmite más profesionalidad que un diseño recargado.

La propiedad list-style-type: Tipos de viñetas en CSS

Para cambiar este tipo de viñeta, tenemos la propiedad list-style-type que en lo personal pienso que es un nombre algo largo para una propiedad tan simple, pero es bastante descriptiva y permite controlar el tipo de viñeta que se muestra; esta propiedad se aplica a elementos de la lista y sus valores son los siguientes:

disc | circle | square | decimal | decimal-leading-zero | georgian | lower-roman | upper-roman| lower-alpha | upper-alpha | lower-greek | lower-latin | upper-latin | armenian | none | inherit

Puedes probar cada uno de ellos si gustas en tu CSS y verás los resultados; el valor inicial o por defecto es el de disc; none permite especificar que no se mostrará ningún tipo de viñeta en el listado.

Podemos definir todo en una sola línea:

ul {
 list-style: square inside url(icon.png);
}

El orden no importa, y si la imagen falla, el navegador usará el tipo definido como respaldo.

Ejemplos de uso de la propiedad list-style-type

<ul>
	<li>Uno</li>
	<li>Dos</li>
	<li>Tres</li>
	<li>Cuatro</li>
	<li>Cinco</li>
</ul>

Y tendríamos:

Uno
Dos
Tres
Cuatro
Cinco

<ul>
	<li>Uno</li>
	<li>Dos</li>
	<li>Tres</li>
	<li>Cuatro</li>
	<li>Cinco</li>
</ul>

Y tendríamos:

Uno
Dos
Tres
Cuatro
Cinco

En muchos diseños elegantes, el primer paso es eliminar la viñeta:

ul {
 list-style-type: none;
}

Desde ahí podemos construir algo más limpio y controlado.

La propiedad list-style-position

Esta propiedad permite indicar si las viñetas están adentro o a fuera del contenido del listado; para ello se emplea los valores outside e inside respectivamente:

<ul style="list-style-position: inside">
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
</ul>

<ul style="list-style-position: outside">
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
</ul>

Y obtenemos:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Cómo puedes darte cuenta, esta propiedad permite agregar un margen al listado para colocar la viñeta o no; se ve evidenciado su comportamiento cuando son listados con mucho contenido como el de los ejemplos anteriores.

La propiedad list-style-image

Esta propiedad permite añadir una imagen personalizada mediante una URL a nuestros listados; a continuación mostramos un ejemplo de su uso:

ul.img { list-style-image: url("assets/img/img.png"); }

Todos para una: La propiedad list-style

Finalmente, mediante la propiedad list-style podemos definir las 3 propiedades anteriores en una sola regla CSS:

ul.li {
list-style: list-style-image list-style-type
}
ul.li {
list-style: list-style-type list-style-position list-style-image
}

Estos son algunos ejemplos del uso de la propiedad list-style que como colocamos anteriormente, podemos definir todas las demás propiedades en una sola:

ul.img { list-style-image: url("assets/img/img.png") disc; }

Creando menús en base a listas con CSS: Menu vertical

Un uso muy común y que seguramente ya conoces, es el uso de los listados para crear menús; el menú por defecto sería el vertical que solo tendríamos que agregar los links y demás CSS para que crear un menú de manera vertical:

Como puedes apreciar, como pasos fundamentales tenemos es remover las viñetas del menú, además de colocar algún color a cada ítem del menú, esto sería lo fundamental; el HTML y CSS lo puedes ver aquí:

<style>
    ul.menu_1 {
        margin: 20px;
        padding: 0;
    }

    ul.menu_1 li {
        list-style-type: none;
        line-height: 1.6;
        background: #CCC;
        margin: 0 0 10px 0;
        padding: 4px 8px;
        border: 1px solid #666;
    }
    ul.menu_1 li a{
        color: #FFF !important;
    }
</style>

<ul class="menu_1">
	<li><a href="#">Uno</a></li>
	<li><a href="#">Dos</a></li>
	<li><a href="#">Tres</a></li>
	<li><a href="#">Cuatro</a></li>
	<li><a href="#">Cinco</a></li>
</ul>

Posición de la viñeta: list-style-position

Esta propiedad define si la viñeta queda dentro o fuera del contenido:

ul {
 list-style-position: inside;
}

outside (por defecto): mejor para textos largos.
inside: útil cuando buscamos alineaciones compactas.

En listas con mucho contenido, este detalle marca la diferencia en la legibilidad, algo que aprendí tras probar distintos layouts con textos extensos.

Viñetas personalizadas con ::marker

Una de las mejoras más interesantes de CSS moderno es el pseudoelemento ::marker, ideal para listas elegantes sin hacks:

ul {
 list-style-type: upper-roman;
}
li::marker {
 color: #6c63ff;
 font-weight: bold;
}

Ventajas:

Código limpio
Accesible
Sin imágenes ni pseudo-elementos adicionales

Limitación: no todas las propiedades son compatibles, pero para diseño elegante suele ser suficiente.

Listas elegantes sin imágenes (recomendado)

Aunque existe list-style-image, en la práctica es más flexible usar fondos:

ul {
 list-style: none;
 padding-left: 2rem;
}
ul li {
 padding-left: 2rem;
 background-image: url(star.svg);
 background-repeat: no-repeat;
 background-position: 0 0.2rem;
 background-size: 1.2rem;
}

Este enfoque permite:

Control total del tamaño
Mejor alineación
Diseños más modernos

En mis pruebas, este método siempre termina siendo más mantenible que usar imágenes como viñetas directas.

Menús elegantes basados en listas

Uno de los usos más comunes de las listas es la creación de menús verticales:

ul.menu {
 margin: 20px;
 padding: 0;
}
ul.menu li {
 list-style: none;
 background: #eaeaea;
 margin-bottom: 10px;
 padding: 8px 12px;
 border-radius: 6px;
 transition: background 0.3s ease;
}
ul.menu li:hover {
 background: #dcdcdc;
}

Este tipo de menú es:

Semántico
Accesible
Fácil de animar

Con muy poco CSS ya obtenemos un resultado limpio y profesional.

Animando los listados con CSS

El próximo punto que vamos a tocar, ya conocido lo elemental de los listados en CSS, vamos a darle un poco más de CSS para animarlo mediante rotaciones, traslaciones y mucho más; como especificamos antes por defecto las listas se muestran con un puntito como viñeta o un pequeños círculo de color negro, estas listas son llamadas no ordenadas ya que no cuentan con ninguna numeración y por lo tanto un orden; las listas las creamos definiendo como elemento padre un ul seguido de uno o más ítems que son los elementos del listado como tal mediante li:

Cómo se ha comentado en posteriores entregas, las transiciones y animaciones en CSS son grandes herramientas que permiten crear cambios suaves entre un estado a otro sin mayores complicaciones; en esta entrada veremos algunos efectos curiosos sobre listas ul (algunos con efectos 3D):

Definiendo el CSS base de nuestra animación

Lo primero es lo primero, definir el CSS básico o común que emplearemos en todas las listas:

ul {
  margin: 20px;
  padding: 0;
  list-style-type: decimal;
  transition: all 1s;
}

li {
  line-height: 1.6;
  background: rgba(0,0,0,0.1);
  margin: 0 0 10px 0;
  padding: 4px 8px;
  transition: all 1s;
}

En el CSS mostrado anteriormente no hay mucho que explicar; un fondo de color gris claro y otras propiedades para el espaciado y poco más; con esto obtenemos la siguiente lista:

lista en CSS

1. Efecto de acordeón en el eje de las X

Este primer efecto un tanto pobre simplemente invierte el orden de nuestra lista en el eje de las X como si de un acordeón se tratase; pero nos servirá como guía para entender más fácilmente el resto de los efectos:

Posiciona el cursor encima.

Ver ejemplo

ul:hover {transform: rotateX(180deg);}
ul:hover li {transform: rotateX(-180deg);}

Un detalle importante que notarás en los demás efectos es que se rota el elemento padre ul a la vez que sus hijos lis pero en dirección contraria (efecto que se logra con un valor positivo/negativo).

2. Efecto de girar sobre su eje en el eje de las Z

Este efecto es un poco más visual que el anterior debido a que nos metemos en el "mundo 3D" al no emplear los ejes X y Y e involucrarnos en las rotaciones directamente con el eje de las Z:

Posiciona el cursor encima.

Ver ejemplo

ul:hover {transform: rotateZ(180deg);}
ul:hover li {transform: rotateZ(-180deg);}

Aunque el principio es el mismo del experimento anterior (realizar rotaciones del padre y sus hijos (ul y sus hijos li pero en sentidos contrarios), vemos un detalle que tal vez hayamos pasado por alto en el primer ejemplo, y es que todos los elementos se ven alterada su posición salvo por el central (o el li número tres) y este efecto se consigue debido a cómo se realizan las rotaciones de manera simultánea pero en sentidos contrarios.

3. Efecto de listas superpuestas horizontalmente

Aunque no lo parezca, el siguiente experimento está compuesto por listas lis que al posicionarnos sobre las mismas recuperan su posición original:

Posiciona el cursor encima.

Ver ejemplo

ul {
/*demas propiedades*/
  transform: rotateZ(90deg);
}

li {
/*demas propiedades*/
  transform: rotateZ(-90deg);
}

ul:hover {
  transform: rotateZ(0deg);

}
ul:hover li {
  color:#000;
  transform: rotateZ(0deg);
}

Es un tanto parecido al anterior, pero esta vez las lista (lis) y su padre (ul) comienzan rotadas en el eje de las Z unos +/-90 grados y se posicionan correctamente para su visualización al pasar el cursor sobre los mismos.

4. Efecto de listas superpuestas horizontalmente -doble vuelta-

Al contrario del segundo experimento; aquí las listas realizan dos vueltas hasta obtener su completa visualización:

Posiciona el cursor encima.

Ver ejemplo

ul {
/*demas propiedades*/
  transform: rotateZ(270deg);
}

li {
/*demas propiedades*/
  transform: rotateZ(-270deg);
}

ul:hover {
  transform: rotateZ(0deg);

}
ul:hover li {
  color:#000;
  transform: rotateZ(0deg);
}

5. Efecto de listas superpuestas verticalmente

Bueno, porque solo limitarse a posicionar las listas en horizontal si las podemos poner en vertical!!!; para esto empleamos rotaciones en el eje de las Y:

Posiciona el cursor encima.

Ver ejemplo

li {
  /*demas propiedades*/
  transform: rotateZ(90deg);
}

body:hover ul {
transform: rotateY(0deg);

}
body:hover ul li {
  color:#000;
  transform: rotateY(0deg);
}

Notarás que empleamos el selector:

body:hover ul {}
body:hover ul li {}

En vez de:

ul:hover {}
ul:hover li {}

Sencillamente por ser obtiene un manejo más fluido al iniciar la transición sobre todo el documento que en una sección del mismo (ul).

Animaciones sutiles: elegancia antes que espectáculo

No todo son rotaciones extremas. Una lista elegante puede animarse con pequeños detalles:

li {
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}
li:hover {
 transform: translateX(6px);
 box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

Este tipo de animaciones son las que más uso en proyectos reales: aportan feedback sin distraer.

Listas animadas con efectos 3D (cuando quieres destacar)

Cuando el objetivo es más visual o experimental, podemos ir más lejos. En mis pruebas con CSS 3D, descubrí que rotar el contenedor y los ítems en sentidos opuestos genera efectos muy llamativos.

Efecto acordeón en el eje X

ul {
 transition: transform 1s;
}
li {
 transition: transform 1s;
}
ul:hover {
 transform: rotateX(180deg);
}
ul:hover li {
 transform: rotateX(-180deg);
}
Rotación en el eje Z
ul:hover {
 transform: rotateZ(180deg);
}
ul:hover li {
 transform: rotateZ(-180deg);
}

Estos efectos funcionan especialmente bien en:

Demos
Landings creativas
Interfaces experimentales

Eso sí, no los usaría en todos los contextos; la elegancia también está en saber cuándo parar.

Cuándo usar listas animadas y cuándo no

Mi recomendación tras experimentar bastante:

✔️ Úsalas cuando:

Quieras destacar secciones concretas
Busques impacto visual
El contenido sea corto

❌ Evítalas cuando:

La lista es muy larga
Es contenido crítico
La animación dificulta la lectura

FAQs sobre CSS listas elegantes

¿Cómo quitar las viñetas de una lista en CSS?
- Con list-style-type: none.
¿Es mejor usar ::marker o ::before?
- Para listas elegantes y accesibles, ::marker es preferible.
¿Se pueden animar listas solo con CSS?
- Sí, usando transition y transform.
¿Las animaciones 3D afectan al rendimiento?
- Si se usan con moderación, no. Evítalas en listas largas.

Conclusiones

Una vez más vimos algunos ejemplos que podríamos considerar interesantes y la gran versatilidad del CSS que se consiguen con unas pocas líneas de código para las animaciones y transiciones; podemos aplicarle los colores que queramos con CSS, podemos variar el tamaño de los listados que en esencia resulta en animar nuestra lista, crear una lista animada con CSS.

Las listas HTML han dejado de ser simples estructuras de datos. Con CSS moderno podemos crear listas elegantes, modernas y animadas, combinando usabilidad y diseño sin depender de JavaScript.

En mi experiencia, una buena lista bien diseñada puede sustituir tablas, menús complejos y componentes enteros, con menos código y mayor claridad. La clave está en empezar por una base sólida y añadir efectos solo cuando aporten valor real.

Aprende a ¿Cómo realizar la transición de un botón en CSS?

Acepto recibir anuncios de interes sobre este Blog.

Se explica cómo crear listas con CSS, las propiedades para variar el tipo de viñeta, posición además de que veremos como crear un menú y efectos para animar nuestros listados o menú empleando las animaciones CSS; veremos algunos efectos curiosos sobre lis

16-12-2025 | 👤 Andrés Cruz

🇺🇸 In english

🏷️Lista 🏷️CSS 🏷️HTML