sábado, 10 de diciembre de 2016

Que son y como usar Sprites en CSS


Para ver en youtube clic aquí
(No olvides suscribirte)


Las peticiones y la velocidad

  Algo que pareciera obvio mencionar es que cada vez que colocamos imágenes en nuestra web esta va a tardar mas en descargar, esto no solo se debe al peso agregado de estos archivos de imagen, si no también al aumento en el número de peticiones hacia el servidor web, por supuesto que no tiene sentido simplemente dejar de utilizar imágenes, estas no son imprescindibles para el funcionamiento de nuestra página, pero sin ellas perdería atractivo y con ello dejaría de atraer visitantes. Peticiones adicionales al servidor se crean cuando, por ejemplo, hacemos un efecto de "hover" con imágenes, ya que javascript solicitaría una nueva imagen al servidor.
   Nos podemos ahorrar muchas peticiones al servidor usando una técnica muy sencilla, que es mas que todo útil a la hora de trabajar con iconos en nuestra web, simplemente posicionemos todos nuestros iconos en una sola imagen grande y con CSS la movemos para mostrar solamente el icono que queremos usar, esta imagen grande la podemos denominar "Sprite" y a continuación te muestro dos de los ejemplos usados en el videotutorial de arriba:




  En el tutorial de arriba aprenderás no solo implementar los Sprites en Css, sino como también a hacer tu propio sprites desde Photoshop

Descargas

HTML :



Imágenes :



Otros
Estos archivos representan el contenido de los iframes usados en el video



Conectate con migo





   

No hay comentarios:

Publicar un comentario