Sprite CSS: cosa sono e come usarli. come creare sprite CSS

Buon giorno, oggi voglio parlarti di come creare icone sprite CSS per il tuo sito. Sì, in altre questioni, non solo le icone, ma anche qualsiasi altro elemento, ad esempio pulsanti, menu, ecc. Almeno la grafica dell'intera landing page.

L'articolo dovrebbe andare all'intestazione, poiché l'uso degli sprite velocizza il caricamento della pagina, poiché un'immagine, anche più grande, si carica più velocemente di molte altre più piccole. Questo perché ci sono meno viaggi di andata e ritorno al server.

Per coloro che non sono nell'argomento, lo sprite si presenta così:

Cioè, in relazione al web, questa è un'immagine con molti elementi, ognuno dei quali viene mostrato nel posto giusto sul sito a causa del posizionamento.

Ma la questione di quanto più velocemente o più lentamente venga caricata la pagina usando gli sprite, toccherò nel prossimo articolo e rientrerà sicuramente nella categoria giusta. Quindi iscriviti Twitter per non perdere l'annuncio dell'articolo.

E in questo post, cercherò di mostrarti il ​​funzionamento interno di come vengono utilizzati gli sprite sul web, usando l'esempio delle icone del mio blog.

Quindi, ho creato un semplice sprite di icone in Photoshop. Non mi sono preoccupato molto, ma ho creato un paio di ciascuno dei tipi, per mostrare non solo come usare uno sprite, ma anche come gli sprite possono essere usati per creare pseudo-animazione.

Creazione di uno sprite CSS - markup html

Ora devi abbozzare il markup html. Niente di insolito. Lista non ordinata:

Invece di "#" - inserisci gli indirizzi dei tuoi account. Aggiungi un titolo ai link. Passiamo ora allo styling!

Creazione di uno sprite CSS - markup CSS

Imposta stili contenitore:

Socsetti (
larghezza: 270px
altezza: 150px;
margine:200px automatico;
sfondo: url(../images/bg-soc.png) no-repeat;
imbottitura: 15px
}

Descrivere gli stili per il testo e un elenco non ordinato che fluttua a sinistra (procedura standard per menu ed elementi simili)

Socseti ul (
overflow: nascosto;
larghezza: 246px;
margine: 20px automatico;
}

Socseti ul li (
galleggiante: sinistra;
margine-sinistra:2px;
}

Socseti ul li: ultimo figlio(
margine-destra: 2px
}

Ora inizia il divertimento. Imposta stili generali per i link:

Socseti ul li a (
blocco di visualizzazione;
larghezza: 59px
altezza: 59px;
}

Come puoi vedere, ho commesso un piccolo errore durante la creazione dello sprite, che ha portato a una dimensione idiota di 59x59 px, ma ciò non ha influito sull'esperienza visiva. Continuiamo...
Imposta un'immagine di sfondo per il primo collegamento.

un. twitter(

transizione: .3s;
}
un. twitter: passa il mouse(

transizione: .3s;
}

Affinché l'elemento necessario dello sprite venga visualizzato, dovrebbe essere posizionato. Per fare ciò, dopo aver impostato lo sfondo del collegamento, è necessario impostare le coordinate.

Ad esempio, potresti aver notato che il primo elemento sullo sprite è l'icona del social network Vkontakte e la prima icona nel menu social. icone - "Twitter". Cioè, se le mie icone sono larghe 59px, allora devo spostare lo sfondo di -59px. Inoltre, voglio che il colore cambi da grigio a colorato. Per fare ciò, devo abbassare lo sfondo di 59px. Che è mostrato qui:

un. twitter(
sfondo: url(../images/css-sprite-iconok2.png) -59px -59px no-repeat;
transizione: .3s;
}

Affinché gli stili di classe cambino al passaggio del mouse, è necessario impostare la pseudo-classe al passaggio del mouse. Cosa sto facendo qui:

un. twitter: passa il mouse(
sfondo: url(../images/css-sprite-iconok2.png) -59px 0 no-repeat;
transizione: .3s;
}

E affinché l'immagine cambi posizione, ho cambiato le coordinate di visualizzazione.

La proprietà di transizione viene utilizzata per impostare la velocità alla quale la posizione cambia. L'ho impostato su 0,3 secondi.

In modo simile, devi impostare la posizione per il resto degli elementi sprite, spostandola di 118 px per visualizzare l'icona RSS e riportarla a 0 px per visualizzare l'icona VK.

Spero che l'articolo ti sia stato utile e ora utilizzerai gli sprite CSS per i tuoi siti. Domani proverò ad analizzare quanto più velocemente si carica il sito quando si utilizza questa tecnologia.

Circa una settimana fa, uno dei miei iscritti mi ha chiesto di parlarne Sprite CSS cos'è in generale e con cosa mangiano. Pertanto, oggi ho deciso di scrivere questo articolo in cui ti dirò, cosa sono gli sprite CSS e dove vengono utilizzati.

sprite css- questa è un'immagine combinata che contiene molte immagini diverse e utilizza la proprietà posizione di sfondo mettiamo l'immagine giusta al posto giusto. Diciamo che abbiamo un pulsante e questo pulsante cambia aspetto quando ci passi sopra con il cursore del mouse. Puoi fare, ad esempio, 2 immagini e quindi sostituire l'una o l'altra immagine come sfondo del pulsante. Ma lo svantaggio di questo metodo è evidente: 2 volte più file, circa 2 volte la dimensione, quindi, in 2 tempi di caricamento più lunghi di 1 Immagine. E così Tecnica degli sprite CSS ti consente di creare una sola immagine, che lo farà immediatamente 2 sfondo del pulsante.

Per chiarire, risolviamo questo problema. Abbiamo un'immagine, diciamo, altezza 20 pixel e larghezza 100 pixel. Il pulsante ha una larghezza 50 pixel e altezza 20 pixel. In un'immagine, posizioniamo le immagini di entrambi gli stati (uno dopo l'altro). codice HTML sarà così:

Pulsante

E codice CSS:

UN(
background: url("button.jpg") no-repeat in alto a sinistra; // Sfondo del pulsante
blocco di visualizzazione; // Rendilo un elemento di blocco
altezza: 20px; // Altezza pulsante
larghezza: 50px // Larghezza pulsante
decorazione del testo: nessuna; // Rimuovi la sottolineatura
}
a: passa il mouse (
posizione di sfondo: in alto a destra; // Modifica la posizione dello sfondo per sfalsare l'immagine
}

In un modo così astuto, puoi memorizzare molte immagini in un'unica immagine. Sottolineo che è l'insieme delle immagini, e non solo 2 . A volte quasi l'intero sito è costituito da un'immagine, che contiene tutte le immagini utilizzate. Non penso che questo sia molto buono, ma ci sarà un numero minimo di file di immagine e una dimensione minima di caricamento della pagina, che è sempre buona.

È piaciuto:
27

Non gradito: 4

Nessuna traduzione disponibile.

sprite

prima o dopo"prima""dopo""dopo"

uccello_arrabbiato arrabbiato.png. indice.html

Nessuna traduzione disponibile.

Gli sprite CSS sono elementi grafici per il tuo sito Web combinati in un unico file grafico. "Perché un file?" - tu chiedi. Il fatto è che questo approccio alla memorizzazione delle immagini consente di aumentare le prestazioni delle pagine Web, oltre a memorizzare le immagini grafiche in modo più organizzato. Diamo un'occhiata ad alcune delle migliori pratiche per l'utilizzo degli sprite. Il nome stesso degli sprite potrebbe ricordarti gli sprite di giochi, le console di gioco retrò e persino i giochi per browser che sono così popolari oggi:

Quindi, applicabile al web design, sprite- è solo un file di grandi dimensioni contenente diverse immagini per il tuo sito, risparmiando tempo nel download e nel trasferimento del file sulla rete. Quando uno sprite contiene, ad esempio, 20-30 immagini, questo può alleggerire notevolmente il carico sul server, perché se queste immagini fossero archiviate separatamente, il server dovrebbe effettuare rispettivamente 20-30 richieste separate per ottenere ciascuna di queste immagini . Grazie allo sprite, solo una richiesta HTTP va al server - per ottenere una singola immagine. Lo sprite potrebbe non sembrare visivamente "leggibile" agli occhi, poiché il suo compito principale è solo quello di raccogliere diversi "pezzi" del tuo design insieme. Ad esempio, uno sprite potrebbe assomigliare a questo:

Gli sprite sono usati dalla maggior parte dei siti moderni e il noto VKontakte non fa eccezione. Ad esempio, questo è il modo in cui memorizza "pezzi" dell'interfaccia in un file, ovvero icone familiari a tutti:

Il punto essenziale dell'utilizzo degli sprite CSS è che devi solo inviare un file grafico contenente tutte le tue immagini al server, non molte singole immagini - e tramite CSS puoi visualizzare qualsiasi piccolo segmento da questo file grafico come sfondo per un elemento. Alcune persone pensano che le singole immagini si carichino più velocemente, ma non è così. Quando si carica un file grafico con molte immagini, inviamo una sola richiesta al server e quando si carica un numero elevato di immagini, inviamo più richieste al server. La combinazione di immagini in un unico file consente non solo di ridurre significativamente il numero di richieste HTTP, mae ridurre la dimensione complessiva del file immagine.

Lascia che ti dia un altro esempio di sprite. Ecco come un noto sito occidentale dedicato al design conserva elementi grafici:

Potresti chiedere: qual è il momento migliore per preparare uno sprite? Ci sono due diversi approcci per questo.

Approcci diversi: creare uno sprite prima e dopo la creazione di un sito

Esistono due approcci comuni durante la creazione di uno spritesheet: crearloprima o dopocreando il tuo sito. Puoi inserire tutte le immagini nel foglio sprite prima di creare il sito. Questo è ciò che chiamiamo approccio"prima". Inoltre, puoi creare tutte le immagini come file separati, semplificandone la modifica. Una volta che il sito è stato creato e tutte le immagini sono pronte, puoi creare rapidamente e facilmente un foglio sprite, a mano o utilizzando uno dei numerosi strumenti. Questo è ciò che chiameremo approccio"dopo". Se i fogli sprite sono nuovi per te o sei nuovo nel web design, l'approccio è più adatto a te."dopo". Ci sono molte utilità, servizi e programmi per aiutarti a creare sprite, la maggior parte dei quali sono distribuiti e disponibili gratuitamente.

Disporre le immagini in uno sprite in modo organizzato

Quando si crea uno sprite in Photoshop, è consigliabile posizionare immediatamente tutte le immagini in modo organizzato e in una sequenza specifica scelta da te, in modo che in seguito sia facile e semplice lavorarci. Prova ad arrotondare sempre lo spazio per ogni immagine sprite ai 10 pixel più vicini o lascia più spazio intorno a loro se hanno tutte le stesse dimensioni. Quando si tratta di scrivere uno stile CSS, non sarà necessario annotare le misure delle coordinate e sarà meno probabile che dimentichi i numeri con le coordinate delle immagini desiderate. Ecco un esempio di posizionamento riuscito di diverse immagini in uno sprite:

Dalla teoria alla pratica! Come creare un Angry Birds Bird animato usando uno Sprite

Quindi, abbiamo familiarizzato con il concetto di sprite nel Web design, ma la teoria senza pratica non è nulla. Pertanto, ora creeremo il nostro primo sprite con te e impareremo come creare una semplice animazione su una pagina HTML. Il nostro esempio sarà basato su un personaggio del gioco Angry Birds: questo è un divertente uccello rosso. Per prima cosa, prepariamo un'immagine sprite in formato .PNG contenente 4 fasi di animazione degli uccelli:

Creiamo una directory da qualche parte sul disco uccello_arrabbiato- lì posizioneremo i file del nostro esempio. Salviamo lo sprite con gli uccelli in questa directory e denominiamo il file arrabbiato.png. Il passaggio successivo consiste nel creare un file nella stessa directory con il nome indice.html- questa sarà la nostra pagina di prova con animazione. Quindi, apri questo file nell'editor e inserisci il seguente codice:

Lascia che ti spieghi un po' cosa abbiamo appena fatto. Per prima cosa, abbiamo assegnato una codifica al nostro documento HTML UTF-8, il che significa che dobbiamo mantenere il nostro indice.html in questa codifica. Puoi anche impostarne un altro, ad esempio windows-1251, non è essenziale per il nostro compito. Successivamente, abbiamo collegato il file di stile al documento style.css(non è ancora nel nostro catalogo) uccello_arrabbiato, lo creeremo in seguito). Abbiamo anche impostato un collegamento a uno script esterno e collegato la libreria jQuery: con l'aiuto di jQuery cambieremo dinamicamente le immagini del nostro uccello e cambieremo le sue "fasi" dallo sprite. Abbiamo anche preparato un blocco JavaScript interno, dove collocheremo il codice che fa l'animazione dell'uccello. Bene, e infine, il corpo principale del documento contiene un singolo collegamento ipertestuale, all'interno del quale si trova un blocco DIV e il suo ID è impostato come birdImage e la classe predefinita è bird-sleeping . Ciò significa che il nostro uccello "dormirà" quando aprirà la pagina - questo corrisponde all'immagine in basso a sinistra all'interno dello sprite - dove i suoi occhi sono chiusi. Ora è il momento di "tagliare" il nostro sprite, cioè estrarre singole immagini da esso.

Tagliare uno sprite usando il servizio SpriteCow.Com

Il compito di "tagliare" uno sprite è piuttosto laborioso: richiede attenzione a non commettere errori con le coordinate che definiscono ogni immagine nello sprite. Fortunatamente, oggi ci sono servizi che rimuovono completamente questo mal di testa dal designer e dal designer del layout. Uso e consiglio http://spritecow.com per affettare. L'essenza del servizio è semplice e molto conveniente: selezioniamo ogni immagine di uccello con il mouse e SpriteCow ci fornisce un codice CSS pronto con le coordinate. Tutto quello che dobbiamo fare è impostare 4 stili per ogni fase dell'uccello! Dopo essere entrati nel sito, vediamo 2 pulsanti: "Apri immagine" e "Mostra esempio". Abbiamo bisogno del primo pulsante, fai clic su di esso:

Nella finestra di dialogo che si apre, seleziona il nostro file sprite arrabbiato.png, dopodiché vediamo come il nostro sprite è stato caricato sul sito. Successivamente, dobbiamo definire il colore di sfondo, per questo facciamo clic sulla barra degli strumenti "Scegli sfondo" e puntiamo all'area bianca del nostro sprite - questo taglierà correttamente ogni fase dell'uccello:

Seleziona la prima immagine e ottieni automaticamente il codice CSS per essa:

Ora è il momento di creare nel nostro catalogo uccello_arrabbiato file di stile style.css. Inseriamo in sequenza 4 pezzi di codice CSS generati lì, ma invece della classe .sprite standard offertaci da SpriteCow, chiamiamo i nostri stili più comprensibili. Inoltre, poiché l'immagine dello sprite è memorizzata direttamente nella radice della directory, rimuoveremo l'elemento del percorso non necessario dalla proprietà background - img/. L'ho preso così:

/* uccello "normale". Immagine in alto a sinistra in sprite */ .bird-normal ( background: url("angry.png") no-repeat -12px -16px; width: 97px; height: 94px; ) /* Bird "Happy". Immagine in alto a destra in sprite */ .bird-happy ( background: url("angry.png") no-repeat -118px -17px; width: 97px; height: 94px; ) /* Uccello "dormiente". Immagine in basso a sinistra in sprite */ .bird-sleeping ( background: url("angry.png") no-repeat -12px -120px; width: 97px; height: 94px; ) /* Uccello "arrabbiato". Immagine in basso a destra in sprite */ .bird-angry ( sfondo: url("angry.png") no-repeat -118px -120px; larghezza: 97px; altezza: 94px; )

L'ultimo passaggio è scrivere il codice jQuery che crea l'animazione.

Ora che abbiamo affettato con successo lo sprite e posizionato 4 stili per ogni immagine nel nostro file style.css, dobbiamo solo scrivere il codice jQuery che aggiungerà l'animazione quando si passa il mouse sopra il nostro collegamento ipertestuale e quando si fa clic sul collegamento. Come ricordiamo, per impostazione predefinita abbiamo la classe bird-sleeping impostata, ad es. il nostro uccello rosso "dormerà" quando aprirà un documento :)

Tutta l'animazione sarà basata su 3 metodi jQuery:

• hover - gestore per passare il mouse sopra il collegamento e "lasciare" il cursore dal collegamento. Quando spostiamo il cursore, l'uccello si "sveglierà" - ad es. la classe diventerà normale
• mousedown - gestore per fare clic con il pulsante sinistro del mouse su un collegamento. In questo caso, l'uccello diventerà "felice", ad es. Il blocco DIV riceverà il classbird-happy
• mouseup - gestore per rilasciare il pulsante sinistro del mouse. Quando viene rilasciato, l'uccello diventerà "arrabbiato", ad es. Al blocco DIV viene assegnata la classe bird-angry

Quindi, incolla il seguente codice nel punto che abbiamo preparato nel blocco JavaScript interno posizionato nella pagina:

$(document).ready(function() ( // ecco il codice jQuery che crea l'animazione $("#birdImage").hover(function() ( $(this).removeClass("bird-sleeping"); $ (this).removeClass("uccello-arrabbiato"); $(this).removeClass("uccello-felice"); $(this).addClass("uccello-normale"); ), function() ( $( this ).removeClass("uccello-normale"); $(this).removeClass("uccello-arrabbiato"); $(this).removeClass("uccello-felice"); $(this).addClass("uccello- dormendo" "); )); $("#birdImage").mousedown(function() ( $(this).removeClass("bird-sleeping"); $(this).removeClass("bird-normal"); $( this).removeClass("uccello-arrabbiato"); $(this).addClass("uccello-felice"); )).mouseup(function() ( $(this).removeClass("uccello-che dorme") ; $ (this).removeClass("bird-normal"); $(this).removeClass ("bird-happy"); $(this).addClass ("bird-arrabbiato"); )); ));

Pronto! Animazione di prova

Bene, questo è tutto! Il nostro uccellino è pronto e ha dato vita alla pagina con la sua animazione! :) È possibile visualizzare la demo. Scarica l'archivio con un esempio - in fondo all'articolo.

L'industria dei computer è cresciuta molto, molto in alto negli ultimi anni. Se prima i giochi per computer erano solo intrattenimento per una ristretta cerchia di fan, ora è qualcosa di più. Possono essere interpretati da persone di tutte le età e vengono creati design che soddisfano anche i gusti più delicati. E, soprattutto, sono apparse incredibili opportunità a cui non si sarebbe potuto pensare prima, quindi ora i giochi per computer possono essere quasi indistinguibili dalla realtà in termini di grafica e fisica, possono immergere l'utente in mondi sconosciuti, permettendogli di vivere storie incredibili e sii la chiave per loro carattere. Ma allo stesso tempo, alcune persone non vogliono limitarsi al processo di "giocare": sono affascinate dalla procedura per creare giochi. Tuttavia, la maggior parte di questi sognatori rimane a livello di fantasia, perché credono che questo processo sia troppo complicato. Non è proprio così, come dimostra l'enorme numero di sviluppatori indipendenti che ora stanno producendo molti progetti senza grandi budget e senza il supporto degli editori. Devi solo iniziare in piccolo e andare avanti gradualmente. In questo articolo imparerai cosa sono gli sprite per i giochi e come usarli, in modo da poter quindi iniziare a creare i tuoi progetti.

Cosa sono gli sprite?

Se hai un gioco per computer sul monitor di fronte a te, cosa vedi di fronte a te? Il guscio grafico di questo progetto, una varietà di texture composte da minuscoli pixel. Se hai intenzione di creare un gioco per computer, devi lavorare molto con la grafica. Ma se non stai ancora mirando a un grande progetto, non è necessario lavorare perfettamente con gli editor grafici 3D. Gli sprite per i giochi che puoi scaricare su Internet ti aiuteranno qui. Ma cos'è? Come puoi usarli e in che modo semplificherà il tuo compito? Gli sprite di gioco sono trame già pronte per personaggi, oggetti e così via che puoi scaricare sul tuo computer e quindi utilizzare nel processo di creazione di un gioco. Ciò significa che non avrai bisogno di disegnare tutti gli oggetti nel gioco, così come ogni fase del suo movimento: avrai già tutto questo pronto. Come puoi vedere, gli sprite di gioco possono davvero semplificarti la vita.

Vista sprite

Ora hai un'idea generale di cosa siano gli sprite di gioco, ma questo non basterà per usarli nella pratica. Devi capire cosa sono esattamente e come applicarli nella creazione di giochi. Se hai intenzione di utilizzare gli sprite, devi scaricarli sul tuo computer. Nella maggior parte dei casi, sembreranno un file grafico grande o addirittura enorme con dozzine o addirittura centinaia di piccole immagini su uno sfondo trasparente. Di conseguenza, puoi tagliare questo file di grandi dimensioni in piccoli per avere accesso diretto ai tuoi sprite. Potrebbero non essere necessari alcuni di essi e puoi ritagliarli, quindi questo metodo è molto più conveniente rispetto al download di decine o centinaia di singole immagini. Seleziona semplicemente un file di grandi dimensioni, contrassegna un'area e hai uno sprite pronto.

Usando gli sprite

Come ben capisci, nella maggior parte dei casi sarai in grado di trovare sprite per giochi 2D, poiché le immagini 3D non sono così standardizzate, quindi ci vorrà molto spazio per trasmettere tutti i movimenti di un oggetto 3D. Allo stesso tempo, lavorare con gli sprite 2D è estremamente semplice. Tutto quello che devi fare è caricare gli sprite nell'editor in cui stai creando e unirli per creare effetti di movimento. E poi carica nel livello e goditi il ​​risultato.

Passaggio dagli sprite alla grafica

Non sarai in grado di usare gli sprite per il resto della tua vita per creare giochi, quindi se ti prefiggi obiettivi ambiziosi, devi imparare a lavorare o cercare un assistente che conosca questa abilità.

Ci sono molti metodi per ottimizzare le pagine web. Alcuni funzionano, altri no. Tuttavia, ci sono alcuni metodi obbligatori per qualsiasi sito e blog. Uno di questi di cui volevo parlarti.

Uno dei principali metodi di ottimizzazione della pagina del sito web. Pertanto, oggi parleremo di come combinare gli sprite di immagini sul sito in CSS, aumentando così la velocità del loro caricamento.

Un po' di storia

In un lontano, lontano passato, quando i modem cinguettavano negli appartamenti e le velocità di connessione non superavano i 5 Kbps, le persone si interrogavano sul difficile compito di come far caricare i siti più velocemente e allo stesso tempo non pagare cifre favolose per il traffico in entrata. Hanno pensato, così hanno pensato, e hanno avuto l'idea di organizzare le immagini utilizzate sulla pagina in sprite.

E si parte...

Combinare le immagini in uno sprite

E quindi, come abbiamo scoperto in precedenza, uno sprite è costituito da più immagini disposte in un'unica unità su uno sfondo trasparente, a cui si accede utilizzando la proprietà CSS posizione di sfondo. Ma per favore non confonderlo con un collage. Sprite ≠ collage.

Per ottenere uno sprite, devi inserire tutti i pulsanti, le icone, i proiettili e altre schifezze nel modo più compatto possibile in un unico file PNG. Non dimenticare che lo sfondo deve essere trasparente. Ora diamo un'occhiata a un esempio.

Diciamo che abbiamo un file PSD con un pulsante così bello in 3 stati.

Cosa fa il blogger-coder autodidatta medio? Taglia il pulsante in ogni stato e lo salva in file separati. Cioè, un pulsante scatta 3 foto da questa brava persona. E se diventi teso, ricorda che ogni immagine sul sito è una richiesta HTTP aggiuntiva che carica il server e il tuo blog è sempre più lento e sempre più lento e sempre più lento e sempre più lento e sempre più lento...

Per evitare che ciò accada, è molto più logico salva il pulsante in un file. Per fare ciò, apriamo lo stesso file PSD, rimuoviamo frecce, iscrizioni e sfondo inutili da esso e disponiamo tutti gli stati dei pulsanti il ​​più vicino possibile l'uno all'altro senza sovrapposizioni.

Ecco cosa ci siamo ritrovati. In nessun caso i pulsanti devono intersecarsi tra loro.

Ottimo, abbiamo preparato un file grafico, ora lascia che ti mostri come crearlo.

Disposizione degli sprite

Il layout degli sprite CSS non è diverso dal layout delle immagini ordinarie, ad eccezione di un MA. Devi conoscere non solo la dimensione esatta dell'immagine che desideri visualizzare, ma anche le sue coordinate. Ad esempio, il nostro intero sprite è largo 330 px e alto 150 px.

Ma abbiamo solo bisogno di renderizzare un pulsante che sia largo 227px e alto 41px, specificandone le coordinate esatte. Se non hai un buon editor html, posso farlo.

Crea un file indice.html e scrivi le righe di codice necessarie, doctype e tutto il resto.

Dopo che tutte le azioni standard sono state eseguite, proviamo a visualizzare il nostro pulsante.

Dopo etichetta corpo creare un contenitore div con classe pulsante- questo sarà il nostro pulsante.

Qui è dove finisce il nostro html e ora dobbiamo scrivere stili CSS per il pulsante.

Il codice seguente mostra che prima dichiariamo una classe pulsante. Quindi utilizzando le proprietà altezza e larghezza imposta la dimensione del nostro pulsante. Proprietà sfondo ti permette di selezionare un file che useremo come sprite, e posizione di sfondo imposta le coordinate dell'immagine di cui abbiamo bisogno in questo sprite. Tutto è semplice.

Diamo un'occhiata più da vicino alla proprietà posizione di sfondo.

Come puoi vedere dal codice sopra, ha due significati. Il primo valore consente di impostare le coordinate dell'immagine lungo l'asse X e il secondo, quindi, lungo l'asse Y. Il nostro pulsante non salta da nessuna parte lungo l'asse X, poiché tutti gli stati sono uno sotto l'altro. Pertanto, affinché il secondo stato del pulsante appaia al passaggio del mouse, è necessario modificare il valore responsabile dell'asse Y.

Come sai, e in caso contrario, allora sì, ogni pulsante ha diversi stati.

1. Normale - stato normale o normale
2. Al passaggio del mouse: lo stato del pulsante quando si passa il mouse sopra
3. Attivo: lo stato del pulsante al momento della pressione

Abbiamo sfruttato queste proprietà.

Se sei troppo pigro per creare sprite manualmente e generalmente ti preoccupi di Photoshop, un meraviglioso servizio gratuito ti aiuterà: spritepad.wearekiss.com. Basta lanciare le immagini necessarie nell'area di lavoro e creerà uno sprite per te.

In custodia

Gli sprite CSS sono un passaggio molto importante per velocizzare il tuo sito web. Trattalo con il dovuto rispetto e cerca di usarlo ovunque.