Spritebox: Generare CSS Sprites da un’immagine

- Letture: 2.515

Spritebox è un servizio gratuito che permette di generare il codice CSS per usare immagini in siti web con la tecnica Sprites.

Avevamo visto in passato la tecnica CSS Sprites che consiste nel caricare una singola immagine e spostarla con l’ausilio di codice CSS al fine di aver una sola richiesta, allegerendo la pagina e velocizzandone la visualizzazione.

Dal punto di vista dei CSS, tutto consiste nell’usare la proprietà background-position per visualizzare l’area dell’immagine che ci interessa.

Una volta creata la nostra immagine singola con tutti gli elementi grafici, ci basterà caricarla dal pannello e selezionare le porzioni da rendere visibili.

Avremo a disposizione un pannello nel quale oltre a caricare l’immagine, avremo la possibilità di prelevare il codice CSS e visualizzare alcuni paramentri come altezza, larghezza, ripetizione e ingombro.

Grazie all’uso del mouse e da tastiera potremo selezionare con perfetta precisione i nostri elementi su sfondo millimetrato e generare il codice CSS.

Utilizzare e conoscere servizi gratuiti, che ci permettono di ottimizzare i tempi di sviluppo è uno degli aspetti fondamentali per un web designer.

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Managing Partner di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

5 Commenti

  1. Conoscere gli strumenti giusti è il primo passo per ottimizzare il proprio lavoro! Sante parole Julius continua così!

  2. sante parole!Mattia ha scritto:

    Conoscere gli strumenti giusti è il primo passo per ottimizzare il proprio lavoro! Sante parole Julius continua così!

    il guaio magari è che possono essercene parecchi e chi ne sa poco di webdesign si scoraggia facilmente e lascia perdere le buone cose.

Commenti