stitches-css-teaser_EN

Puntadas: generador de sprites CSS gratuito

Como sabemos, menos archivos para descargar significan un mejor rendimiento de carga y reproducción de la página. Por lo tanto, los íconos y otras imágenes, particularmente las imágenes pequeñas, a menudo se combinan en un sprite. Un sprite es una colección de varias imágenes puestas en un archivo de imagen. Crear un sprite manualmente requiere algo de trabajo. Las imágenes se organizan en un archivo de imagen y su posición, ancho y alto deben definirse en una hoja de estilo. El generador de sprites de Stitches acelera enormemente estos procesos.

Subir imágenes simples

Probablemente no haya una manera más fácil de crear sprites que con Puntadas. Las imágenes que desea combinar en un archivo sprite se pueden cargar a través de una interfaz web. Es compatible con los formatos JPG, PNG y GIF. Una vez cargadas, las imágenes se colocan automáticamente en un espacio de trabajo. Puede determinar si desea que las imágenes se organicen como un bloque compacto, una al lado de la otra o una debajo de la otra. También puede ajustar el espacio entre las imágenes individuales. Cada imagen requiere un nombre distinto, de modo que pueda asignarse a un elemento HTML más adelante. Además, se agrega un prefijo al sprite que precede a todas las clases que se generarán.

puntadas_descargas

Una vez que todos los archivos de imagen se cargan y se nombran, puede descargar el archivo sprite como PNG acompañado de la hoja de estilo adecuada. El archivo de hoja de estilo contiene una clase general con el nombre del prefijo donde el archivo sprite está incrustado como imagen de fondo. Además, se define una clase para cada imagen que especifica la posición de la imagen dentro del sprite a través de «posición de fondo». También contiene información sobre el ancho y el alto de las imágenes. El nombre de clase para cada imagen consiste en el prefijo y el nombre específico que le dio a cada imagen en el generador. Después de incrustar la hoja de estilo en un documento HTML, puede asignar cada imagen de sprite a un elemento HTML a través de la clase adecuada.

<div class="sprite sprite-facebook"></div>

En el ejemplo anterior, asumimos que el prefijo de sprite se llama «sprite». Ese es el nombre predeterminado. Además de la clase «sprite», «sprite-facebook» también se asigna al elemento

. Entonces, se mostraría la imagen con el nombre «facebook». La altura y el ancho de la imagen también se asignan al elemento

.

Aún más compacto con URI de datos

Si encuentra que un PNG y un archivo de hoja de estilo aún causan demasiadas solicitudes, puede colocar todo el sprite con todos los archivos de imagen en la hoja de estilo. Para hacerlo, incruste el archivo de imagen usando un URI de datos dentro del archivo de hoja de estilo. Tenga en cuenta que el tamaño del URI de datos es mayor que el tamaño de los archivos «normales», pero tendrá un archivo con todo el contenido. Dependiendo de la cantidad de imágenes que coloque en el sprite, puede incrustar varias solicitudes individuales dentro de una solicitud. Si no usa URI de datos, serán al menos dos solicitudes. Si usa LESS, puede elegir la sintaxis LESS en lugar de un archivo CSS estándar.

Guardar ajustes

Una vez que haya creado un sprite complejo con Stitches y desee agregar o eliminar gráficos más adelante, puede guardar todas las configuraciones del sprite como un archivo de texto. Este archivo contiene las posiciones, nombres y todas las imágenes del sprite. Copie y pegue el contenido del archivo de texto en el campo de importación del generador de sprites para cargar la configuración. Luego, puede editar su sprite y regenerarlo, sin la necesidad de cargar cada imagen nuevamente. La nueva configuración también se proporciona como un archivo de texto.

Host Stitches usted mismo

Si no desea utilizar Stitches en el sitio del proyecto del desarrollador, puede alojar el generador usted mismo. Está autorizado bajo la licencia MIT y se puede instalar rápidamente. La biblioteca requiere jQuery, Bootstrap y Modernizr. Stitches no utiliza un lenguaje de programación del lado del servidor y, por lo tanto, se puede operar sin conexión. El paquete de descarga contiene todos los archivos necesarios, incluidas las bibliotecas externas. Una vez que todos los archivos JavaScript y de hojas de estilo se hayan agregado al encabezado HTML, solo necesita marcar un contenedor.

<div class="stitches"></div>

No hay nada más que hacer además de asignar la clase «puntadas» a un elemento. Opcionalmente, se puede asignar una configuración predeterminada que se carga automáticamente en cada inicio. Marque las imágenes y sus nombres para el sprite a través de HTML.

<div class="stitches">
  <img src="https://www.noupe.com/design/facebook.png"data-name="facebook" />
</div>

En el ejemplo anterior, se incrusta un archivo PNG. El nombre de las imágenes se especifica mediante el atributo de datos «nombre-datos». El sitio del proyecto proporciona una documentación completa que lo ayuda a través de la instalación y configuración. Aquí encontrará el texto fuente bien comentado de todos los archivos JavaScript.

Conclusión

Stitches es una herramienta útil para crear sprites fácilmente. Lo que lo hace aún más interesante es el hecho de que el generador se puede usar independientemente del sitio del proyecto. Stitches se ejecuta en los navegadores actuales que admiten HTML5, ya que utiliza las API de HTML5.

(dpe)

#Puntadas #generador #sprites #CSS #gratuito

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *