Background Position Publicada el Jueves 31 de Mayo de 2007 a las 1:55 pm por Infected-FX
Todo lo que necesitas saber sobre el posicionamiento de fondo (background-position) una propiedad de las CSS que nos permitirá poner diferentes imágenes a nuestras listas haciendo uso de la etiqueta a y sus atributos.
A esto me refería un poco con el “meme” de ser un poco quisquilloso con las cosas, al momento de hacer una lista ó alguna cosa que requiera roll-over el “pequeño” espacio que queda entre la carga de dos imágenes me volvía loco, no me gustaba :P pero era la única forma que había encontrado de hacer eso, después metiéndome más a fondo en esto descubrí que se podía hacer solamente jugando con la posición del fondo, eso es lo que veremos en este tutorial.
MeTaL_oRgY
Mayo 31, 2007 a las 4:30 pm
¡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!!
Eden
Mayo 31, 2007 a las 4:33 pm
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 :)
Eden
Mayo 31, 2007 a las 4:36 pm
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!
MeTaL_oRgY
Mayo 31, 2007 a las 5:41 pm
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á).
Gregorio Espadas
Mayo 31, 2007 a las 6:13 pm
¡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
Lucas
Junio 1, 2007 a las 11:55 am
wua!!! la verdad que sos increible cada ves que entro al blog me sorprende una caso nueva… segui asi
nos vemos,
Lucas.
Francisco
Junio 2, 2007 a las 10:41 pm
No tiene mucho que aprendi esta técnica, pero aca me quedan más claras algunas cosas.
Excelente tutorial!
EmpireFX
Junio 3, 2007 a las 11:03 am
Buen material como siempre, deberias agregar una seccion en tu blog para tus tutoriales :P
Saludos
Nikko
Junio 3, 2007 a las 4:01 pm
Buen tutorial amigo, gracias por el ^_^
José Monteiro
Junio 4, 2007 a las 3:32 am
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;
oberkom
Junio 8, 2007 a las 5:52 am
Lastima que no acabe de funcionar en internet explorer 6
buen trabajo