Recetas de estilo de lista

 

 

 


Índice
  1. Los basicos
  2. La ruptura en el medio
  3. Los decimales anidados
  4. La lista invertida de los 10 mejores
  5. Viñetas de imagen
  6. Balas Emoji
  7. Orden “aleatoria” cuidadosamente seleccionada
  8. Contadores de texto personalizados
  9. Interior versus exterior
  10. balas de colores
  11. lista columnada
  12. Numeros de circulos de colores
  13. Símbolos de lista de ciclismo personalizados

¡Las listas son una parte fundamental de HTML! Son útiles en cosas como publicaciones de blogs para enumerar pasos, recetas para enumerar ingredientes o elementos en un menú de navegación. No sólo son una oportunidad para el estilo, sino que también tienen implicaciones de accesibilidad. Por ejemplo, la cantidad de elementos de una lista se anuncia en un lector de pantalla para darle algo de contexto a la lista.

 

Centrémonos en diseñar listas aquí, en su mayoría listas ordenadas y desordenadas (con disculpas por desairar a nuestro amigo con la lista de definiciones), y situaciones de estilo algo inusuales.

Los basicos

Antes de hacer algo demasiado cómodo, sepa que existen bastantes configuraciones que list-style-typepodrían cubrir sus necesidades desde el principio. Diets, plans and health

La ruptura en el medio

Las listas ordenadas pueden starttener el número que desees.

Los decimales anidados

La lista invertida de los 10 mejores

Un solo reversedatributo bastará.

Viñetas de imagen

La mejor opción es utilizar background-imageun pseudoelemento. Uno pensaría list-style-imageque sería el camino a seguir, pero es extremadamente limitado. Por ejemplo, no puedes posicionarlo ni cambiar su tamaño.

Balas Emoji

Orden “aleatoria” cuidadosamente seleccionada

El valueatributo establecerá un elemento de la lista para usar el marcador relevante para esa posición.

Contadores de texto personalizados

Se puede hacer con pseudoelementos para obtener el mayor control, pero también existelist-style-type: '-';

Interior versus exterior

Las cosas se alinean mejor con list-style-position: outside;(el valor predeterminado), pero los marcadores de la lista se muestran fuera del cuadro, por lo que debe tener cuidado de no cortarlos. Podrían colgarse del borde de la ventana del navegador o overflow: hidden;ocultarse por completo. Los dos últimos ejemplos aquí tienen un truco para imitar la mejor alineación mientras se renderiza dentro del elemento.

balas de colores

Tres formas aquí:

  1. ::marker(más nuevo y más fácil)
  2. Estilo clásico de pseudoelemento
  3. background-image(Ésta es una URL de datos SVG para que puedas manipular el color desde el CSS)

lista columnada

El número de columnas puede ser automático.

Numeros de circulos de colores

Símbolos de lista de ciclismo personalizados

Se pueden hacer piezas únicas list-style: symbols()y se pueden hacer juegos reutilizables y @counter-styleluego usarlos. Tenga en cuenta que esto solo es compatible con Firefox en el momento de escribir este artículo.






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Recetas de estilo de lista

Recetas de estilo de lista

Los basicosLa ruptura en el medioLos decimales anidadosLa lista invertida de los 10 mejoresViñetas de imagenBalas EmojiOrden “aleatoria” cuidadosamente se

programar

es

https://pseint.es/static/images/programar-recetas-de-estilo-de-lista-1455-0.jpg

2024-06-13

 

Recetas de estilo de lista
Recetas de estilo de lista

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences