Con el propósito de diseñar bullets atractivos para páginas web,
configuraremos imágenes para ser mostradas en listas y separar las ideas con
vistosidad. Las viñetas básicas pasan desapercibidas por el usuario, quien omitiría
la información expresada. Por lo tanto, describiremos las propiedades CSS
utilizadas para convertir ilustraciones en viñetas, y cómo aplicar los
espaciados necesarios, a fin de mostrarlas de forma organizada.
Las listas son frecuentemente
utilizadas en páginas web para
expresar un orden ideas. Debido al desarrollo de CSS, es posible insertar imágenes
como bullets o viñetas en español, de una lista, para otorgar mayor
vistosidad. Ambas opciones son favorables y dependen del contexto.
061-01_0709_ilu01.
Ejemplo de tipos de listas
Para insertar una imagen en una
lista es necesario agregar:
- List: para indicar el diseño a una lista.
- Style: para especificar un estilo.
- Image: para delimitar una imagen al estilo de una lista.
- Url: para definir la ubicación de la imagen, y dentro del
paréntesis agregamos el nombre de la misma.
En la siguiente ilustración
tenemos la instrucción completa:
061-01_0709_ilu02.
Declaración de imagen para una lista
En el siguiente código CSS, se encuentra
especificada la inserción de una imagen para una
la lista, sin embargo, vemos cómo se muestra
incompleta.
061-01_0709_ilu03.
Código con declaración de imagen para una lista
El relleno a la derecha de una
lista con padding-left, permite mover
hacia la izquierda el texto, a fin de mostrar completa la imagen. En el ejemplo
de la siguiente imagen, el archivo VK.png
tiene un ancho de 115 píxeles, por ende, es el tamaño especificado. De esta forma, observamos
correctamente la lista con la imagen en cada ítem.
061-01_0709_ilu04.
Declaración de imagen con relleno
Existe un detalle importante a
tomar en consideración cuando definimos una imagen en lista, se trata de
especificar el list-style-type para
un tipo de estilo en lista, cuando la imagen no es soportada por el navegador web, o por el dispositivo del usuario.
En el ejemplo de la siguiente imagen tenemos square o cuadrado en español, por lo tanto, sería la segunda opción
de estilo.
061-01_0709_ilu05.
Declaración de imagen con estilo predeterminado
La caja CSS, creada por elementos de listas, se
modificang con la finalidad de complacer las exigencias del usuario. Debido a
ello, agregamos background al
selector ol, y como valor radial-gradient con colores pink y red, para observar la diferencia entre ambos fondos.
061-01_0709_ilu06.
Declaración de imagen con background
Keynotes
- Debido al desarrollo de CSS, es posible
insertar imágenes como bullets o
viñetas en español, de una lista,
para otorgar mayor vistosidad.
- El relleno a la derecha de una lista con padding-left, permite mover hacia la
izquierda el texto, a fin de mostrar completa la imagen.
- Existe un detalle importante a tomar en
consideración cuando definimos una imagen en lista, se trata de especificar el list-style-type para un tipo de estilo
en lista, cuando la imagen no es soportada por el navegador web, o por el dispositivo del usuario.
MisiónA fin de diseñar viñetas atractivas para páginas web,
crea una lista de pasos necesarios para la configuración de imágenes en listas,
según las recomendaciones oficiales del lenguaje CSS.
Pasos a seguir:
- Crea un
documento HTML.
- Ubica el
estándar oficial de CSS y lee la recomendación sobre la configuración de
imágenes en listas.
- Crea una
lista de pasos en tu docmento HTML para la configuración
de imágenes en listas.
- Crea el
documento CSS y modifica las viñetas y fondo de la lista para hacerla más
atractiva.
Sabrás que has tenido éxito cuando
la lista se muestre correctamente mediante el navegador web de preferencia.
Modifica la lista de pasos según
la practica realizada, compártela en tu vKonnect
y solicita a tus compañeros que agreguen un comentario de optimización.
Tiempo disponible: 3 horas.
CierreMediante la configuración de imágenes en listas,
captamos la atención del usuario en lugares específicos de una página web, y diseñamos viñetas más atractivas,
por lo tanto, serán apreciadas en su totalidad. La precisión y el orden son
determinantes al momento de implementar la propiedad list-style-image.
