Sprite CSS

Fr1moOsT

Hola, he visto en muchas webs, incluida MV que con una sola imagen muestran varios efectos. Por ejemplo, el pasar el mouse por encima de los iconos de redes sociales, cambian de color y todo esto se hace con una misma imagen:

¿Cómo se hace esto? se que se puede copiar el código, pero quiero leer algun manual para entenderlo y poder ponerlo en práctica.

Un saludo y gracias.

MrTurbo

Lee todo lo relacionado al background-position

backgoround: url(URL SPRITE) no-repeat 0px(POSICION EJE X) 0px(POSICION EJE Y)

Y el HOVER:

backgoround: url(URL SPRITE) no-repeat 0px(POSICION EJE X DESPLAZADA) 0px(POSICION EJE Y)

Edit: Y debes darle un ancho y alto específicos a la capa donde pondrás el sprite.

1 respuesta
DarkSoldier

se que hay programas que existen para ayudarte hacer ese código (por lo menos las posiciones de cada parte de la imagen) PEEERO, son como los billetes de 500€, nunca los he visto xd

Dream-MV

La respuesta esta en #2.

Usuarios habituales

  • Dream-MV
  • DarkSoldier
  • MrTurbo
  • Fr1moOsT