¿Quién no ama una buena lista? Los usamos constantemente en nuestro marcado para una variedad de situaciones diferentes. Hoy vamos a echar un vistazo a algunos ejemplos sencillos y prácticos que puede robar y usar en su propio trabajo.
Comenzamos con una divertida lista vertical animada, luego diseñamos una lista con miniaturas y texto, otra solo con imágenes y, finalmente, una lista ordenada donde los números tienen un estilo diferente al del resto del tipo. ¡Hay un montón de cosas maravillosas que aprender aquí, así que vamos a saltar!
HelvetiList
Para nuestra primera lista, vamos a comenzar con un diseño simple, minimalista pero súper atractivo que depende en gran medida de la belleza de la tipografía. Haremos uso de algunos estilos finos de Helvetica y lanzaremos una animación suave al pasar el ratón.
Manifestación: Echa un vistazo a la demostración y el código en CodePen.
HTML
Nuestro marcado aquí es muy simple. Cree un div (probablemente querrá una clase o ID en un proyecto en vivo), luego agregue un encabezado y una lista desordenada con cinco elementos de lista.
CSS
Como vimos en la captura de pantalla anterior, los elementos de la lista utilizan separadores sutiles de tipo muy fino y un estado de desplazamiento que aumenta la fuente. Para comenzar, dale al div un ancho y configura tus estilos h2 genéricos.
A continuación, aplique un tipo de estilo de lista de ninguno para deshacerse de las viñetas y restablecer los márgenes o el relleno que pueda haber. Para los elementos de la lista real, apliqué un borde inferior ligero, que proporciona ese pequeño divisor. Usé el selector de último hijo, pero realmente no es gran cosa si hay un navegador que no lo reconoce y decide lanzar un borde adicional en la parte inferior.
También tenga en cuenta que las dos veces que configuro la fuente, utilicé la abreviatura de CSS y apliqué diferentes pesos. Para finalizar, apliqué algunos estilos de enlace y configuré la transición para ampliar la fuente y cambiar el color de fondo al pasar el cursor.
Lista de miniaturas
Un formato realmente común que verás en las listas es tu miniatura y texto básicos. configuración, que es una excelente manera de agregar un interesante interés visual a una lista aburrida de párrafos.
Este es un estilo de lista extremadamente versátil que puede utilizar en cualquier número de proyectos. Vamos a ver cómo funciona.
Manifestación: Echa un vistazo a la demostración y el código en CodePen.
HTML
El HTML en este es un poco más complicado. Cada elemento de la lista debe tener tres hijos: una imagen, un título y un párrafo. Las imágenes que estoy usando son de 100px por 100px, así que tenlo en cuenta si quieres personalizar esto para que tenga un tamaño diferente. En general, todo esto es un marcado realmente simple que no debería hacerte tropezar en lo más mínimo.
CSS
Aquí flotamos los elementos de nuestra lista a la izquierda, colocamos un borde solo en el lado derecho, eliminamos los estilos de enlace predeterminados y configuramos los míos, y luego diseñamos los estados activo y activo.
Lista de grandes números ordenados
¡No olvidemos que todas las listas no son listas desordenadas! Definitivamente hay muchas aplicaciones útiles para listas ordenadas. Una cosa realmente difícil de hacer con las listas ordenadas es diseñar los números de manera diferente al otro texto. Vamos a ver cómo funciona esto.
Manifestación: Echa un vistazo a la demostración y el código en CodePen.
HTML
Ahora, cómo construí esto va a ser muy controvertido. Como puede ver, en realidad estoy ingresando los números manualmente a pesar del hecho de que HTML realmente lo hará automáticamente por usted. Aunque hay una buena razón para esto.
Para iniciar esta idea, lancé un párrafo a los elementos de la lista, luego codifiqué el tipo li y el tipo li> p de diferentes maneras. Sin embargo, tratar de hacer que todo se alinee correctamente con este método fue una pesadilla total. En última instancia, para solucionarlo, el CSS era tan desordenado y desagradable que lo abandoné por completo a favor de este método más simple que en realidad permite un CSS claro y simple.
CSS
Como puede ver en el código a continuación, lo que hice aquí fue deshacerse de los números predeterminados y luego establecer mis intervalos en absoluto para poder empujarlos hacia la izquierda de los párrafos, lo que a su vez requería un relleno adicional en los párrafos. Puede que no sea la solución más bonita en cuanto al código, pero es la forma más breve y directa que se me ocurre para hacerlo sin errores de posicionamiento extraños.
Conclusión
Ahí lo tienen, cinco estilos de listas súper simples pero muy prácticos para que pueda copiar y pegar en su propio código. Si tiene alguna otra lista de ideas creativas que le gustaría compartir, háganoslo saber en los comentarios a continuación.