Rollover con CSS y sprites. | Oloblogger A los que alguna vez hayais pinchado en El botón que no hace nada del pie de página, os sonarán estos enlaces. Anteriormente, tanto estos c...

21 de abril de 2010

Rollover con CSS y sprites.

A los que alguna vez hayais pinchado en El botón que no hace nada del pie de página, os sonarán estos enlaces. Anteriormente, tanto estos como el rollover correspondiente, lo tenía hecho con JavaScript, pero desde que descubrí cómo funcionaban los sprites, están construidos mediante esta técnica.

Incluyendo la imagen que forma el texto principal, con este recurso he logrado pasar de 12 solicitudes al servidor por cada visita, a tan sólo 4. Dividir esto por 3 no está mal ¿no? Visto el contador, si lo hubiera hecho desde el principio, en lugar de acumular más de 150.000 solicitudes -cosa que mi servicio de alojamiento ya me estaba penalizando- llevaría sólo unas 50.000. El otro día explicábamos un poco por encima que es esto de los sprites y hoy toca por fin ver cómo se lleva esto a la práctica.

Para construir con esta técnica unos botones que además incluyan un efecto rollover, en primer lugar se necesitan las imágenes que lo van a formar. Lo normal será diseñar dos por botón, una para la simular el reposo y otra para el efecto pulsación. No hay inconveniente en incluir una tercera para el click o incluso una cuarta para cualquier cosa que nos pueda deparar el CSS3. Todo esto es según lo que pensemos hacer.

Una vez creadas, las colocamos ordenadamente en una sola imagen como la de la derecha y ya nos quedamos con un sólo fichero. Cada botón en este caso es de 50x50 pixels por lo que, para contener las 6 imágenes que vamos a utilizar, el sprite tendrá 100x150 px.

Ahora viene lo más importante. Creamos las clases y las pseudoclases que vamos a utilizar y les damos valores. Todo esto debe ir en la hoja de estilo o en el caso de Blogger, antes del cierre ]]></b:skin>

.botonrss, .botonword {
text-indent:-9999px;
overflow:hidden;
margin:0px;
}
.botonrss a {
width:50px;
height:50px;
display:block;
background:url(direccion_sprite) 0px 0px;
}
.botonrss a:hover {
background-position: 0px -50px;
}
.botonrss a:active {
background-position: 0px -100px;
}
.botonword a {
width:50px;
height:50px;
display:block;
background:url(direccion_sprite) -50px 0px;
}
.botonword a:hover {
background-position: -50px -50px;
}
.botonword a:active {
background-position: -50px -100px;
}

Veis que hemos definido una nueva clase por cada boton (botonrss y botonword). La clase principal tiene un text-indent con un valor negativo alto, que en unión del overflow:hidden, nos servirá para que en el caso de que incluyamos texto en el enlace que formará el botón (accesibilidad se llama esto), aquel no sea visible por quedar muy desplazado. Todo ello sin mover también la imagen, que permanecerá dónde debe.

Luego vemos que para los enlaces, se define con exactitud la medida que tendrá el botón (alto y ancho, en el ejemplo 50x50 px) y un fondo posicionado según la ubicación de la imagen base correspondiente a cada uno. Teniendo en cuenta que la primera coordenada es la horizontal y la segunda la vertical, la imagen del botón rss comienza en la posición [0px.0px] y, por tanto, ese es el valor que se debe poner para mostrar el botón normal. Observando el gráfico de la derecha, podemos deducir que las coordenadas para la imagen del botón normal para Word son 50px 0px y eso es lo que ponemos en la clase correspondiente (.botonword a).

Los valores de las coordenadas tienen que ser negativos porque es como si tuviéramos una ventana de sólo 50x50 px, detrás de la cual se ve parte de una alfombra. Siguiendo con el símil, al poner valores negativos tiramos de la esquina superior izquierda de la alfombra (fondo) y la movemos los pixels indicados a la izquierda y arriba respectivamente, viéndose a través de la ventana justo lo que necesitamos ver.

A partir de aquí ya sólo es necesario asignar propiedades a background-position para las distintas pseudoclases que queremos utilizar (en el ejemplo hover y active), calculando en cada caso las coordenadas que les corresponden.

Tal y cómo se ha puesto en el ejemplo (display:block) los botones se quedarán en vertical ocupando distintas líneas, pero no hay nada que un float no pueda arreglar para que queden a la misma altura. Lo que ocurre es que entonces tendremos que echar mano de una capa más, con el ancho de todos los botones junto y que encierre a los DIV que forman los botones. También podríamos utilizar position si fuera necesario.

El último paso será mostrar las imágenes con HTML. Para ello es suficiente con insertar allí dónde queramos que se vean un DIV con la clase correspondiente.

<div class="botonrss"><a href="URL_ENLACE1">Enlace RSS</a></div>

<div class="botonword"><a href="URL_ENLACE2">Enlace Word</a></div>


Y ya tenemos nuestros botoncitos con rollover hechos mediante sprites. Estos de ejemplo tienen un enlace vacío para que trasteeis a gusto:



Mostrar una imagen sin enlace es bastante más sencillo, ya que sería suficiente con definir sólo la clase principal e insertar un div sin contenido.

.imagenrss {
margin:0px;
width:50px;
height:50px;
background:url(direccion_sprite) 0px 0px;
}
.imagenword {
margin:0px;
width:50px;
height:50px;
background:url(direccion_sprite) -50px 0px;
}

<div class="imagenrss"></div><div class="imagenword"></div>



El sprite a utilizar puede ser tan complejo como queramos y contener muchas o pocas imágenes. Lo que prima es disminuir en lo posible el número de solicitudes para cargar imágenes y el tamaño del sprite en relación con lo que ocuparían las imágenes que lo forman por separado.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

46 comentarios :

  1. hola oloman,disculpa
    e visto que debajo de todas tus entradas tienes esto:

    Si te gustó esta entrada, quizás quieras promocionarla ......

    vi un tema aqui de como poner cosas debajo de los temas pero no encuentro el link, me lo pasas?

    ResponderEliminar
  2. Excelente

    Quieres que te confiese algo, desde que en dias pasados anunciaras que ibas a mostrar un ejemplillo de los Sprites en Css, todos los días cada vez que abría firefox hacia click en el Feed para estar pendiente; y vea pues, precisamente hoy que diseñe todas las imagenes que voy a emplear en una nueva plantilla, me das el gusto de ver esta publicación.

    Muy clara la explicación, espero implementarlas en unas cuantas horas y te estaré contando como me va, o si de pronto me llega a surgir alguna duda.

    Un saludo cordial.

    ResponderEliminar
  3. Hola de nuevo Oloman.

    No se, hace un par de horas que te escribi, y luego de ir haciendo las cosas con paciencia, calma y mucho cuidado, me funcionó perfectamente y al primer intento :)

    Te agradezco mucho tu explicación, nos ayuda bastante a hacer frente a las nuevas políticas de Google sobre el tiempo de carga de las páginas.

    Para terminar, Oloman, podría hacerte una pregunta
    ¿Qué tan dificil es alojar dentro de un script grande varios "scripts pequeños?

    Estuve viendo unos ejemplos por ahi y la verdad la palabra ASP.net me embriagó de tanto que aparecia y lo de "alojamiento de tu servidor".

    Pensanado en blogger, ¿será muy difícil?
    Un saludo cordial y hasta siempre.

    ResponderEliminar
  4. Muy útil el post, Oloman; lo he guardado en mi block de notas para tenerlo más a mano el día que me haga falta (también por si un día te da la ventolera y decides que estás harto del blog y de todos nosotros y cierras el kiosco).

    Me da la sensación que se te ha olvidado algún parámetro para el botón de word (no se ve la imagen de color marrón cuando haces clic) en el ejemplo que pones para que "trasteemos". Si es así, dime, ¿es que no pruebas nunca los enlaces y los efectos cuando publicas algo? ¿O es que te gusta ponernos a prueba a ver si estamos atentos? En tal caso, lo suyo sería que instituyeras, con carácter anual, algún premio o, cuando menos, la concesión de una insignia al mérito al seguimiento con distintivo rojo o amarillo.

    :D

    ResponderEliminar
  5. Renzo, tu enlace.

    Felipe, otra confesión. No tengo ni idea de que es eso del asp.net Yo pensaba que era un lenguaje de programación, pero ahora veo que es algo más. Con lo de meter varios scripts en uno solo, no se muy bien a qué te refieres, pero por si fuera esto, puedes meter todos los que quieras juntos, siempre que al principio haya una etiqueta <script type="text/javascript"> y al final su correspondiente cierre </script>

    Chacien, la duda ofende. Siempre compruebo los códigos y el resto de cosas que enlazo o recomiendo. Si alguna vez no lo hago, lo advierto. Lo que ocurre es que no es fácil hacer una entrada con ejemplos funcionando y sin instalarlos al mismo tiempo en mi propia plantilla -imagina como estaría esta si lo hiciera de otra manera-. En este caso, me faltó una palabrilla para que todo funcionara. Ya está arreglado... y no es necesario instituir ningún premio porque ya lo has ganado tú :D

    ResponderEliminar
  6. gracias
    justo lo que buscaba, no sabia que era tan facil.
    Otra cosulta, espero no molestar :D
    no e visto que hayas hecho un tema sobre como pasar el blog a facebook, tengo problemas con ese tema, espero que lo hagas, supongo que varios quisieran saber.
    y mi problema es que cree en face, mi blog con el rss: elrincondefriends.blogspot.com/atom.xml.

    Pero el problema esque e cambiado mi rss, porque quiero subscripciones por mail y use el feedburner y puse este codigo en mi Feed del blog en configurarcion:http://feeds.feedburner.com/ElRinconDeFriends-LaSerie

    y ahora parece que mi facebook no se actualiza con las ultimas entradas, sera que esto causo el problema y cual es la solucion, :(
    gracias!

    ResponderEliminar
  7. Hi again.

    Si Oloman, he leido asi por encimita y parace ser algo que requiere un poco mas de calmita.
    A lo que hacia referencia con lo de los scipts es por ejemplo, en vez de poner varios scripts en el blog para distintas funciones, crear un archivo JavaScript único en el cual se alojen todos los demás, es decir, en vez de "llamar" por ejemplo 4 scripts, llamar solo uno.

    ResponderEliminar
  8. Renzo, voy a intentar hacer una entrada con ese tema de Facebook. Sobre lo del feed, los dos que mencionas deberían funcionar igualmente. Prueba a poner esas direcciones en tu barra de idem y verás que las dos tienen tus entradas actualizadas. Feedburner sólo gestiona el feed original (Atom) pero no lo anula.

    Felipe, depende de cómo tengas instalados esos scripts, pero no hay problema en unir sus códigos, siempre con cuidado de no cometer incorrecciones de sintaxis y de no duplicar variables. Si los tienes en la plantilla, tendrás que hacerlo de la forma que te comenté antes: uno a continuación de otro y todo junto encerrado entre etiquetas SCRIPT. Si los tienes en alojamientos externos, tendrás que juntarlos en un solo fichero. En este último caso, luego no olvides cambiar todas las llamadas para que sean al nuevo fichero.

    ResponderEliminar
  9. hola oloman sigo teniendo problemas con mi facebook

    e importado mi blog desde:
    http://elrincondefriends.blogspot.com/feeds/posts/default

    y todo estubo bien hace 1 semana, ya no se actualizan las entradas

    por fabor nesecito tu ayuda :(

    ResponderEliminar
  10. Renzo, me he puesto a repasar mi propio Facebook y una entrada publicada el día 24 en otro blog que tengo, todavía no ha salido allí. Dos entradas de este blog publicadas en fechas distintas, salieron en Facebook el mismo día.

    Servidor seguro que no ha tocado nada ni en un sitio ni en otro, que pudiera haber provocado eso. Me inclino a pensar que tiene que ser algún problema del propio lector de feeds de Facebook y además, espero que sea eso porque no sabría cómo solucionarlo si fuera de otra manera.

    ResponderEliminar
  11. gracias por contestar oloman, estoy por volverme loco.
    Sigue sin actualizarme mi facebook, y tienes razon, las fechas estan todas malas.....
    en mi feed en el face, estan las ultimas fechas erroneas...
    ¿en caso sea problema del feed se soluciona solo?

    y una ultima pregunta.... en una entrada antigua del año pasado, la cambie la fecha a este año para ponerla como entrada reciente, y creo que apartir de ahi surgío este problema.
    crees q sea eso? :(

    ResponderEliminar
  12. Eso espero Renzo, porque a mí tampoco se me actualizan las entradas. Sobre lo de la entrada con cambio de fecha, no, no creo que tenga nada que ver.

    ResponderEliminar
  13. Te seguire molestando un poco más oloman,
    bueno sigo con el mismo problema del Face.
    Pero veo que usas el RSS Graffiti.

    Crees que eso me ayude?
    y como lo uso?

    ResponderEliminar
  14. Totalmente Renzo. Estuve de viajecillo y por eso no te lo conté, pero justo antes de salir, comprobé del todo que mi Facebook tampoco se actualizaba. Estuve intentando verificar la aplicación que tenía para eso pero no la encontré ¿desapareció? No sé, pero ante eso vi por ahí RSS Graffiti, se me ocurrió probar y hasta ahora.

    La respuesta, de momento, es sí. Con esa aplicación se solucionan los problemas. Para explicar cómo va, antes le tengo que pegar un repaso, porque lo hice rápido y ahora ni lo recuerdo.

    ResponderEliminar
  15. Bueno, con un poco más de tiempo, he visto que un blog Facebook seguía sin actualizar el feed y otro se había recuperado. En este segundo, los posts se duplicaban (feed + RSS Graffiti). Por tanto, lo mejor es que decidas con cual te quieres quedar y elimines el otro si no quieres que te pase lo mismo.

    ResponderEliminar
  16. Gracias oloman.

    Entonces me enseñas como hacer con lo del RSS Grafiti?, en todo caso podrías hacer un tema al respecto, de verdad quisiera arreglar mi face pag. urgente

    La nesecito mucho, ojala que aceptes gracias igualmente :)

    ResponderEliminar
  17. A ver si saco tiempo.

    Es curioso, pero cuando lo tengo, no tengo cosas para postear... y viceversa.

    ResponderEliminar
  18. Verdaderamente me ha resultado útil el post. Ya sabes que por su diseño y contenido mi blog tiene una gran carga de imágenes. Por diversas razones no quiero renunciar a su apariencia aunque sea a costa del tiempo de carga de la página. No obstante, optimizando al máximo las imágenes y con el uso de sprites he notado una mejoría bestial. Partiendo de este post y fijándome en cómo lo hace JMiur he concentrado en varios sprites más de 40 imágenes, y vaya si se nota.

    Lo que no he conseguido es que me funcione el efecto hover creando una subclase, por ejemplo, en el botón "Menú" de la sidebar, sino con javascript, en el propio gadget, modificando un poco un truco tuyo:

    < div style="width:190px; height:36px; background: transparent url(http://lh3.ggpht.com/_zTWlR3yLqpw/S-mbEUbA-cI/AAAAAAAAGQg/rAbL8KVDaoE/Sp_01.png) no-repeat -81px -123px;" onmouseover="this.style.backgroundPosition='-81px -265px';" onmouseout="this.style.backgroundPosition='-81px -123px';">< /div >

    Aunque sólo sea por curiosidad, ¿como tendría que escribir la clase y la subclase y el div correspondiente para que funcione el efecto hover con CSS en este botón en concreto?

    Gracias, amigo.

    ResponderEliminar
  19. Me siento frustrado (snif). Eso es lo que intentaba explicar en este post (snif, snif...)

    Esto debería funcionar si lo pones todo en el gadget:
    <style type="text/css">
    .botonmenu {
    text-indent:-9999px;
    overflow:hidden;
    margin:0px;
    }
    .botonmenu a {
    width:190px;
    height:36px;
    display:block;
    background:url(http://lh3.ggpht.com/_zTWlR3yLqpw/S-mbEUbA-cI/AAAAAAAAGQg/rAbL8KVDaoE/Sp_01.png) -81px -123px;
    }
    .botonmenu a:hover {
    background-position: -81px -265px;
    }
    </style>

    <div class="botonmenu"><a href="URL_ENLACE1">LO QUE QUIERAS. NO SE VA A VER...</a></div<

    Espero no haberme saltado nada ;)

    ResponderEliminar
  20. Pues sí, el último <, debería ser un >

    ResponderEliminar
  21. Perdona si me he expresado mal, y no te sientas frustrado, que el post está muy bien redactado, de hecho, el código funciona y ya lo había probado con anterioridad. Lo que quiero decir es que no he logrado que funcione sólo con el efecto hover, sin enlace, para que cuando alguien pinche no suceda nada aparte de que se visualice la segunda imagen, y esto definiendo la clase en la plantilla, no en el gadget.

    No es que me parezca mal como lo tengo ahora, no hay ningún problema, es para saber si se puede hacer de este otro modo, para aprender cómo hacerlo, por curiosidad, y tenerlo en cuenta para otra ocasión. Si estás muy liado o la cosa tiene alguna complicación no importa, ya te digo que la cosa funciona perfectamente tal y como lo tengo con javascript.

    ResponderEliminar
  22. Chacien, para hacer el rollover con CSS, necesitas enlace forzosamente, ya que el truco está en mostrar un estilo para una situación (enlace) y otro estilo para otra (enlace:hover). Si no hay enlace, no hay posibilidad de dos estados y dos estilos distintos.

    Ahora bien, la solución es sencilla. Usando el código del que hemos hablado, basta con poner un enlace vacío, que al pinchar en él, no hace absolutamente nada:
    a href="javascript:void(0);"

    Espero haberte entendido mejor ahora y que esto sea lo que querías. ;)

    ResponderEliminar
  23. Una cosa más que he aprendido ;). Y añadiendo a la clase "cursor:default;" se vería del todo como yo quiero :). Gracias.

    No obstante, voy a dejar el gadget como está porque consigo el mismo efecto usando menos código; pero ya sé cómo hacerlo si se presenta la ocasión: es lo que quería.

    Lo de poner el enlace vacío me ha venido muy bien, de hecho, ya me había preguntado en más de una ocasión cómo se hacía. También he visto en tu entrada sobre el Mapeado de imágenes que existe un atributo "nohref", ¿también sirve para lo mismo?

    ResponderEliminar
  24. No estoy muy seguro Chacien. Por lo que he visto, NOHREF es más bien un atributo de MAP. Habría que ver si funciona en un enlace normal, aunque me da que quizás no.

    ResponderEliminar
  25. Loque daria yo por una ayudita.Intento hacer un menu horizontal con sprites pero...no soy capaz.¿Alquien tiene un manual paso a paso o para sonovatos?

    Ya se que es simple lo que pido...pero con los sprites es pura frustración.

    gracias

    ResponderEliminar
  26. Lo siento Miguel, pero no soy capaz de explicarlo con más detalle del que he intentado en esta entrada. Puedes releerla y hacer alguna prueba sin menú, para cuando funcione, intentar pasar el concepto a tu menú.
    También puedes ver esta entrada en la que hay varios enlaces que automáticamente generan el sprite y además te facilitan el código para mostrar los distintos elementos.
    Suerte.

    ResponderEliminar
  27. Muchas gracias por la información.
    He ensayado el concepto en una entrada. Como tenia que poner seis imágenes del mismo tamaño (108x108px), he pegado una tras otra y he compuesto una sola imagen. Una vez conseguida la url de esa imagen he puesto el estilo al principio de la propia entrada:
    <style type="text/css">
    .spritexx {
    background-image : url(url de la imagen);
    background-color : transparent;
    background-repeat : no-repeat;
    }
    </style>
    Después, para insertar la primera imagen individual (la de más a la izquierda), he puesto:
    <div class="spritexx" style="background-position: -0px -0px; height: 108px; width: 108px;"></div>
    Para la segunda sería lo mismo pero con
    background-position: -108px -0px;
    La tercera sería
    background-position: -216px -0px;
    y así sucesivamente. La duda es si poner todo ello dentro de una entrada en vez de en la plantilla o en un gadget traerá alguna consecuencia negativa, aunque de momento veo que funciona perfectamente.
    Por otro lado si esto también reduce las solicitudes al servidor hasta el punto que merezca la pena usarlo.
    Muchas gracias.

    ResponderEliminar
  28. No hay ningún problema en poner el código en una entrada y de hecho, lo que ves aquí está todo grabado en el post, de la misma manera que cuentas.

    Tal como tú lo has hecho, se verán tres imágenes sin problemas, pero no se apreciará el efecto HOVER de las tres que se supone que se activan al pasar el puntero por encima de ellas. Eso es porque ese efecto no lo puedes poner más que en la parte de estilo. Yo al menos, no conozco la manera de meterlo en una etiqueta STYLE dentro de otra etiqueta (un DIV en tu caso).

    Con respecto a si merece la pena, eso depende de cada cual y de cada sitio. A mí si me bajaron considerablemente las solicitudes y evité errores de acceso por sobrecarga de estas.

    En el ejemplo que planteas, sería dividir por 6 las solicitudes correspondientes a esas imágenes si las pones todas juntas en una sola. Sin embargo, si tienes Blogger u otra plataforma gratuita, este tema nos da igual, porque al menos de momento, no nos penalizan si son más solicitudes, ni nos recompensan si son menos.

    Hay una ventaja adicional si utilizas el efecto rollover con este sistema y es que la carga de la segunda imagen es inmediata. En ocasiones, también ahorras espacio de almacenamiento.

    Lo dicho... ahí está y a unos les convendrá y a otros no.

    ResponderEliminar
  29. Gracias por la respuesta.
    He notado alguna diferencia sin mucha importancia con este método:
    Las imágenes no pueden arrastrase y soltar cuando las tratas desde el editor de entrada, pestaña Redactar. Si se quiere mover la imagen hay que hacerlo desde Edición HTML.
    No se ven las imágenes en los lectores de feed, sólo están los huecos. Tampoco en envíos por correo electrónico.
    Una vez publicadas, si se hace clic sobre ellas con el botón derecho, no aparece el menú contextual que hace referencia a la imagen (guardar, imprimir, etc.).

    ResponderEliminar
  30. Todo eso está provocado por la misma razón: la imagen no es una imagen al uso, sino un fondo. Lo que hagas con CSS no se verá en esos sitios que comentas (editores y lectores).

    El botón derecho se puede utilizar con las que no tengan enlace con la opción "Ver imagen fondo", que te mostraría el sprite completo. Sin embargo, las que tienen enlace activan otras opciones relacionadas con este.

    Como decía esto es una ventaja o desventaja dependiendo de lo que se quiera.

    ResponderEliminar
  31. Hola Oloman, que tal!, te felicito por tu blog y tu buena disposición.

    Sería posible poner un ejemplo (en codigos) de como has puesto horizontales los dos botones rss & word.


    Un abrazo y gracias de antemano.

    ResponderEliminar
  32. Se me olvido el enlace, lo siento.

    ResponderEliminar
  33. Hola Jonas. Se hace metiendo las dos imágenes en un div del tamaño de ambas y luego etiquetando las clases con SPAN en lugar de DIV para evitar el display:block; que por defecto lleva esta última etiqueta y que provoca un salto de línea:

    <div style="margin: 0px auto; width: 100px;"><span class="botonrss"><a href="javascript:void();">Enlace RSS</a><span class="botonword"><a href="javascript:void();">Enlace Word</a></span></span></div>

    ResponderEliminar
  34. Oh perfecto! lo voy a arreglar enseguida, había encontrado una solución parche, encerré la DIV de cada botón en una celda (con tablas)pero prefiero que quede de la manera legal.
    Gracias y felicitaciones nuevamente!

    ResponderEliminar
  35. Hola.
    Muy buen ejemplo pero no soy capaz de poner los botones horizontalmente. El código que pusiste un poco más arriba no funciona. Hay que retocar también el CSS ???
    1 saludo. Muchas gracias.

    ResponderEliminar
  36. Para ver si funciona (luego tendrás que realizar tus propios ajustes) tendrías que utilizar la primera imagen que se da, así como los dos primeros códigos que se reproducen. Prueba con eso antes de nada.

    Luego, como decía en el comentario #34, cambia el DIV por un SPAN.

    ResponderEliminar
  37. Hola de nuevo. Muchas gracias por la rapidez en la contestación.
    Con lo que me indicas es con lo que he realizado mis pruebas y no funciona.
    Deja uno encima del otro :(

    ResponderEliminar
  38. PD.
    Se me ha olvidado comentarte que las pruebas las estoy haciendo con 1 fichero .html, otro .css y la imagen .jpg

    ResponderEliminar
  39. Bueno, ya lo he solucionado:

    class="botonrss" style="float:left;"
    class="botonword" style="float:right;"


    Un saludo!

    ResponderEliminar
  40. Jose. Es otra forma, claro. Siento no haberte contestado antes, pero la parte buena es que lo solucionaste por tí mismo ;)

    ResponderEliminar
  41. Al fin entiendo como funciona! EL rollover sencillo no lo he podido aplicar al footer de los post en los enlaces de navegacion por cosproblemas con unfloat supongo, así que tendre que intentar con este! XD Espero que me salga bien.

    Gracias por la info! El cabezota de mi estaba preguntando por esto la vez pasada, sin saber que ya había un post con la respuesta, lo siento, de ahora en adelante buscare con más ahínco. :]

    ResponderEliminar
  42. Muy bueno el tutorial Oloman, muchas gracias por compartir esta información :)

    Una pregunta, yo hice una pequeña modificación a la barra de navegación de entradas recientes y antiguas en su lugar puse unas imágenes (dentro de cada post), pero no puedo ponerle este efecto de a:hover, ya lo he intentado pero no he podido agregarlo en la plantilla, este es mi blog para que le eches una ojeadita.

    MilChistes.net

    Por el momento le he aplicado la opacidad para que no tape el texto de las imágenes, pero me gustaría ponerle el efecto a:hover sobre el botón de navegación Anterior y Siguiente.

    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Aquí está eso explicado de la forma más fácil que se me ha ocurrido. Sólo tendrías que cambiar las imagénes base y las del hover que puse.

      Eliminar
    2. Muchas gracias por la respuesta Oloman, pero mientras esperaba la respuesta a mi pregunta me puse a indagar sobre cómo hacer funcionar esa propiedad jejeje :)

      Ahora ya lo tengo como deseaba, igualmente muchas gracias por responder y por la ayuda prestada ;)

      Un abrazo.

      Eliminar
  43. Gracias amigo por tus enseñanzas aprendí mucho este tema Rollover con CSS y sprites.

    ResponderEliminar