Foros del Web » Creando para Internet » CSS »

Como se usa esta propiedad

Estas en el tema de Como se usa esta propiedad en el foro de CSS en Foros del Web. Hola amigos, verán tengo una imagen con muchos iconos Y quiero utilizarlos, se que se puede hacer que se muestre solo un iconito como fondo ...
  #1 (permalink)  
Antiguo 20/12/2010, 13:14
 
Fecha de Ingreso: septiembre-2007
Ubicación: PyRoot
Mensajes: 1.515
Antigüedad: 10 años, 2 meses
Puntos: 188
Como se usa esta propiedad

Hola amigos, verán tengo una imagen con muchos iconos



Y quiero utilizarlos, se que se puede hacer que se muestre solo un iconito como fondo utilizando la misma imagen y jugando con las propiedades CSS.


Me hechan una mano. muchas gracias.
__________________
Si quieres agradecer el triangulo obscuro de la parte derecha debes presionar +.
  #2 (permalink)  
Antiguo 20/12/2010, 13:18
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Como se usa esta propiedad

sprites+css
  #3 (permalink)  
Antiguo 20/12/2010, 13:32
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Como se usa esta propiedad

Cita:
Iniciado por New Ver Mensaje
Hola amigos, verán tengo una imagen con muchos iconos



Y quiero utilizarlos, se que se puede hacer que se muestre solo un iconito como fondo utilizando la misma imagen y jugando con las propiedades CSS.


Me hechan una mano. muchas gracias.
Código:
.*CLASS* {
background: url(*IMAGE*) no-repeat;
width: **px;
height: **px;
float: left;
}
.*CLASS*:hover { background-position: **px -**px; }
.*CLASS*:active { background-position: **px -**px; }
Se define una clase con un ancho y alto determinado ( la parte de imagen que quieres ver) y se le pone como fondo una imagen con los estados de tu sprite (hover,active etc)
Despues usas background position en cada estado del sprite para qeu se vea una parte de la imagen.
  #4 (permalink)  
Antiguo 20/12/2010, 15:19
 
Fecha de Ingreso: noviembre-2010
Ubicación: On a world of Anime & Web.
Mensajes: 137
Antigüedad: 7 años
Puntos: 4
Respuesta: Como se usa esta propiedad

http://www.cristalab.com/tips/menu-css-con-imagenes-precargadas-css-sprites-c65689l/

  #5 (permalink)  
Antiguo 20/12/2010, 16:18
 
Fecha de Ingreso: septiembre-2007
Ubicación: PyRoot
Mensajes: 1.515
Antigüedad: 10 años, 2 meses
Puntos: 188
Respuesta: Como se usa esta propiedad

muchas gracias a todos, ya me ha quedado claro.

Un saludo.
__________________
Si quieres agradecer el triangulo obscuro de la parte derecha debes presionar +.

Etiquetas: propiedad
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:46.