Share
CSS sprite poate crește dramatic performanța unui site web, iar cu jQuery, putem implementa cu ușurință efecte de tranziție minunate. Să începem.
Sprites datează din primele zile ale jocurilor video, unde au fost utilizate ca tehnici de optimizare pentru afișarea graficelor 2D. Un sprite CSS este o tehnică care implică gruparea imaginilor pentru a forma o singură imagine master și apoi afișarea selectivă a secțiunilor necesare utilizând atributele CSS (lățime, înălțime, fundal-poziție etc.).
În acest tutorial vom crea un meniu de navigare inspirat de Dragon Interactive. Ele au un concept de design excelent, cu o utilizare perfectă a culorilor și culorilor.
Începeți prin crearea unui nou document Photoshop, care are o lățime de 800 de pixeli și o înălțime de 500 de pixeli.
Apoi, vom crea un conducător orizontal la marcajul 70px vizionând -> ghid nou; aceasta va fi înălțimea meniului nostru.
Acum vom crea un meniu de dosar, iar în interiorul acestuia un sub-director denumit "Textul meniului".
Selectați instrumentul de text (comanda rapidă: t) și setați următoarele proprietăți în caseta de instrumente pentru caractere.
Pot fi folosite și alte fonturi, dar această familie de fonturi este cea mai potrivită pentru efectul de text încorporat pe care îl vom da mai târziu. Dacă nu aveți acest font puteți obține de pe site-ul Web.
Creați o altă riglă orizontală la 40 de pixeli, ceea ce vă va ajuta să păstrați textul din meniu orizontal aliniat.
Acum, selectați directorul cu text din meniu și tastați meniurile HOME, SERVICES, PORTFOLIO, ABOUT și CONTACT, păstrând spații egale între fiecare. Acum ar trebui să arate imaginea de mai jos.
Acum creați un alt dosar sub directorul de text al meniului și denumiți-l "Fundal de meniu".
Să creați în continuare un strat nou în dosarul Fundal din meniu și apoi să utilizați un instrument dreptunghiular de marcaj, să creați o selecție de lățime de 100px latime și 70px înălțime.
Selectați instrumentul de gradient (shortcut: g) și setați culorile gradientului de la # 555555 la #adadae .
Acum trageți un gradient pornind de la partea de jos a selecției în partea de sus a selecției; apoi dați-i un accident vascular cerebral cu următoarele proprietăți:
Accidentul a fost adăugat pentru a oferi adâncime diviziunilor noastre de meniuri.
Acum, pentru a atinge capetele extrem de lustruite și pentru a crea efectul corespunzător atunci când apare cursorul mouse-ului, îi vom da o evidențiere adiacentă.
Mergeți la selectați> modificați> contract și introduceți 1px.
Selectați instrumentul de arsură și setați următoarele proprietăți:
Acum vom muta divizia de meniu dreapta 1px, folosind instrumentul de mutare (comanda rapida: v) pentru a arata partea stanga a cursei, care a fost invizibila datorita pozitiei sale.
Creați copii ale stratului de mai sus și ajustați-le în funcție de textul din meniu.
Acesta este modul în care arată meniul atunci când ajustăm poziționarea straturilor și a textului de meniu în consecință.
Pentru a încorpora efectul tipografic, adăugăm la textul nostru efectul "Drop Shadow" cu următoarele setări:
Acum, este momentul sa creezi ceea ce arata meniul in timpul stingerii mouse-ului. Creați o copie a dosarului "Meniu fundal" și redenumiți-l la "Meniul de direcționare". Apoi, utilizând instrumentul de mutare, mutați dosarul 70px în jos, astfel încât partea superioară a meniului nou creată să atingă ghidul orizontal.
Motivul pentru care am creat copia directorului de meniuri este că suntem interesați de poziționarea textului din meniu. Dacă l-am fi creat manual, atunci ar trebui să ne îngrijorăm de alinierea exactă a textului meniului, care ar fi mult mai obositor.
Acum, vom selecta stratul de fundal al meniului de servicii din dosarul "Meniu de hover" și îi vom da un efect elegant și elegant asupra stării de hover. Pentru a face acest lucru, mai întâi creați o selecție apăsând pe ctrl și faceți clic pe strat; apoi apăsați pe Delete (Șterge), care va șterge umbra curentă. Următor →…
Selectați un gradient radial și trageți o linie din partea de jos a selecției la 30 de pixeli deasupra părții superioare a selecției.
Munca noastră nu a fost făcută încă. Pentru a da o atingere netedă, trebuie să o lustruim puțin mai mult. Pentru a crea o divizie de meniuri mai dezvăluitoare, vom face ca marginile să fie mai întunecate. Pentru a realiza acest lucru, trebuie să adăugăm următoarele efecte:
Aplicați un efect similar pentru portofoliu și pentru meniuri. Pentru meniul de contact, schimbați culorile gradientului la:
Acest lucru arată acum meniul nostru:
Departamentul de meniu acasă trebuie să primească un tratament special; selectați stratul apăsând pe ctrl și făcând clic pe strat. Apăsați pe Ștergere pentru a elimina umbra curentă și selectați instrumentul de gradient cu următoarele culori:
De această dată, selectați un gradient liniar și trageți un gradient din partea de sus a selecției în partea de jos a selecției.
Selectați instrumentul de ardere, păstrând restul proprietăților aceleași cu excepția intervalului, setați-l la tonurile medii și aplicați curbele periilor în jurul marginilor, cu excepția celor de sus.
Acum, pentru a crea efectul sticlos: selectați instrumentul stilou, asigurați-vă că este selectată "umplerea formei" și trageți forma asemănătoare celei din imagine și setați modul de amestecare la lumină moale cu o opacitate de aproximativ 40%.
Încă două lucruri înainte să terminăm cu partea Photoshop.
În cele din urmă, imaginea noastră sprite arată astfel:
Acum vine secțiunea de codificare, care este destul de ușoară. Creați un fișier html și adăugați următorul cod:
Meniul minunat
Aici am creat un simplu fișier html, care constă dintr-o listă neordonată - bara noastră de navigare. Înainte de a merge mai departe, să aruncăm o privire la câteva fișiere pe care le vom importa acum:
Creați un fișier .js extern, numit sprite.js și lipiți-l în următorul cod.
Accentsconagua
$ (funcția () $ ('# navigation li a') append ('„); // span a cărui opacitate se va anima atunci când mouse-ul se ridică. ('opacity': 1, 700, 'easeOutSine'), functie () () ) $ ('. hover', this) .stop () animate ('opacity': 0, 700, 'easeOutQuad')); Atunci când DOM este încărcat, vom injecta un interval în tag-ul nostru ancoră; acest interval va anima de fapt. Apoi, folosind funcția de hover pentru eticheta de ancorare, animăm opacitatea intervalului. Pentru a crea o animație mai lină, vom folosi ecuația de relaxare. Eu folosesc "easeoutsine" și "easeoutquad"; nu ezitați să încercați o combinație alternativă, dacă doriți.
Acum vine partea CSS. Creați fișierul style.css. Mai jos este imaginea inițială a ceea ce arată meniul. Deocamdată, sunt doar patru puncte, pentru că nu l-am format încă.
Mai întâi, aliniem lista.
corp fundal: # 000000; #navigație margin-left: 250px; #navigație li float: stânga;
Am mutat doar meniul în centru.
Stilul etichetei de ancorare; fundalul său va fi imaginea noastră sprite.
#navigation li a imagine-imagine: url (imagini / sprite.jpg); display: block;
Stilul de afișare trebuie setat să blocheze; în caz contrar, nimic nu va fi afișat.
În etapa următoare, vom da fiecăruia poziția corectă.
.acasă background-position: 0px 0px; lățime: 102px; înălțime: 70px; .servicii background-position: -102px 0px; lățime: 110px; înălțime: 70px. portofoliu background-position: -212px 0px; lățime: 108px; înălțime: 70px. despre background-position: -320px 0px; lățime: 102px; înălțime: 70px .contact background-position: -422px 0px; lățime: 103px; înălțime: 70px
Aici, am setat poziționarea fundalului și lățimea fiecărei etichete de ancorare. Valorile pot varia și necesită un pic de timp pentru a deveni perfecte.
#navigație a .hover background: url (imagini / sprite.jpg) nr-repeta; afișare: bloc; opacitate: 0; poziție: relativă; top: 0; stânga: 0; înălțime: 100%; lățime: 100%; #navigation a.home .hover background-position: -0px -72px; #navigation a.servicii .hover background-position: -102px -72px; #navigație a.portofoliu .hover background-position: -212px -72px; #navigation a.obout .hover background-position: -320px -72px; #navigation a.contact .hover background-position: -422px -72px;
Acum vom defini CSS pentru interval; aceasta este aceeași imagine sprite care este utilizată mai sus. Înălțimea și lățimea sunt realizate 100% astfel încât să ocupe întregul bloc de ancorare. Fundalul fiecărei etichete este ajustat și, în final, munca noastră este completă.
Rețineți că este nevoie de timp pentru a obține corectarea poziției și a lățimii; s-ar putea să ajungeți la valori ușor diferite pentru aceste atribute - și asta este perfect bine!
Puiul pare a fi o mulțime de lucruri, dar lucrurile minunate au nevoie de timp pentru a se dezvolta. Iată câteva resurse suplimentare pe care le puteți găsi la îndemână.
