Cookies en Outbook

Esta web utiliza cookies propias para ofrecer una mejor experiencia. Al navegar, aceptas dichas cookies.
  • Más información acerca de las cookies

Outbook

UI-Dev & more

CSS: Personalizar viñetas en listas desordenadas

Cuando se quiere una viñeta personalizada para listas desordenadas en XHTML no hay más que crear la imagen para la viñeta, y después adaptar la hoja de estilo para hacer la personalización.

Primero hay que definir las reglas para la etiqueta ul:

ul {
padding-left: 0; /*Limpieza de márgenes (se puede cambiar)*/
margin-left: 36px; /*Indentado de la lista (se puede cambiar)*/
list-style-type: none; /*Quitar estilo de viñeta*/
}

Y después las reglas para la etiqueta li:

li {
background: url(imagen.gif) left center no-repeat;
margin-bottom: 10px;
padding-left: 15px;
}

Ver ejemplo de viñetas personalizadas

Si no dispones de una imagen o no se te ocurre como hacerla puedes encontrar un montón de imágenes en Bullet Madness (la imagen utilizadas en el ejemplo procede de ese sitio).

Publicado

Categorías: