Share
Gli sprite CSS possono aumentare notevolmente le prestazioni di un sito Web e con jQuery, possiamo implementare facilmente effetti di transizione fantastici. Iniziamo.
Gli sprites risalgono ai primi giorni dei videogiochi, dove venivano utilizzati come tecnica di ottimizzazione per la visualizzazione di grafica 2D. Uno sprite CSS è una tecnica che consiste nel raggruppare le immagini per formare un'unica immagine principale e quindi visualizzare in modo selettivo solo le sezioni richieste utilizzando gli attributi CSS (larghezza, altezza, posizione di sfondo ecc.).
In questo tutorial creeremo un menu di navigazione ispirato a Dragon Interactive. Hanno un eccellente concetto di design, con un perfetto uso di luci e colori.
Inizia creando un nuovo documento Photoshop, che è largo 800 px per un'altezza di 500 px.
Successivamente, creeremo un righello orizzontale al segno di 70 pixel andando a visualizzare -> nuova guida; questa sarà la nostra altezza del menu.
Ora stiamo andando a creare un menu di cartelle, e al suo interno, una sottocartella chiamata "Menu Text".
Seleziona lo strumento testo (scorciatoia: t) e imposta le seguenti proprietà nella casella degli strumenti.
È possibile utilizzare anche altri tipi di carattere, ma questa famiglia di caratteri è più adatta per l'effetto di testo incorporato che verrà fornito in seguito. Se non hai questo tipo di carattere puoi ottenerlo dal sito web.
Crea un altro righello orizzontale a 40px, questo ti aiuterà a mantenere il nostro testo del menu allineato orizzontalmente.
Ora seleziona la cartella di testo del menu e digita le parole di menu HOME, SERVIZI, PORTFOLIO, INFORMAZIONI e CONTATTO, mantenendo gli stessi spazi tra ciascuna. Ora dovrebbe apparire come l'immagine qui sotto.
Ora crea un'altra cartella sotto la cartella di testo del menu e chiamala "Sfondo menu".
Creiamo quindi un nuovo livello all'interno della cartella Sfondo menu e, quindi, utilizzando uno strumento di selezione rettangolare, creiamo una selezione di 100 px di larghezza e 70 px di altezza.
Seleziona lo strumento sfumatura (scorciatoia: g) e imposta i colori sfumati da # 555555 a #adadae .
Ora traccia una sfumatura a partire dalla parte inferiore della selezione fino all'inizio della selezione; quindi dargli un colpo con le seguenti proprietà:
Il tratto è stato aggiunto per fornire profondità alle nostre divisioni di menu.
Ora per ottenere le estremità altamente lucidate e per creare l'effetto corretto quando si verifica il passaggio del mouse al mouse, gli daremo un punto culminante adiacente.
Vai a selezionare> modifica> contratto e inserisci 1px.
Seleziona lo strumento di masterizzazione e imposta le seguenti proprietà:
Ora sposteremo la divisione del menu a destra 1px, usando lo strumento sposta (scorciatoia: v) per mostrare il lato sinistro del tratto, che era invisibile a causa della sua posizione.
Crea copie del livello precedente e regolale rispetto al testo del menu.
Questo è l'aspetto del menu quando regoliamo il posizionamento dei livelli e il testo del menu di conseguenza.
Per incorporare l'effetto tipografico, aggiungiamo al nostro testo l'effetto "Ombra esterna" con le seguenti impostazioni:
Ora è il momento di creare l'aspetto del menu durante lo stato di passaggio del mouse. Crea una copia della cartella "Menu Background" e rinominala in "Menu Hover". Quindi, usando lo strumento sposta, sposta la cartella 70px verso il basso in modo che la parte superiore del menu appena creato tocchi la guida orizzontale.
Il motivo per cui abbiamo creato la copia della cartella del menu è perché siamo interessati al posizionamento del testo del menu. Se lo avessimo creato manualmente, dovremmo preoccuparci dell'allineamento esatto del testo del menu, che sarebbe molto più noioso.
Ora selezioneremo il livello di sfondo del menu di servizio dalla cartella "Menu Hover" e gli diamo un elegante effetto sullo stato di hover. Per fare ciò, prima crea una selezione premendo ctrl e clicca sul livello; quindi premere Elimina, che cancellerà la tonalità corrente. Il prossimo…
Seleziona il gradiente radiale e traccia una linea dal fondo della selezione a 30 px sopra la parte superiore della selezione.
Il nostro lavoro non è ancora finito. Per dare un tocco morbido, dobbiamo lucidarlo un po 'di più. Per creare una divisione di menu più rivelatrice, renderemo i bordi più scuri. Per ottenere ciò, dobbiamo aggiungere i seguenti effetti:
Applicare un effetto simile per il portfolio e per i menu. Per il menu di contatto, modifica i colori del gradiente in:
Ecco come appare il nostro menu ora:
La divisione del menu home deve ricevere un trattamento speciale; seleziona il livello premendo ctrl e facendo clic sul livello. Premi Elimina per rimuovere la sfumatura attuale e seleziona lo strumento sfumatura con i seguenti colori:
Questa volta, seleziona il gradiente lineare e traccia una sfumatura dalla parte superiore della selezione alla fine della selezione.
Seleziona lo strumento Brucia, mantenendo il resto delle proprietà lo stesso eccetto per l'intervallo, impostalo sui mezzitoni e applica pennellate attorno ai bordi tranne che per la parte superiore.
Ora per creare l'effetto vetro: seleziona lo strumento penna, assicurati che sia selezionato "riempimento forma" e disegna la forma come quella nell'immagine e imposta la modalità di fusione su luce morbida con un'opacità di circa il 40%.
Altre due cose prima che abbiamo finito con la parte di Photoshop.
Finalmente la nostra immagine sprite sembra così:
Ora arriva la sezione di codifica, che è abbastanza facile. Creare un file html e aggiungere il seguente codice:
Menu fantastico
Qui abbiamo creato un semplice file html, che consiste in una lista non ordinata, la nostra barra di navigazione. Prima di andare avanti, diamo un'occhiata a un paio di file che ora stiamo importando:
Crea un file .js esterno, chiamato sprite.js, e incolla il seguente codice.
Accentsconagua
$ (function () $ ('# navigation li a'). append (''); // span la cui opacità si animerà quando si posiziona il mouse. $ ('# navigation li a'). hover (function () $ ('. hover', this) .stop (). animate ('opacity': 1, 700, 'easeOutSine'), funzione ( ) $ ('. hover', this) .stop (). animate ('opacity': 0, 700, 'easeOutQuad'))); Quando il DOM viene caricato, inseriamo una span nel nostro tag di ancoraggio; questa estensione sarà effettivamente animata. Quindi, usando la funzione di passaggio del mouse per il tag di ancoraggio, animiamo l'opacità dello span. Per creare un'animazione più fluida, useremo l'equazione di andamento. Sto usando "easyoutsine" e "easoutquad"; sentiti libero di provare combinazioni alternative, se lo desideri.
Ora arriva la parte CSS. Crea il file style.css. Di seguito è l'immagine iniziale di come appare il menu. Per ora, sono solo quattro punti, perché non lo abbiamo ancora disegnato.
Innanzitutto, allineamo la lista.
body background: # 000000; #navigation margin-left: 250px; #navigation li float: left;
Abbiamo spostato solo un po 'il menu al centro.
Modella il tag di ancoraggio; il suo background sarà la nostra immagine sprite.
#navigation li a background-image: url (images / sprite.jpg); blocco di visualizzazione;
Lo stile di visualizzazione deve essere impostato su blocco; altrimenti, non verrà visualizzato nulla.
Nel prossimo passaggio, daremo a ciascuno di essi il posizionamento corretto.
.home background-position: 0px 0px; larghezza: 102px; altezza: 70px; .services background-position: -102px 0px; larghezza: 110px; height: 70px. portfolio background-position: -212px 0px; larghezza: 108px; height: 70px. about background-position: -320px 0px; larghezza: 102px; height: 70px .contact background-position: -422px 0px; larghezza: 103px; altezza: 70px
Qui, abbiamo impostato il posizionamento in background e la larghezza di ogni tag di ancoraggio. I valori possono variare e richiede un po 'di tempo per essere perfetto.
#navigation a .hover background: url (images / sprite.jpg) no-repeat; blocco di visualizzazione; opacità: 0; posizione: relativa; inizio: 0; a sinistra: 0; altezza: 100%; larghezza: 100%; #navigation a.home .hover background-position: -0px -72px; #navigation a.services .hover background-position: -102px -72px; #navigation a.portfolio .hover background-position: -212px -72px; #navigation a.about .hover background-position: -320px -72px; #navigation a.contact .hover background-position: -422px -72px;
Ora definiremo il CSS per lo span; questa è la stessa immagine sprite che viene usata sopra. L'altezza e la larghezza sono fatte al 100% in modo che occupi l'intero blocco di ancoraggio. Lo sfondo di ogni tag span viene regolato e, infine, il nostro lavoro è completo.
Si noti che ci vuole tempo per ottenere la regolazione della posizione e della larghezza a destra; potresti ritrovarti con valori leggermente diversi per questi attributi - e questo è perfettamente a posto!
Phew sembra un sacco di lavoro, ma grandi cose richiedono tempo per crescere. Ecco alcune risorse aggiuntive che potresti trovare utili.
