Como verán, solo es cuestión de jugar con la propiedad background-position y en lugar de tener por ejemplo 5 imágenes para reemplazar por cada estado tienen solo una que contiene todos.
Es recomendable poner el atributo title a los enlaces
Background Position
31 / mayo / 2007ShowTracksTrackbacks/Pings
-
[...] Paseandome por Infected-FX veo un genial tutorial que habla sobre la imagen de fondo en hipervínculos y las posibilidades de cambiarla de posición bajo ciertos eventos usando pseudo-clases (como :hover o :active). No tardé en comentar y decir que no sólo se puede aplicar a los <a>’s, sino que también podemos usarlos en otros elementos (como divs); pero bajo mi emoción olvidé mencionar que IE no soporta pseudo-clases en elementos que no sean <a> (cosa que eden me recordó) y que me recuerdan a mi anterior entrada sobre links en cajas. Fue entonces que, platicando con un amigo, recordé los viejos tiempos del “Web 1.0″ y el extraño y antiguo término DHTML y dí con una forma de lograr que las pseudo-clases funcionaran en Internet Explorer también. Por cierto, solo he creado un archivo para las pseudo-classes :active y :hover. Pensaba meter también :focus; pero al recordar los problemas que existen entre estas dos clases entre los navegadores (No solo IE… De hecho, después de Firefox, es el que mejor se comporta) decidí dejar afuera :focus. Probablemente también se puedan arreglar pseudo-clases como :first-child o :lang; en cuanto tenga un poco más de tiempo veré si puedo arreglarlas. [...]
-
[...] Un buen tutorial creado por InfectedFX pasó por paso sobre todo lo que necesitas saber sobre el posicionamiento de fondo (background-position) una propiedad de CSS que te permitirá poner diferentes imágenes a los enlaces haciendo uso de la etiqueta a y sus atributos. Ver Tutorial [...]
-
[...] permitirá poner diferentes imágenes a los enlaces haciendo uso de la etiqueta a y sus atributos. Ver Tutorial Publicado en CSS, Tutoriales, Web [...]
-
[...] por Infected-FX veo un genial tutorial que habla sobre la imagen de fondo en hipervínculos y las posibilidades de cambiarla de posición bajo ciertos eventos usando pseudo-clases (como [...]
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