Poner una imagen de viñeta en las listas HTML:
Cuando ponemos una imagen de viñeta por medio de CSS usamos la propiedad "list-style-image",si queremos dar aun un poco mas de atractivo podemos utilizar un estilo de borde, el cual esta dado por la propiedad "border-style" y por ultimo para no tenerlo estático podemos aplicar el evento Hover en la lista, así nos dará un efecto cambiante al posicionar el mouse sobre nuestra lista., aplicando todo lo mencionado podemos obtener un resultado similar a este:
- Lista numero 1
- Lista numero 2
- Lista numero 3
- Lista numero 4
Claro el resultado es independiente de la imagen que coloquemos, de esta forma podemos dar un estilo mas atractivo a las viñetas de nuestras listas. Recuerden que ustedes pueden colocar cualquier imagen que a ustedes les parezca mas atractiva, para este ejemplo solo utilizaremos esta imagen y aremos que cambien de posición al momento de que el mouse pase sobre la lista.
Código HTML:
Para nuestro ejemplo usaremos 2 imágenes las cuales serán nuestras viñetas, usaremos 2 sin embargo una de ellas sera la misma imagen pero colocada al revés, la cual usaremos con la propiedad Hover, así cuando el mouse se posicione sobre la lista se mostrara la otra imagen y nos dará una sensación de que la imagen se voltea, como la muestra del ejemplo de arriba.
Código HTML:
Para nuestro ejemplo usaremos 2 imágenes las cuales serán nuestras viñetas, usaremos 2 sin embargo una de ellas sera la misma imagen pero colocada al revés, la cual usaremos con la propiedad Hover, así cuando el mouse se posicione sobre la lista se mostrara la otra imagen y nos dará una sensación de que la imagen se voltea, como la muestra del ejemplo de arriba.
En los estilos CSS seleccionamos los elementos "ul" y "li", los cuales intervienen en la creación de las listas, así podemos dar estilos a estas por medio de sus elementos, en este ejemplo damos un estilo a los bordes mediante "border-style" y a las viñetas por medio de "list-style-image", luego aplicamos "li:Hover", el cual al posicionar el mouse sobre la lista, nos muestra los estilos que especificamos en este elemento, el evento Hover, es aquel que es llamado al momento de posicionar el mouse sobre cualquier objeto que contenga mencionado evento.
Podemos modificar las viñetas de nuestras listas a nuestro antojo, ahora que sabemos que se pueden poner imágenes a estas, y se verán mucho mas atractivas si las adornamos con Bordes así como se muestran en el ejemplo, en fin ya es cosa de cada uno mostrar sus listas como mejor les parezca.
Recordar que lo mencionado en este tutorial es solo una idea de adornar a gusto nuestras las viñetas de nuestras listas, si conocen alguna otra forma de hacerlo no duden en compartirlo.
PD: se que el estilo dado a estas viñetas, no esta muy atractivo, pero el objetivo de este Post es dar una idea de lo que podemos hacer con estas, si tienen un mejor esquema sobre estilos a viñetas por favor compartanlo con nosotros.
PD: se que el estilo dado a estas viñetas, no esta muy atractivo, pero el objetivo de este Post es dar una idea de lo que podemos hacer con estas, si tienen un mejor esquema sobre estilos a viñetas por favor compartanlo con nosotros.
Cualquier duda o Aporte Hacerlo por Comentarios. Gracias por su Tiempo!.
Amigo, con que codigo pusiste los botones para seguirte en Facebook, twitter, y google? te agradezco si me ayudas, quiero ponerlos en mi web.
ResponderEliminarHola Bryan para los iconos de la parte inferior tengo una entrada dedicada a como ponerlos y esta con todo codigo, si deseas visita:
EliminarIconos Sociales En el Blog
Esta genial tu codigo pero uso blogger y no me aparecen los efectos de las tablas double y dashed ¿como podria solucionarlo? lo mas probable es que mi plantilla lo impide.
ResponderEliminar