Combinar imágenes en objetos móviles CSS de forma fácil

Logo CSS3Hace unos meses publiqué un post sobre como añadir los botones de redes sociales a WordPress. En aquella ocasión indiqué como hacerlo añadiendo una imagen por cada red social, sin embargo, si has analizado tu Web con el Google Page Speed, habrás visto que se puede mejorar la velocidad de carga de tu sitio combinando las imágenes en objetos móviles CSS, usando los llamados sprites.  En este post explicaré como combinar diferentes imágenes de forma fácil para aquellos que no  sepan sobre CSS.

La técnica consiste en utilizar una misma imagen de fondo para cada enlace y decirle al navegador que muestre sólo una parte concreta de ese fondo para cada enlace. Por ejemplo, en el caso de mi blog, tanto los iconos de redes sociales como los de las categorías son una sola imagen.

ategorias reactancia.com

Iconos sociales reactancia.com

En primer lugar lo que debes hacer es unir todas las imágenes en una, mediante algún editor de imágenes como illustrator, Paint shop pro, etc. Una vez que has creado la imagen anota cuál es su tamaño en pixeles y cada cuántos pixeles la quieres dividir, en el ejemplo todas las partes tienen el mismo tamaño, aunque pueden ser de diferente tamaño.

A continuación debemos crear mediante CSS diferentes selectores de ID, uno para cada uno de los enlaces en los que vamos a dividir la imagen. (El selector de ID va precedido de # y el nombre que le otorguemos, y servirá para que cuando añadamos el código HTML, nos baste con indicar el ID de cada enlace, para que automáticamente le dé el formato que hayamos otorgado a ese ID)

El código  CSS es el siguiente;

#selectorID1, #selectorID2, #selectorID3, #selectorID4, {
background-image: url(URLDELAIMAGEN/NOMBREARCHIVO.XXX);
background-repeat: no-repeat;
height: 50px;
width: 50px;
display:inline-block;
}

# selectorID1 {
background-position: 0 0;
}

#selectorID2 {
background-position: -50px 0;
}

#selectorID3 {
background-position: -100px 0;
}

#selectorID4 {
background-position: -150px 0;
}

Explicación del código. Debes sustituir #selectorID1 por el nombre que quieras, puedes crear tantos selectores de ID como necesites. En “url(URLDELAIMAGEN/NOMBREARCHIVO.XXX);” deberás indicar la url donde está ubicada la imagen, en el caso de mi Blog sería “url(http://www.reactancia.com/imagenes/socialicons.gif);

Si la imagen  queremos dividirla en vertical, indicaremos “display:block;” y si  la división es en horizontal será “display:inline-block;

En width y height se muestra el tamaño de cada una de las partes en las que vamos a dividir la imagen. Por ejemplo, si es una imagen de 50px de alto, en height dejaremos 50px y si queremos que sólo muestre 50px de ancho, en width dejaremos 50px. (Todo este primer código es común para todos los selectores de ID ya que en este caso todas las partes tienen el mismo tamaño, pero si no fuese así habría que indicar el height y width específico de cada selector en el código de cada uno, tal que así:)

#selectorID1 {
Height 50px;
Width: 50px;
background-position: 0 0;
}

El  background-position permite posicionar la imagen de fondo tomando de referencia el vértice superior izquierdo. El primer valor hace referencia a la posición horizontal y el segundo a la vertical. En el ejemplo, imaginemos que tenemos una imagen de 200×50 y queremos dividirla en cuatro partes iguales. La primera parte será    background-position: 0 0; La segunda  background-position: -50px 0; la tercera  background-position: -100px 0; etc. (tal y cómo está puesto en el código de ejemplo.) No obstante CSS permite mucho más, aquí dejo un enlace sobre todas las posibilidades que ofrece background-position.  Si queremos desplazar la imagen en vertical sería background-position: 0 50px; etc..

Una vez que hemos creado el código CSS, deberemos crear los enlaces en HTML, por ejemplo así:

<a href="http://enlace" title="título del enlace" rel="nofollow" target="_blank" id="selectorID1">
<a href="http://enlace" title=" título del enlace " target="_blank" rel="nofollow"  id=" selectorID2">
<a href="http://enlace" title=" titulo del enlace"  rel="nofollow"  target="_blank" id="selectorID3">
<a href="enlace" title=" titulo del enlace" target="_blank"  rel="nofollow"  id=" selectorID4">

El código target=”_blank” lo utilizamos si queremos abrir el enlace en una ventana nueva (sino simplemente lo eliminamos), y rel=”nofollow” para indicar a los buscadores como Google que no sigan ese enlace y no perder “page Rank”, si es un enlace a nuestra Web no se indica.  

El código CSS deberás añadirlo  en las hojas de estilo de tu tema, si usas wordpress será el style.css de tu tema, añádelo al final. El código HTML deberás añadirlo  donde quieres que aparezcan los enlaces. También puedes añadir el CSS en el mismo archivo HTML, indicando antes del CSS <style type=”text/css”>  y cerrando el código CSS </style>, algo que deberás hacer si por ejemplo quieres añadirlo en un widget de texto en WordPress.  En el ejemplo se pondría así;

<style type="text/css">
#selectorID1, #selectorID2, # selectorID3, #selectorID4, {
background-image: url(URLDELAIMAGEN/NOMBREARCHIVO.XXX);
background-repeat: no-repeat;
height: 50px;
width: 50px;
display:inline-block;
}

#selectorID1 {
background-position: 0 0;
}

#selectorID2 {
background-position: -50px 0;
}

#selectorID3 {
background-position: -100px 0;
}

#selectorID4 {
background-position: -150px 0;
}

</style>

<a href="http://enlace" title="título del enlace" rel="nofollow" target="_blank" id="selectorID1">
<a href="http://enlace" title=" título del enlace " target="_blank" rel="nofollow"  id=" selectorID2">
<a href="http://enlace" title=" titulo del enlace"  rel="nofollow"  target="_blank" id="selectorID3">
<a href="enlace" title=" titulo del enlace" target="_blank"  rel="nofollow"  id=" selectorID4">

Las posibilidades de los sprites son muchas, hay paginas que utilzan una sola imagen de fondo y mediante esta técnica hacen que se muestren las diferentes partes del fondo, lo cual reduce mucho el tiempo de carga.


Comentarios

  1. Combinar imágenes en objetos móviles CSS de forma fácil | Blog personal Miguel Molina Alen Os adrezco el compartir con todos nosotros toda esta interesante información. Con estos granitos de arena hacemos màs grande la montaña Internet. Enhorabuena por este post.

Opina

*

Blog personal Miguel Molina Alen | Psicología, Marketing, Actualidad TIC

Utilizamos cookies para ofrecer mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de nuestra política de cookies, pinche el enlace para más información. ACEPTAR

Aviso de cookies