Seguramente te habrás fijado en que en la mayoría de páginas web y de blogs la gente suele usar siempre el mismo tipo de listas. Ya sabes, las típicas listas con el punto a la izquierda que tienen un padding/margin a la izquierda, que la verdad es que son un tanto sosas y feas a mi parecer.
También puede ser que te hayas fijado en que en esta página usamos un tipo de listas más original y que en mi opinión (que a gustos colores supongo) luce más bonito y elegante. Pues bien, hoy te explicaré qué es lo que tienes que hacer para conseguir un diseño de lista igual o similar (aplicando tus colores corporativos y demás claro). Te dejo una de muestra:
¡Consulta nuestros servicios!
- Hola
- Soy una lista
- De ejemplo
Ya te adelanto que no es muy rebuscado el método, pero tienes que conocer ciertos aspectos de CSS para llevarlo a cabo; aspectos que por supuesto trataremos en este post en detalle. ¡Al lío!
Tabla de Contenidos
Cómo Quitar y Reemplazar el Punto de las Listas
Comencemos con lo que probablemente sea lo que más te interese de este post, que es el método con el cuál puedes eliminar ese punto que tienen las listas <ul> (listas desordenadas) por defecto en las páginas web y cambiarlo por otro tipo de elemento que quede mejor que ese punto.
Eliminar el Punto
Comencemos con el código para eliminar el punto:
ul {
margin-left: 0;
list-style: none;
}
Recuerda que si aplicas estos estilos a los <ul> estarás afectando a todas las listas desordenadas de tu página, si solo quieres que se aplique a algunas listas en concreto puedes usar una class.
El caso, aquí lo que realmente aplica el cambio es la orden «list-style», al ponerla como «none» le estamos diciendo que los elementos dentro de las listas (los <li>, pero aun siendo así debemos aplicarlo al <ul>) no usen ningún tipo de decoración (que en este caso es el punto).
El «margin-left» es para eliminar el margen a la izquierda que suelen tener las listas por defecto, a mí me gusta más cómo queda así, alineado con los párrafos (tienes arriba el ejemplo).
Modificar el punto por un cuadrado o por lo que quieras
Una vez lo añadamos eliminado, ahora tenemos que definir qué es lo que queremos que aparezca en lugar del punto. Existe una orden de CSS denominada como «list-style-type», pero la verdad es que esta orden nos limita bastante, por lo que usaremos un truco que nos permitirá crear cosas bastante más vistosas y originales.
Comencemos con el código y abajo te explico en detalle:
ul li:before {
content: "■";
color: #FFFFFF;
padding-right: 10px;
}
Como ves estamos usando :before, un selector que sirve para seleccionar lo que hay justo antes de en este caso, la etiqueta <li%gt;. Al añadir la orden de «content» en este selector, podremos elegir el contenido que queremos que aparezca justo delante de todos nuestros <li%gt;.
Yo he usado un cuadrado porque me gusta bastante como queda, pero te dejaré algunos otros caracteres que puedes usar (basta con que los copies y los pegues dentro de las comillas de «content» tal y como he hecho en el código de arriba:
■ □ ▣ ▶ ▷ ★ ☆ ● ☻ ☺ ➜
Y estos son solo algunos ejemplos, hay tropecientos iconos de este tipo (son caracteres Unicode). Te dejo un link de Wikipedia con el listado de todos ellos (de verdad que son muchísimos).
Mediante la orden «color» puedes elegir el color que quieres que tenga el icono de la lista (en el ejemplo he puesto #FFFFFF, que es el blanco más blanco que pueden reproducir los navegadores; en mi página web uso uno de mis «colores corporativos», que es lo suyo, aunque siempre podrás usar el negro o el blanco, que eso suele quedar bien siempre), pon el código hexadecimal del color que quieras y listo.
El «padding-right» es opcional, pero es para que haya un poco más de separación entre el icono y el texto. Añade la cantidad de pixeles que tú consideres o directamente quítalo si te gusta como está por defecto.
Este Truco Tiene una Sola Pega
El problema de este truco es que tiene una pequeña pega… una pega que al menos en mi caso no me importa, pero puedo llegar a entender a aquellos que sí consideren que esto es un problema. Crearé una lista con un elemento <li> con bastante texto para que así puedas ver a qué me refiero:
- Hola, soy una lista que contiene mucho texto, el suficiente para que veas el pequeño problema que comenta Silver que tengo… aunque él dice que a él le gusta cómo soy.
Como puedes ver en la lista de ejemplo de arriba, cuando el elemento <li> tiene el suficiente texto como para que se cree un salto de línea, este no se queda al mismo nivel que el texto de arriba como suele ocurrir con las listas por defecto.
A mí la verdad es que ese efecto me gusta porque queda todo como más compacto, pero entiendo que habrá gente a la que eso le rechine un poco (a gustos colores, ya sabes). En ese caso te recomiendo que uses «list-style-type», tienes estas opciones:
- list-style-type: circle;
- list-style-type: decimal;
- list-style-type: disc;
- list-style-type: georgian;
- list-style-type: kannada;
- list-style-type: trad-chinese-informal;
- list-style-type: square;
El problema es lo que te comentaba más arriba, que usar este sistema nos limita bastante ya que tenemos bastantes menos opciones a elegir y encima no podremos cambiarle el color a nuestros «puntos de la lista» (a lo que sea que elijas, vamos); cosas que a mi parecer hacen que no valga demasiado la pena.
Y por si te estás preguntando… ¿no puedo usar el truco que comentas de «list-style: none» y «content» en el «li:before» de modo que quede con esa especie de margen para el texto de las listas tal y como ocurre en las listas por defecto? Pues odio decirlo, pero si existe una forma de lograrlo, en mi caso no he conseguido realizarlo (y lo he intentado varias veces).
Si sabes cómo se puede hacer eso te agradecería mucho que añadas un comentario a este post para (si veo que funciona) actualizarlo con dicha información para que así la gente que lea este post tenga esa información más a mano (te daré créditos en el post, por eso no te preocupes).
¡Y eso es todo! ¿Qué opinas de este método para crear listas originales y elegantes mediante CSS? ¿Lo has puesto en práctica en alguno de tus proyectos personales o de tus clientes? ¿Conoces el método para resolver «la pequeña pega» que tiene este sistema? ¡Deja tu comentario y hasta la próxima!
Más información aquí.
