Crear un efecto de línea de tiempo en numeración y viñetas

Tiempo estimado de lectura: 15 minutos

 

Cómo crear un efecto de línea de tiempo en numeración y viñetas

Es posible que hayas visto el efecto de línea de tiempo en muchos sitios web. Por lo general, este tipo de efectos se lleva a cabo mediante el uso de plugins, en esta ocasión voy a mostrarte cómo podemos hacerlo mediante un sencillo código CSS.

¿Estás preparado para darle a tus numeraciones y viñetas un nuevo aspecto?, ¡pues vamos a ello!.

Antes de comenzar

Lo primero y antes que nada, tengo que advertirte que vamos a manipular la forma en la que WordPress (en realidad es el propio HTML), muestra las numeraciones y las viñetas. Esto significa, que TODAS las numeraciones y TODAS las viñetas que tengas en tu sitio web quedarán afectadas por este estilo y se verán como líneas de tiempo.

Pero no te preocupes, también te enseñaré una forma rápida y sencilla de que este efecto sólo afecte a aquellos <ol> o <ul> que tú decidas.

Códigos para hacer el efecto de línea de tiempo

Como siempre hacemos últimamente. vamos a trabajar con un código muy sencillo, es un simple código CSS, por lo que puedes ponerlo directamente en el Personalizador de tu sitio web. Ya sabes, en el menú Apariencia, Personalizar.

El código CSS que vamos a utilizar es el siguiente:

ol {
list-style-type: none;
}
li {
position: relative;
margin: 0;
padding-bottom: 1em;
padding-left: 20px;
}
li:before {
content: '';
background-color: #c00;
position: absolute;
bottom: 0px;
top: 0px;
left: 5px;
width: 3px;
}
li:after {
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='%23c00' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E");
position: absolute;
left: 0;
top: 2px;
height: 12px;
width: 12px;
}

Y ahora vamos a ver si funciona. Para ello debemos crear una lista ordenada (en este caso, pero también puedes crear listas desordenadas).

EL código HTML será el siguiente:

<ol class="efecto">
<li>Opción 1</li>
<li>Opción 2</li>
<li>Opción 3</li>
<li>Opción 4</li>
<li>Opción 5</li>
</ol>

Nuestro efecto se verá así, pero no te preocupes, enseguida lo arreglamos.

Este efecto se aplica a TODOS los elementos <ol> y <ul>Este efecto se aplica a TODOS los elementos <ol> y <ul>

¿Qué hace este código?

Como puedes ver en la primera línea, cada vez que se encuentre un elemento <ol> se le desactiva el tipo de lista para que no muestre la bolita. A continuación se posicionan los elementos de lista mediante los parámetros position, margin y padding. De nuevo vuelve a colocar los elementos de lista antes y después con un color rojo y le dibuja una línea.

En definitiva, cada elemento de la lista <li> tiene un antes (before) del pseudo-elemento que está vacío (content: ‘ ‘) en cuanto al contenido, pero está marcado como 3 píxeles de ancho, una separación de la bolita de 5 píxeles y un color de fondo rojo. Esto crea la línea antes de cada <li>.

Este código para el efecto de línea de tiempo afecta a TODOS los <ol>. Solución

Como hemos dicho anteriormente, este código afecta a TODOS los <ol> de tu sitio, para hacer que sólo afecte a aquellos que tú quieras, solo tenemos que crear una clase y aplicarle a ese <ol> la clase que hemos creado.

En mi caso, la clase se llama .efecto y la colocamos en los <li> del código anterior. posteriormente, tenemos que aplicarle la clase .efecto al <ol> general que contiene los elementos que queremos que tengan este efecto.

Al aplicarle la clase al <ol> nos evitamos tener que aplicársela a todos los elementos de lista, se lo aplicamos al contenedor y él se encarga de hacer que todos los elementos de lista que dependen de él, queden afectados por esta clase.

Es decir, el código CSS definitivo será este:

ol {
list-style-type: none;
}
.efecto li {
position: relative;
margin: 0;
padding-bottom: 1em;
padding-left: 20px;
}
.efecto li:before {
content: '';
background-color: #c00;
position: absolute;
bottom: 0px;
top: 0px;
left: 6px;
width: 3px;
}
.efecto li:after {
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='%23c00' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E");
position: absolute;
left: 0;
top: 2px;
height: 12px;
width: 12px;
}

Y el código HTML que vamos a utilizar será este:

<ol class="efecto">
<li>Opción 1</li>
<li>Opción 2</li>
<li>Opción 3</li>
<li>Opción 4</li>
<li>Opción 5</li>
</ol>

Y el resultado final será este:

Resultado final de cómo crear un efecto de línea de tiempo con numeración y viñetas
Resultado final de cómo crear un efecto de línea de tiempo con numeración y viñetas


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *