Manejo de Sprites en CSS3
INFORMACION PARA DESARROLLADORES WEB
En este enlace encontraran una excelente teoria que explica el manejo de los sprites en css3
javascript:void(0)
Ahora les explicare el manejo de sprites de una forma que no explican en paginas web en google , un conocimiento que adquiri de suerte en videos en youtube.
Despues de esto estaran volando en el manejo de sprites.
para manejar sprites se enlaca la imagen de donde la tenga:
Background-image: url("../carpeta/nombrefoto.jpg ";
cuando llaman una carpeta deben tener en cuenta los punticos uno o dos dependiendo, a mi una vez me genero problema si era la foto formato png o jpg y pedia dependiendo uno o dos puntos.
luego se usa
background-position: eje x eje y
background-position: -0px - 0px ;
los ejes son en negativo nunca positivos.
cuando backgroun-position lo que hacen es moverse dentro de la imagen el sprites que contiene varios iconos.
van a hacer lo siguiente para probar el manejo de sprites.
se van por ejemplo a la pagina de facebook y toman el logo de facebook que esta en la barra azul luego en mozilla que es el mejor para ver el codigo fuente entonces sobre la imagen dan click en inspeccionar elemento.
cuando salga la consola o la ventana que muestra el codigo fuente notaran a la derecha el panel de el codigo css3, en el teclado tomaran las teclas de las flechas con la tecla superior la que indica hacia arriba y la telca inferior la que indica hacia abajo con esas teclas moveran el sprites,
con las teclas de la flecha la de la derecha y la de la izquierda con esas moveran en el panel de mozilla en el codigo css3 las opciones del background-position:
background-position: -0px -0px;
eje x eje y
si quieren tomar el eje x pues usan la tecla de la flecha izquierda y si quieren cambiar los pixeles en el eje y entonces usan la tecla de la flecha derecha.
cuando esten en el eje que quieren pues simplemente para no adivinar en que pixel esta el icono o imagen dentro del sprite pues solamente toman las flechas del teclado la tecla de la flecha hacia arriba y la tecla hacia abajo y dependiendo al eje en el que este van girando se van moviendo en el sprite.
Pongo unas fotos para que mas o menos sepan lo que les digo, ya saben son ejes negativos no positivos.
Hay paginas web que son herramientas para crear sprites vallan buscando herramientas web para diseñadores de paginas web igualmente para navegadores.
PASO 1
PASO 2
PASO 3
PASO 4
Dan click en el eje x o y de el background-position y cambian los pixeles, recuerden que los ejes son negativos y nunca positivos, van moviendo con las teclas de las flechas la que indica hacia arriba o hacia abajo dependiendo la ubicacion de el icono dentro del sprites, lo que hacen es que en su proyecto en xampp o wampserver cuando corran el proyecto en el navegador hacen esto inspeccionar el codigo en el navegador y manejar el sprites de esta forma para ubicar y poner rapido la imagen del sprites que necesitan.
PASO 5
PASO 6
Como podran ver este es un sprites una imagen que contiene varios iconos para hacer una sola peticion al servidor y menos problemas para su portal web.
En este caso di click sobre url de la imagen en background-image en abrir en una nueva pestaña
y detallar la imagen para ver a que icono dirijirme y probar lo que les acabo de enseñar.
Agradezco que difundieran esta informacion ya que en ninguna pagina web explican esto tan importante de esta forma y en librosweb.es que es excelente pagina donde hablan de css3 no tienen este dato no lo explican.
INFORMACION PARA DESARROLLADORES WEB
En este enlace encontraran una excelente teoria que explica el manejo de los sprites en css3
javascript:void(0)
Ahora les explicare el manejo de sprites de una forma que no explican en paginas web en google , un conocimiento que adquiri de suerte en videos en youtube.
Despues de esto estaran volando en el manejo de sprites.
para manejar sprites se enlaca la imagen de donde la tenga:
Background-image: url("../carpeta/nombrefoto.jpg ";
cuando llaman una carpeta deben tener en cuenta los punticos uno o dos dependiendo, a mi una vez me genero problema si era la foto formato png o jpg y pedia dependiendo uno o dos puntos.
luego se usa
background-position: eje x eje y
background-position: -0px - 0px ;
los ejes son en negativo nunca positivos.
cuando backgroun-position lo que hacen es moverse dentro de la imagen el sprites que contiene varios iconos.
van a hacer lo siguiente para probar el manejo de sprites.
se van por ejemplo a la pagina de facebook y toman el logo de facebook que esta en la barra azul luego en mozilla que es el mejor para ver el codigo fuente entonces sobre la imagen dan click en inspeccionar elemento.
cuando salga la consola o la ventana que muestra el codigo fuente notaran a la derecha el panel de el codigo css3, en el teclado tomaran las teclas de las flechas con la tecla superior la que indica hacia arriba y la telca inferior la que indica hacia abajo con esas teclas moveran el sprites,
con las teclas de la flecha la de la derecha y la de la izquierda con esas moveran en el panel de mozilla en el codigo css3 las opciones del background-position:
background-position: -0px -0px;
eje x eje y
si quieren tomar el eje x pues usan la tecla de la flecha izquierda y si quieren cambiar los pixeles en el eje y entonces usan la tecla de la flecha derecha.
cuando esten en el eje que quieren pues simplemente para no adivinar en que pixel esta el icono o imagen dentro del sprite pues solamente toman las flechas del teclado la tecla de la flecha hacia arriba y la tecla hacia abajo y dependiendo al eje en el que este van girando se van moviendo en el sprite.
Pongo unas fotos para que mas o menos sepan lo que les digo, ya saben son ejes negativos no positivos.
Hay paginas web que son herramientas para crear sprites vallan buscando herramientas web para diseñadores de paginas web igualmente para navegadores.
PASO 1
PASO 2
PASO 3
PASO 4
Dan click en el eje x o y de el background-position y cambian los pixeles, recuerden que los ejes son negativos y nunca positivos, van moviendo con las teclas de las flechas la que indica hacia arriba o hacia abajo dependiendo la ubicacion de el icono dentro del sprites, lo que hacen es que en su proyecto en xampp o wampserver cuando corran el proyecto en el navegador hacen esto inspeccionar el codigo en el navegador y manejar el sprites de esta forma para ubicar y poner rapido la imagen del sprites que necesitan.
PASO 5
PASO 6
Como podran ver este es un sprites una imagen que contiene varios iconos para hacer una sola peticion al servidor y menos problemas para su portal web.
En este caso di click sobre url de la imagen en background-image en abrir en una nueva pestaña
y detallar la imagen para ver a que icono dirijirme y probar lo que les acabo de enseñar.
Agradezco que difundieran esta informacion ya que en ninguna pagina web explican esto tan importante de esta forma y en librosweb.es que es excelente pagina donde hablan de css3 no tienen este dato no lo explican.