Foro

Como hacer los Sprites CSS

0
Hola, alguien sabe como puedo hacer los sprites CSS ? si fuera tan amable explicar como trabaja se que usa background-position:-xxx; o en positivo pero alguien podria enseñarme con un ejemplo en vertical y horizontal Gracias <!-- s8-) --><!-- s8-) --> gracias <!-- s8-) --><!-- s8-) -->
0
Es bien fácil. la idea es tener en una misma imagen los dos estados del botón, o inclusive mas estados (click,over,out,active,etc...) lo importante es que debes saber exactamente la posición donde comienza un estado y otro para que luego mediante CSS puedas posicionarlo.
/*primero defines la imagen normal */
a.boton{
   background:transparent url(imagen-sprite.jpg) 0px 0px no-repeat;
}
/* cuando pongan el mouse sobre el link, cambias la posicion de la imagen */
a.boton:hover{
  background-position:0px 50px;
}
la propiedad "background-position" acepta dos parámetros, la posición X y la posición Y, para este ejemplo (background-position:0px 50px;) estamos posicionando la imagen en la coordenada 0,50 cuando esta over, y cuando esta normal le asignamos 0,0. este ejemplo es sprites verticales, para hacerlos horizontales pues sencillamente cambias el eje X en lugar del Y. Utilizando sprites podemos hacer efectos muy buenos utilizando javascript, podemos animar la trasnsición por ejemplo (pero ese es otro tema <!-- s8-) --><!-- s8-) --> ). saludos
0
uy pues si a practicar que quiero dominar el uso de sprites por que mejora el performance mucho verdad <!-- s:D --><!-- s:D --> gracias admin si tengo otra duda ya estare por aqui Saludos
0
mira en el siguiente links explican bien claro el uso de sprites [url]http://www.librosweb.es/css_avanzado/capitulo1/rollovers_y_sprites.html[/url]

¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook

Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.