Técnica de sprinte en CSS
La técnica de sprinte consiste incluir en un mismo archivo varia imágenes separada
entre si como en este ejemplo de imágenes
cada imágenes separada se dice que es un sprint, los sprint se suele usar mucho en la programación de
videojuego produciendo una animación de 2d consistiendo tan solo en mover un rectángulo
a la posición de una determinada imagen de sprinte. este rectángulo que se suele mover entre la imágenes de sprint suele ser trasparente donde coloquemos este rectángulo trasparente en una determinada posición de la imágenes de sprint hará que se muestre ese sprint. Nosotros mediante css, podremos usar este tipo de técnica en nuestra
web. Mejorando el ancho de banda de nuestra página, y diminuyendo las peticiones de
recurso a nuestro servido. ya que solo se carga una unica imagen. Esta técnica la usa mucho google en su buscado, y también
yahoot . Para usar esta técnica de sprinte con css solo hay que esta
jugando con lo atributo de ancho(width) y alto(height) y
mediante
background-image cargamos el sprite que contiene todas la imágenes
y mediante background-position no movemos en una determinada posición
de la imagen de sprite que queremos Mostrar. Veamos como se hace mediante un ejemplo
sencillo. En este ejemplo voy a crear 3 botones de forma horizontal con
vario botones distinto para que podáis ver bien la técnica de sprinte.
Primero crearemos
una imagen transparente de un 1 pixes de alto y 1 pixes de
ancho esta imagen transparente es la que realmente mostraremos los sprinte.
A esta imagen transparente la llamaremos contenedorsprinte.png. Ahora
vamos a crear la imagen de los sprinte donde estarán todos lo botones que vamos a
necesita. Abrimos photo (o cualquier otros programa de dibujo que tengáis como gimp
que o permita crear fondo transparente y que pueda guardad la imágenes de los sprinte
a formato png.) En mi caso yo voy a usar photo pues es el que tengo. Bien como dije abrimos photo y creamos un fichero nuevo con fondo
transparente de tamaño de 310x32 aunque cuando vosotros estéis creando vuestro sprinte
el tamaño de vuestra documento deber ser suficiente grande para que quepa todas la
imágenes de los sprinte en este ejemplo el tamaño de fichero es de 310x32 para
meterle dentro 3 botones de distinto diseño, cada uno de esto botones, tiene un tamaño
de 100x32 que caber perfectamente en nuestro fichero que llamaremos sprint.png..
Una ver creado el fichero en photo pegaremos nuestro botone en el documento recién
creado como. veis en la imagen, yo es pegado distinto botones. Una ver pegado los
botone en el documento y en su posición correcta lo guardamos como sprinte.png. 
Ya tenemos creado el documento de imagen donde estar nuestro sprinte,
ahora vamos a crea el fichero sprint.css que contendrá las definiciones
de la distinta posición de los botones.
Crea un fichero llamado sprinte.css y copia es siguiente
código en el fichero
/*Creamos una clases llamada sprinte
y cargamos la imágenes que contiene los sprinte*/
.sprite { background-image: url('sprinte.png'); } /*Creamos una clase botón esta clases
botón es el rectángulo de tamaño de lo botones*/
.boton {
height: 32px;
width: 100px;
}
/*Mediante position movemos botón a la posición
de la imágenes de la posición de la imagen de sprinte*/
.boton1 {background-position: 0px 0px; }
.boton2 {background-position: -101px 0px; }
.boton3 {background-position: -205px 0px; }
ya vemos creado el fichero sprinte.css ahora vamos a
crear la pagina web para ello crea una pagina nueva y entre <head> y </head> añadirle
los siguiente <link rel="stylesheet" type="text/css" href="sprinte.css"
media="screen" />
luego copia el siguiente código entre <body> y </body>
<h1 align="left"><font color="#000000">ejemplo
de carga de sprinte</font></h1> <!-- creamos 3 div que podremos en la posición donde
queramos que se muestre los botones.-->
<!-- botón contendrá las imagen de contenedorsprinte.png. y mediante los nombre
de la clases, de los botones los visualizamos. --> <div id ="boton-1" style="position: absolute; top:
50; left: 0">
<img class="sprite boton boton1" src="contenedorsprinte.png" alt="boton 1" width="100"
height="32" />
</div> <div id ="boton-2" style="position: absolute; top:
50; left: 102">
<img class="sprite boton boton2" src="contenedorsprinte.png" alt="boton 2" width="100"
height="32"/>
</div> <div id ="boton-3" style="position: absolute; top:
50; left: 204">
<img class="sprite boton boton3" src="contenedorsprinte.png" alt="boton 3" width="100"
height="32" />
</div>
Pues nada mas visualiza la pagina y vera los 3 botones cargados.
Descarga
el código de ejemplo de sprinte. A usar sprinte vemos conseguido varia ventaja una de ella el consumo
de ancho de banda se reduce ya que se hace menos peticiones a nuestro servido puesto
que solo ser carga una imagen una ver y no varia veces. También vemos ganado
en la carga mas rápida en nuestra pagina a usar sprinte, que solo carga una ver nuestra
imágenes de los sprinte, puesto que todos lo sprinte esta en un único documento
de imágenes. Estará también en la cache de nuestro navegador. Otras gran ventaja es
que vemos conseguido comodidad para nosotros puesto que si necesitamos un botón en
otros sitio de nuestra pagina web solo tenemos que llamarlo otras ver a sprinte de
dicho botón sin necesidad de tocar para nada el css. El único inconveniente es que el fichero css su peso de tamaño
ira siendo mas grande de lo normas, a medida que le añadimos mas clases, pero
merece la pena usar esta técnica yo casi siempre uso esta técnica mas la técnica de
moisaco y también la técnica de puzzle. | 
