Algunos efectos interesantes que se pueden lograr con listas en CSS

30-04-2015 - Andrés Cruz

Algunos efectos interesantes que se pueden lograr con listas en CSS

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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; 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

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.

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

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>

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.

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.

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.

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.

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.

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).

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.


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!