Posteamelo

¿Qué tal? hacia tiempo que no escribía, tuve mucho trabajo estos días.

Una pregunta recurrente en la comunidad es ¿Qué son los Sprites en CSS? o ¿Cómo utilizar Srpites?, si bien hay muchas herramientas que sirven para realizar estas tareas, es bueno entender el principio de esta técnica, en lo personal prefiero no usar ninguna de esas herramientas ya que es muy sencillo, pero por si fuera necesario para alguno de ustedes citare algunas al final de este post para que tengan una buena referencia.

Antes de Comenzar

Este tema si bien no es avanzado se requieren conocimientos de CSS y HTML, puesto que no voy a detener a explicar cosas como o les recomiendo visitar los enlaces.

La primera cosa que hay que ver antes de trabajar con Sprites es lo referente a esa mágica y bella propiedad que tienen los elementos de bloque llamada Background que nos permite establecer el color, una imagen y su posición como fondo de estos elementos.

Para modificar el background podemos recurrir a algunas de las siguientes propiedades mediante CSS.

-background-color (este valor puede ser en hexadecimal o en RGB).

-background-image (El url de la imagen: url('url/imagen') ).

-background-repeat (si se repite o no, sus posibles valores son: no-repeat | repeat | repeat-x | repeat-y ).

-background-attachment (establece si el fondo es fixed o scroll, sus posibles valores son: fixed | scroll | inherit).

-background-position (su posición que puede tomar forma en 2 valores referentes a X y Y se pueden usar los tokens left | center | right para X y para Y top | center | bottom tambien puede ser expresado en %, px, etc... y por supuesto inherit).

básicamente eso es todo lo que tenemos que revisar para empezar a usar sprites, sobre todo lo referente a background-position, para esta tutoría me veran usando el shorthand background que basicamente es lo mismo que todo lo anterior desde una sola regla.

Nota: para usar el shorthand background el orden de los valores es el siguiente:

background-color
background-image
background-repeat
background-attachment
background-position

Ejemplo:


background: #000 url('url/img') no-repeat fixed top center;

¡Perfecto! ahora que dejamos todo eso en claro empecemos.

El HTML


<!doctype html>
<html lang="es">
    <head>
        <title>CSS Sprites</title>
        <link rel="stylesheet" type="text/css" href="css/estilo.css" />
        <meta charset="utf-8" />
    </head>
    <body>
        <div id="header">
            <div id="menu-wrapper">
                <ul id="menu-usuario">
                    <li><a href="" class="perf">Perfil</a></li>
                    <li><a href="" class="conf">Configuración</a></li>
                    <li><a href="" class="docu">Documentos</a></li>
                </ul>
            </div>
        </div><!-- fin header-->
        <div id="contenido">
        </div><!--fin contenido-->
    </body>
</html>

El CSS


body{
    margin: 0;
    background: url('../img/bg_body.jpg') repeat;
}

#header{
    height: 127px;
    padding-top: 1px;
    background: url('../img/bg_header.jpg') repeat-x;
}

#menu-wrapper{
    width: 896px;
    height: 40px;
    margin: 79px auto 0 auto;
    padding: 4px 0;
}

#menu-wrapper ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

Les dejo los archivos de las imágenes por si quieren seguir paso a paso la tutoría:
Descargar

Figura 1 index.html estado inicial

Bien ya tenemos todo lo necesario para empezar a trabajar así que voy a hacer que cada uno de los enlaces mida 46px * 34px, acomodarlos de manera horizontal y cambiar el texto por las imágenes (sp_menu_users.png).

Para logarlo agregue estas lineas de CSS.


#menu-usuario:after{
    content: ".";
    display: block;
    visibility: hidden;
    clear: both;
}

#menu-usuario li{
    display: block;
    float: left;
    margin: 0 4px;
}

#menu-usuario a{
    margin-top: 3px;
    display: block;
    width: 46px;
    height: 34px;
    background: url('../img/sp_menu_users.png') no-repeat 0 -34px;
    text-indent: -999px;
    overflow: hidden;
}

El resultado es el siguiente:

Figura 1.1 index.html

Bien ya tenemos los 3 enlaces con la misma imagen de fondo, ahora hay que posicionarla, el momento en que preparamos nuestra imagen es la parte más importante para facilitar el trabajo con Sprites, hay distintos casos y distintas maneras para este caso calcule el tamaño y espacio entre las imágenes.

Ahora toca colocar el fondo de distintas formas para cada imagen, por la forma en que hice mi imagen y el tamaño de los enlaces vamos disminuir 46px a la posición X de cada enlace salvo el primero:


.conf{
    background-position: -46px -34px !important;
}

.docu{
    background-position: -92px -34px !important;
}

Como pueden ver lo único que realice fue modificar la posición X al primero le reste 46px y al segundo 92px y así quedaron en posición.

Figura 1.2 index.html

Ahora solo hay que agregar el estado cuando el el ratón pase por encima del enlace.


.perf:hover{
    background-position: 0 0 !important;
}

.conf:hover{
    background-position: -46px 0 !important;
}

.docu:hover{
    background-position: -92px 0 !important;
}

Figura 1.3 index.html

¡Voalá! hemos terminado ¿verdad que no era tan complicado?

Enserio, insisto que gran parte del trabajo es preparar las imágenes para trabajar con ellas, este pequeño menú si bien puede ser mejor logrado (hay que aceptar que no me puse muy quisquilloso) fue muy fácil de hacer, otra cosa es que es accesible ya que no perdemos los textos, solo los escondimos así que una persona que tenga debilidad visual puede usar como apoyo un lector de pantalla.

Como lo prometí aquí un par de enlaces a generadores de sprites:

http://www.css-sprit.es
http://es.spritegen.website-performance.org/

Como siempre les dejo el código y el demo:

Descargar

Demo

El mejor agradecimiento es que allás leído este post, si tienes alguna duda comenta.

[Tutoría] Sprites CSS

Dejá tu comentario

Autor del Post