Generador HTML5 de CSS Sprite

por .

HTML5 se esta convirtiendo en una plataforma espectacular para la creación de aplicaciones online, su sencillez y potencia nativa lo transforman en una solución ideal para realizar muchas herramientas que antes no se hubiesen podido realizar sin la utilización de frameworks como por ejemplo jQuery, o bien, cualquier lenguaje del lado del servidor.

Un excelente ejemplo de diseño de herramienta utilizando HTML5 es Stitches, un generador de CSS Sprites completamente desarrollado utilizando HTML5, que funciona perfectamente tanto en Chrome como en Firefox.

generador de css sprite HTML5

Stitches tiene pocas dependencias: jQuery 1.7.1+, Modernizr, Dropfile, Flashcanvas. Las mismas son utilizadas cuando el navegador no soporta las propiedades HTML5 necesarias para un correcto funcionamiento, brindando un más amplio abanico de compatibilidades.

Como implementar este proyecto:

Instalación de las bibliotecas y dependencias:

<link rel="stylesheet" href="css/stitches-0.5.18-min.css">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/modernizr-2.0.6.min.js"></script>
<script src="js/stitches-0.5.18-min.js"></script>

Inicializar el plugin que carga el generador diseñado con HTML5:

<div id="stitches"></div>

<script>
jQuery(document).ready(function ($) {
	var $stitches = $("#stitches");
	Stitches.init($stitches, {jsdir: "js"});
});
</script>

Web: Stitches

Categorizado en: