> Manuales > Taller de 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.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual