• Publicidad
  • Contacto
Tech News, Magazine & Review WordPress Theme 2017
  • Noticias
    • Evento
    • Capacitación
    • Recursos
  • Video
  • Podcast
  • Ciencia
    • Salud
    • Ciencia Ficción
    • Historia
    • Marketing Digital
    • Software
      • Seguridad
      • Privacidad
      • Internet
      • Desarrollo/programación
      • Diseño
  • Tecnología
    • Innovación
    • LifeStyle
    • Audio & Video
    • Fotografía
    • Transformación Digital
  • Entretenimiento
    • Ciencia Ficción
    • Cine
    • Trailers
Sin resultados
Ver todos los resultados
Pixelco Tech
  • Noticias
    • Evento
    • Capacitación
    • Recursos
  • Video
  • Podcast
  • Ciencia
    • Salud
    • Ciencia Ficción
    • Historia
    • Marketing Digital
    • Software
      • Seguridad
      • Privacidad
      • Internet
      • Desarrollo/programación
      • Diseño
  • Tecnología
    • Innovación
    • LifeStyle
    • Audio & Video
    • Fotografía
    • Transformación Digital
  • Entretenimiento
    • Ciencia Ficción
    • Cine
    • Trailers
Sin resultados
Ver todos los resultados
Pixelco Tech
Sin resultados
Ver todos los resultados

Crea fácilmente sprites con CSS Sprite Generator

Diego Cambiaso por Diego Cambiaso
16/09/2009
en Desarrollo/programación, Diseño, Internet, Recursos
Tiempo de lectura1 minuto
Compartir en FacebookCompartir en TwitterCompartir en WhatsappCompartir en TumblrCompartir en Telegram

css-sprites-header

Una técnica para hacer que un sitio cargue más rápido es usar sprites CSS; básicamente consiste en colocar en una sola imagen todas las imágenes que utilizamos en una página web como por ejemplo los botones (y todos sus estados, normal, presionado, puntero del mouse sobre éste, etc.). Luego en la página mostramos la porción de la imagen que necesitamos, para esto usamos CSS.

Un forma sencilla de usar esta técnica en nuestros proyectos es usar alguna herramienta como CSS Sprite Generator.

CSS Sprite Generator es una aplicación web que permite subir varias imágenes que luego de procesarlas devolverá una sola imagen con todas ellas incluídas, además generará el código CSS y HTML.


Principales características:

  • Permite cargar varias imágenes al mismo tiempo.
  • Ofrece 3 formatos de salida de imagen: JPG, GIF y PNG.
  • Se pueden incluir efectos rollover.

css-sprites-generator-interfaz

Por cierto, si estas interesado en aprender más sobre la técnica de CSS Sprites, te recomiendo un buen post de las gente de El Webmaster – Optimizando la velocidad de tu web con sprites CSS.

CSS Sprite Generator

Sito: css-sprit.es

Vía: delicious.com/popular

Tags: AccesibilidadCSScss sprites generatorimage spritesimage sprites cssjquery css spritesRecursossprites in cssUsabilidad
Diego Cambiaso

Diego Cambiaso

Comunicador Social, Desarrollador de Software y UX Designer. Blogger desde el 2006, creador de Pixelco Tech. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT

RelacionadoEntradas

Microsoft Teams - Interface
Noticias

Microsoft Teams disponible para usuarios de Office 365 en el mundo

por Diego Cambiaso
20/03/2017

Microsoft liberó Microsoft Teams para usuarios de Office 365 en 181 mercados y en 19 idiomas. Office 365 está diseñado...

Note Links: Conoce una función de Evernote para conectarte con los contenidos esenciales
Recursos

Note Links: Conoce una función de Evernote para conectarte con los contenidos esenciales

por Paula Cambiaso
18/01/2015

Recientemente el equipo de Evernote ha presentado una nueva herramienta llamada Note Links que te permite utilizarla para poder conectarte...

HEX: Shards of Fate - Open BEta

Hex: Shards Of Fate – Disponible en Open Beta

05/12/2014
Template Vamp – Descubre una plantilla gratuita en HTML5 y CSS3

Template Vamp – Descubre una plantilla gratuita en HTML5 y CSS3

02/11/2014
Siguiente
Monstruosa y colorida recopilación

Monstruosa y colorida recopilación

Comentarios 2

  1. asercap says:
    13 años

    xvr … parece k karga mas rápido con sprites y da mentos peticiones http request

Pixelco Tech

VideosReviews - Tutoriales
El HONOR Magic V2 llegará con una función de juego que cambiará el futuro del gaming móvil

El HONOR Magic V2 llegará con una función de juego que cambiará el futuro del gaming móvil

25/08/2023
    Resistencia: La última esperanza de la humanidad – Trailer

    Resistencia: La última esperanza de la humanidad – Trailer

    12/08/2023
      Misión: Imposible – Sentencia Mortal Parte I 

      Misión: Imposible – Sentencia Mortal Parte I

      12/08/2023
        2001 Space Odyssey una historia de evolución que incluye IA

        2001 Space Odyssey una historia de evolución que incluye IA

        12/08/2023
          Master E-Tech el utilitario 100% eléctrico ya disponible en Colombia

          Master E-Tech el utilitario 100% eléctrico ya disponible en Colombia

          12/08/2023
            4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

            4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

            26/05/2023
              Chuseok, un reencuentro con lo tradicional

              Chuseok, un reencuentro con lo tradicional

              29/09/2023
              OPPO Reno10 5G: el nuevo smartphone experto en retratos llega a Colombia

              OPPO Reno10 5G: el nuevo smartphone experto en retratos llega a Colombia

              28/09/2023
              ¿Tiene mascota en casa? Aproveche la tecnología y mantenga su espacio limpio de manera fácil y rápida

              ¿Tiene mascota en casa? Aproveche la tecnología y mantenga su espacio limpio de manera fácil y rápida

              27/09/2023
              Qué es la lógica difusa y cómo funciona

              Qué es la lógica difusa y cómo funciona

              26/09/2023
              En un TV, el sonido es tan importante como la imagen

              En un TV, el sonido es tan importante como la imagen

              26/09/2023
              Paisaje pixelado del desierto con cactus con la leyenda Westworld

              Westworld fue la primera película que utilizó graficos por computadora

              23/09/2023

              Pixelco Tech

              Pixelco Tech es sitio de noticias de tecnología, diseño y desarrollo web e Internet escrito por profesionales.

               

              Objetivo de Pixelco Tech

              Informar, promocionar, proporcionar recursos y ayuda sobre el diseño y desarrollo web, estándares, Internet y tecnología.

              Buscar

              Sin resultados
              Ver todos los resultados
              • Contacto
              • Publicidad
              • Sobre Pixelco
              • Política de Privacidad
              • Términos del Servicio

              © 2023 Pixelco por Diego Cambiaso.

              Sin resultados
              Ver todos los resultados
              • Noticias
              • Video
              • Podcast
              • Ciencia
              • Tecnología
              • Entretenimiento
                • Ciencia Ficción
                • Cine
                • Trailers
              • Pixelco
                • Sobre Pixelco
                • Política de Privacidad
                • Política de cookies
                • Términos del Servicio
                • Publicidad

              © 2023 Pixelco por Diego Cambiaso.

              Welcome Back!

              Login to your account below

              Forgotten Password?

              Retrieve your password

              Please enter your username or email address to reset your password.

              Log In

              Add New Playlist

              Este sitio web utiliza cookies. Si continúa utilizando este sitio web, está dando su consentimiento para que se utilicen cookies. Visite nuestra Política de Privacidad y Política de Cookies.