Ahora bien, en realidad podemos usar 4 estados en los enlaces, uno que yo sinceramente nunca utilizo, pero bien sería bueno empezar a tomarlo en cuenta. No entro en detalles con el soporte de navegadores xP porque creo que esto ya lo soporta desde IE4.0.
Para eso utilizaremos la siguiente imagen.
Tomando en cuenta que ya tenemos nuestra lista armada y parte de la CSS lo único que nos resta será añadirle el estado a:active a nuestro archivo:
CSS:
-
.listaEjemplo li a:active{
-
color:#a6ed36;
-
background-position:0px -76px;
-
}
Agregando esto, nuestros enlaces ahora también cambiarán al hacer "clic" sobre ellos, les dejo una imágen de como se vé cuando le doy clic al segundo item de la lista.
Entonces nuestra CSS completa quedaría así:
CSS:
-
.listaEjemplo{
-
list-style:none;
-
}
-
.listaEjemplo li{
-
border-bottom:1px solid #CCC;
-
padding:10px 0px;
-
}
-
.listaEjemplo li a{
-
background-image:url(icon_listTwo.gif);
-
background-repeat:no-repeat;
-
padding:5px 0px 5px 30px;
-
}
-
.listaEjemplo li a:link{
-
color:#0099CC;
-
background-position:0px 0px;
-
}
-
-
.listaEjemplo li a:visited{
-
color:#669900;
-
background-position:0px -50px;
-
}
-
-
.listaEjemplo li a:hover{
-
color:#FF6600;
-
background-position:0px -27px;
-
}
-
-
.listaEjemplo li a:active{
-
color:#a6ed36;
-
background-position:0px -76px;
-
}
Y claro, no puede faltar el ejemplo que puede ver aquí.
11 comentarios para Background Position
¡Genial tutorial brother! Es increíble lo accesibles que podemos convertir nuestros links con una simple imagen y un cambio de posicionamiento, ¿qué no?Y no está de más recordar que estos efectos pueden aplicarlos, no solo a <a>, sino a cualquier tag que quieran usando las mismas pseudo-clases (pienso en formularios ene stos momentos).
¡¡Un saludo!!
Muy bueno el tuto!
Lo wapo sería aprender mediante php a hacer ke el current fuera automatico, me explico:
aki para ke el icono te salga de current tienes ke ponerle id=”current” no? seguro ke hay alguna forma de hacer ke esto lo haga php solito, osea, ke la sección ke enlace a la pagina en la cual estamos aparezca como id=”current”… o me ekivoco?
por lo demas… esta fantastico, ya no usare mas imagenes distintas para los efectos hover, visited, etc
metal_orgy creo ke no es cierto lo ke dices. hasta ie6, por ejemplo, no podias poner un li:hover o un li:visited. creo ke estas propiedades son para segun ke tags en concreto!
Si, olvidé mencionar que, para variar, IE no gusta de las pseudo-clases; pero no se sacrifica la accesibilidad por usarlos. Me explico: Si agregas un li:hover a tu diseño para cambiar de color de fondo, funcionará en todos los navegadores menos en IE6 o menos. ¿Resultado? IE6 no tendrá el efecto, pero seguirá viendo la información mientras que todos los demás navegadores disfrutarán de un bonito efecto en :hover.
Creo que debemos de dejar de buscar que nuestra web se vea exactamente igual en IE que en los demás navegadores y simplemente aceptar que IE jamás será tan bonito como los demás (pero sin sacrificar la información para este navegador, claro está).
¡Excelente truco! Bueno, mas que truco es un excelente manejo de CSS. Apenas tenga un tiempito lo implementaré en el nuevo diseño de mi web
Ah, por cierto, estoy de acuerdo con metal_orgy, IE jamás será tan bonito como los demás jejeje. ¿Ya actualizaron al Firefox 2.0.0.4? =P
wua!!! la verdad que sos increible cada ves que entro al blog me sorprende una caso nueva… segui asi
nos vemos,
Lucas.
No tiene mucho que aprendi esta técnica, pero aca me quedan más claras algunas cosas.
Excelente tutorial!
Buen material como siempre, deberias agregar una seccion en tu blog para tus tutoriales
Saludos
Buen tutorial amigo, gracias por el ^_^
Olá,
Parabéns pelo tutorial, está bem elaborado e ilustrado.
Mas tenho dois reparos a fazer:
1. A posição do CSS shorthand é Vertical – Horizontal
que significa TOP > RIGHT > BOTTOM > LEFT igual a
ao rodar dos relógios. O deseho está tem de ser corrigido.
2. background-position: 0px 0px; é igual a background-position:0 0;
Lastima que no acabe de funcionar en internet explorer 6
buen trabajo