Bienvenido a bloggertrucos.com un espacio para el blogger moderno donde buscar soluciones a nuestros problemas de cada día.

9

CSS Sprite, qué es y para que sirve?

Quizá ya has escuchado o leído en otros artículos sobre los sprites en CSS, pero probablemente hayas quedado con la duda sobre que son los css sprite realmente. Así que hablaremos sobre esta técnica un poco antigua y conocida, pero que es muy efectiva a la ahora de optimizar nuestro sitio o blog.

Los CSS sprites es una técnica a través de css de mostrar imágenes y efectos a partir de otra imagen. Es decir, funciona a partir de una imagen base y que toma efecto al pasar el ratón o mouse sobre un una de ellas, generalmente usada como enlaces. Pueden ser usadas para crear menús con grandiosos efectos en css3, botones de marcadores sociales, etc.

Las técnicas usadas con los css sprites son usadas para ahorrarnos ancho de banda en el servidor y hacer que unicamente se haga una consulta a nuestra base de datos, ahorrando tiempos de carga como primera medida para optimizar y mejorar el SEO onsite de nuestro sitio.

css sprites

¿Cómo aplicar esta técnica del css sprite?

La técnica consiste en utilizar las propiedades CSS que nos permiten alterar el alto y ancho de este modo podemos recortar una imagen que mostraremos como fondo y mostrar la misma imagen al pasar el mouse sobre esta, pero con un efecto en el css.

 Para que utilizar los css sprites?

Las técnicas de optimizacion de un blog o sitio web en general se usan cuando tenemos grandes cantidades de visitas y nuestro servidor esta llegando al limite de ancho de banda permitido por mes. Aquí puedes ver como grandes portales como Yahoo y AOL han optimizado sus sitios a través de los css sprites.

También desde w3schools puedes ver algunos ejemplos de css sprites y como hacerlos funcionar en tu sitio. El objetivo de este post era para que tuvieras una idea de que son los CSS sprites y como funcionan ya que en las siguientes entradas estaré mostrandoles trucos para aplicarlos directamente en sus blog.

Show Comments

No Responses Yet

Leave a Reply