SummArg | Cursos y recursos para webmasters

05/05/2010

Generador automático de CSS Sprites

El uso de CSS Sprites es una práctica cada vez más difundida y recomendada a la hora de utilizar, de modo inteligente, tus recursos online. Un sprite es una imagen que contiene a su vez varias imágenes que utilizaremos en nuestra página.

Tal como muestra la imagen de la derecha, podemos ver una cantidad de íconos que no se desplegarán todos a la vez, sino que a través de nuestro CSS le indicaremos qué porción del gráfico deseamos tomar para ser mostrado.

A través de la propiedad background-position designamos el punto del gráfico que queremos tomar, y con width y height el tamaño final de lo que habremos de abarcar para luego visualizarlo.

Una gran herramienta para hacer simple este trabajo es CSS Sprites Generator. Esta herramienta online nos deja subir cuantas imágenes necesitemos por separado, pudiendo incluso asignarles valores de padding y border entre otros. Nos devuelve la imagen final que resulta de la unificación de las que hayamos subido y un cuadro con las posiciones del background a las que corresponde cada imagen inicialmente subida. ¡Muy práctico para iniciarse en este tema!

Mas info en Tensaiweb

Dejar un comentario