Uso de varios sprites CSS en una misma imagen

  • Por
  • CSS
Taller de CSS en el que hacemos uso de varios sprites CSS, en una misma imagen que contiene varios iconos en sus versiones normal y hover, que seleccionamos con el atributo background-position.
Los sprites CSS son una de las posibilidades más interesantes para optimizar la carga de una página web, así que nos vendrá muy bien aprender cómo utilizarlos. En el pasado artículo de DesarrolloWeb.com explicamos qué son los sprites CSS, sus ventajas y usos. Ahora vamos a continuar ofreciendo algún ejemplo adicional y de mayor interés para la creación de sprites CSS, concentrando en una misma imagen un número mayor de sprites CSS.

Al técnica que utilizaremos está explicada con detenimiento en el artículo anterior por lo que ahora simplemente vamos a ir un poco más allá con la creación de un ejemplo un poco más elaborado.

Podemos comenzar por echar un vistazo al ejemplo que vamos construir.

Sobre el ejemplo en marcha, podemos apreciar que se ha emulado la cabecera de una ventana de Windows Vista y que hay varios de los típicos botones para cerrar la ventana, maximizarla y restaurarla. Esos botones tienen sus versiones en activo e inactivo, según el ratón está encima o no de la imagen. Para generar esta interfaz de usuario utilizamos una única imagen, donde tenemos cada uno de los botones. Son tres botones, con sus versiones normal y hover, osea, 6 sprites que hemos colocado en un único archivo gráfico.

Todos los botones tendrán una declaración de estilos comunes:

.botones{
   width:28px;
   height: 15px;
   background: transparent url(imagenes/sprite-tres-elementos.png) no-repeat;
   float: right;
   margin: 4px 4px 4px 0;
}

Como se explicó en la introducción a los sprites CSS, utilizaremos el atributo background-position para indicar qué parte de la imagen se tiene que colocar como fondo en cada uno de los botones, y en sus correspondientes pseudo-clases hover.

.botonrestaurar{
   background-position: 0px 0px;
}
.botonrestaurar:hover{
   background-position: 0px -15px;
}
.botonmaximizar{
   background-position: -28px 0px;
}
.botonmaximizar:hover{
   background-position: -28px -15px;
}
.botoncerrar{
   background-position: -56px 0px;
}
.botoncerrar:hover{
   background-position: -56px -15px;
}

Con esto ya hemos generado el estilo CSS de los distintos botones, veamos ya el código HTML necesario.

<div class="cabventana">
   <div class="tituloventana">Emulando una ventana</div>
   <div class="botones botoncerrar"></div>
   <div class="botones botonmaximizar"></div>
   <div class="botones botonrestaurar"></div>
</div>

Como se puede comprobar, cada uno de los botones tendrán dos clases. Primero la clase "botones" con los estilos generales y luego la clase concreta de cada uno de los botones creados con los sprites "botoncerrar", "botonmaximizar" o "botonrestaurar".

Ahora sólo nos faltaría algún estilo para terminar de definir el aspecto de la caja donde se han colocado los botones. Pero esos estilos no tienen mucho más interés dentro de este artículo dedicado a los sprites CSS. No obstante, para completar y ver el resto del ejercicio, coloco el código fuente completo de este ejemplo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Sprite CSS</title>
<style type="text/css">
.botones{
   width:28px;
   height: 15px;
   background: transparent url(imagenes/sprite-tres-elementos.png) no-repeat;
   float: right;
   margin: 4px 4px 4px 0;
}
.botonrestaurar{
   background-position: 0px 0px;
}
.botonrestaurar:hover{
   background-position: 0px -15px;
}
.botonmaximizar{
   background-position: -28px 0px;
}
.botonmaximizar:hover{
   background-position: -28px -15px;
}
.botoncerrar{
   background-position: -56px 0px;
}
.botoncerrar:hover{
   background-position: -56px -15px;
}
.cabventana{
   border: 1px solid #999;
   background-color: #ccf;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   width: 270px;
   overflow: hidden;
}
.tituloventana{
   float: left;
   font-family: tahoma, verdana, sans-serif;
   font-weight: bold;
   font-size: 10pt;
   margin: 3px 10px 3px 8px;
}
</style>
</head>
<body>
   <div class="cabventana">
      <div class="tituloventana">Emulando una ventana</div>
      <div class="botones botoncerrar"></div>
      <div class="botones botonmaximizar"></div>
      <div class="botones botonrestaurar"></div>
   </div>
</body>
</html>

Nota: Hemos utilizado unos atributos de CSS 3 para hacer las esquinas redondeadas de la caja donde están los botones. Esos atributos sólo son propios de Firefox, Safari y Chrome y se han explicado anteriormente en el artículo Esquinas redondeadas en CSS 3.

Para acabar, dejamos de nuevo el enlace al ejemplo de sprites css en funcionamiento.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Carlos Larios

19/8/2010
aplicando sprites css multiples
es muy interesante este aporte y estoy practicando para aplicarlo a futuro....
aplique este codigo y aun no entiendo cual es mi falla ya que las cordenadas son adecuadas pero no muestra ninguna imagen en esa posicion la imagen que uso es de 256px, 512px y por obiedad al menos me mostraria la imagen inicial en el punto 0,0 pero no la muestra me podrian ayudar.

el codigo es:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
.inicio{
background: transparent url(6 agost 2010/menu_sprites.png) no-repeat;
width: 125px;
height: 125px;
margin: 4px;
float:right;
}
.galeria{
background: transparent url(6 agost 2010/menu_sprites.png) no-repeat;
width: 105px;
height: 100px;
margin: 4px;
float:right;
}
.arroba{
background: transparent url(6 agost 2010/menu_sprites.png) no-repeat;
width: 105px;
height: 101px;
margin: 4px;
float:right;
}
.empresa{
background: transparent url(6 agost 2010/menu_sprites.png) no-repeat;
width: 95px;
height: 100px;
margin: 4px;
float:right;
}
.ainicio{
background-position: 0px 0px;
}
.ainicio:hover{
background-position: 0px -256px;
}
.agaleria{
background-position: -145px -5px;
}
.agaleria:hover{
background-position: -145px -261px;
}
.aarroba{
background-position: 0px -155px;
}
.aarroba:hover{
background-position: 0px -411px;
}
.aempresa{
background-position: -130px -145px;
}
.aempresa:hover{
background-position: -130px -401px;
}
.menu{
width:600px;
height:800px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="menu">
<div class="inicio ainicio"></div>
<div class="galeria agaleria"></div>
<div class="empresa aempresa"></div>
<div class="arroba aarroba"></div>
</div>
</body>
</html>

jad

16/7/2011
no se entiende nada
puro bla bla bla, pero nada didactico

Maru

21/1/2013
link
excelente artículo!! la duda es, cómo incorporar un link en cada una de las imágenes. Gracias!

Nelson88

04/7/2013
comment
Muy buenos los articulos sobre el manejo de imagenes por medio de sprites, en una página que tengo realice el hover con imagenes ya que necesito que se vean en iexplorer 8. realizandolo con 2 imagenes separadas, al pasar el mouse se ve en blanco por unos instantes, con el uso de sprites se soluciona.
Saludos,