Comunidad PHPeros
Lenguajes => CSS => Mensaje iniciado por: Rastrillox en 04 de Mayo de 2012, 19:47:48 pm
-
Wenas, como ustedes saben he tenido la tarea de re-aprender todo lo que sabía pero de una maneras mas avanzada y profesional, por el momento he comenzado con CSS, ya que es lo mas basico, me estoy manejando esto de los sprites, pero tengo un pequeño problema. en la web hay generadores de sprites donde subes las imagenes y te lo colocan como sprite, pero solo la colocan de una sola forma, Si elijes vertical u Horizontal. Pero he buscado casi por todo google y no encuentro ninguno generador que las cree de las dos formas.
Horizontal - Vertical.
Alguien podría ayudarme a encontrar uno?
-
Usando generadores nunca aprenderas nada :S
http://www.phperos.net/foro/index.php?topic=4760.msg58543
-
¿Usas generadores? :/
A ver si te entendí... ¿Quieres hacer que la imagen del sprite se repita tanto vertical como horizontalmente? Pues bien, basta con poner el parámetro "repeat" solo. Por ejemplo:
.some_class{
background: url(dir/image.png) repeat #ccc;
/* more things here ._. */
}
Fíjate en el "repeat", no es ni repeat-x ni repeat-y, solamente repeat. Así, el background se repite horizontal y verticalmente.
Espero que esto te sirva de algo ;) Y sí, ya es para que lo hagas tú mismo. :P
-
Osea no me entiederon, miren por ejemplo tengo la carpeta de mi web con 5 imagenes. lo que quiero es buscar un generador que me haga esas 5 imagenes 1 Sprite. pero que sea Vertical y Horizontal.
miren un ejemplo el sprite de youtube:
(http://www.designwalker.com/img/css_sprite/css_sprite01.jpg)
Este tiene imagenes horizontalmente y vertical, a eso es lo que me refiero.
Saludos.
-
Osea no me entiederon, miren por ejemplo tengo la carpeta de mi web con 5 imagenes. lo que quiero es buscar un generador que me haga esas 5 imagenes 1 Sprite. pero que sea Vertical y Horizontal.
miren un ejemplo el sprite de youtube:
(http://www.designwalker.com/img/css_sprite/css_sprite01.jpg)
Este tiene imagenes horizontalmente y vertical, a eso es lo que me refiero.
Saludos.
Paint xD
-
Bueno, pues tienes que posicionarte manualmente en la imagen con background-position. Por ejemplo:
.icons{
background(dir/image.png) no-repeat top left;
/* etc */
}
.icons.example{
background-position: 5px -30px;
}
Ahí te has posicionado dentro de la imagen con las coordenadas de 5px y -30px. Ahora, para saberlas, puedes usar (como dijo SoyJoaquin) Paint, con la herramienta de selección. :P
Ah, y también puedes usar el Inspeccionar elemento del navegador que uses para ir cambiado eso y que quede a tu gusto. Tienes más detallado lo que te estoy diciendo en el link que te dejó Mixvice, échale una mirada.
-
Paint xD
Shit, me da "Pereza hacerlo manual", pero por lo visto tendré que hacerlo así.
Saludos.
-
Shit, me da "Pereza hacerlo manual", pero por lo visto tendré que hacerlo así.
Saludos.
O puedes usar un generador vertical y luego otro horizontal, no?
-
O puedes usar un generador vertical y luego otro horizontal, no?
Mmmm... no se si se podrá pero intentare a ver que sucede.
-
Simple, crea primero tantos sprites horizontales como quieras, luego usas el mismo generador para que los que ya estén horizontales se unan entre sí para que quede el sprite listo. Voilá.