¿como se hacen los splits?

[Jnuserful]

hola a todos. soy nuevo en esto de css y tengo la duda de como hacer las imágenes splits para css, con que programa, como calcular el los espacios etc...

gracias.

[alexk]

Bueno supongo que te refieres a "Sprites CSS" mi me gusta hacerlo manual cortar cada objeto y ponerlo donde yo quiero, siento que es mas rapido... pero bueno si lo quieres mas "automatico" existen generadores online busca en google "Sprites CSS generador" y encontraras este por ejemplo:
http://es.spritegen.website-performance.org/
pero seguro hay mas y mejores...

Nota: para hacer un split hay que abrir mucho las piernas.... pregunta en el foro de gimnasia...

[cristian_cena]

acá un tutorial: http://librosweb.es/css_avanzado/cap...y_sprites.html
acá un ejemplo (hay algo de jquery por ahi pero no le hagas caso :D): http://jsfiddle.net/cristian_cena/fYXfv/

Para hacerlo a mano solo hay que tener en claro que se debe tomar como referencia la esquina superior izquierda de la imagen (origen de coordenadas) y de ahi tomar las cotas hacia abajo y hacia la derecha.
Estas cotas/coordenadas te darán los valores de background-position que necesites.
Yo lo armo en photoshop por si debo editarlo. Siempre parto de un diseño parcial(casi total)mente definido, ya que: o dejo los huecos que voy a necesitar, o pongo el nuevo contenido abajo agrandando en alto la imagen, lo que permite conservar lo que ya armamos.

Ejemplo: Cargamos el sprite en N elementos:

Código CSS:

elemento1, elemento2, elementoN {
background:("ruta/sprite.xxx") no-repeat;
}
 

Ahora suponte que necesitas buscar un trozo del sprite que esta 10px hacia la derecha y 50px hacia abajo. Entonces escribe:

Código CSS:

elemento1{
width: ... ; height: ... ;
background-position:10px -50px; /*verás: el 1er valor corresponde al eje x y el segundo al eje y*/
}
 

Listo :)

Si se complica hacerlo a mano, existen muchas herramientas online que te pueden ayudar, tal como te indican. Este también es muy bueno.
La ventaja de estas, te ahorran tiempo (discutible, porque si lo sabes hacer lo armas rápido).
desventaja: imágen de mayor tamaño (y peso) que la imagen que construirías a mano. Ya que, te va colocando las imagenes una debajo de la otra, (o al lado de la otra según elijas) y si las imagenes no tienen las mismas proporciones te quedarán demasiados espacios en blanco.

Espero te sea útil.