Share
CSS sprites kan dramatisk øke nettstedets ytelse, og med jQuery kan vi enkelt implementere fantastiske overgangseffekter. La oss komme i gang.
Sprites dateres tilbake til de tidlige dagene av videospill, der de ble brukt som optimaliseringsteknikk for visning av 2D-grafikk. En CSS-sprite er en teknikk som involverer å gruppere bilder for å danne et enkelt masterbilde og deretter selektivt vise bare de nødvendige delene ved hjelp av CSS-attributter (bredde, høyde, bakgrunnsposisjon osv.).
I denne opplæringen lager vi en navigasjonsmeny inspirert av Dragon Interactive. De har et utmerket designkonsept, med perfekt bruk av høydepunkter og farger.
Begynn med å lage et nytt Photoshop-dokument, som er 800px bredt ved 500px høyt.
Deretter skal vi opprette en horisontal linjal ved 70px-merket ved å se -> ny guide; Dette vil være vår menyhøyde.
Nå skal vi lage en mappemeny, og inne i den, en undermappe kalt "Meny Tekst".
Velg tekstverktøyet (snarvei: t) og angi følgende egenskaper i tegneverktøykassen.
Andre skrifttyper kan også brukes, men denne skrifttypefamilien passer best til innebygd tekst-effekt som vi vil gi senere. Hvis du ikke har denne skrifttypen, kan du få den fra Nettstedet.
Opprett en annen horisontal linjal ved 40px, dette vil bidra til å holde vår menytekst horisontalt justert.
Velg nå menytekstmappen, og skriv menyordene HJEM, TJENESTER, PORTFOLIO, OM OG KONTAKT, og hold like mellomrom mellom hver. Det skal nå se ut som bildet nedenfor.
Opprett nå en annen mappe under menyen tekstmappen, og nevn den "Menybakgrunn."
La oss neste lage et nytt lag i menyen Bakgrunnsmappe, og deretter bruke et rektangulært markeringsverktøy, opprett et utvalg på 100px bred og 70px høy.
Velg gradientverktøyet (snarvei: g), og sett gradientfargene fra # 555555 til #adadae .
Tegn nå en gradient fra bunnen av valget til toppen av valget; så gi det et slag med følgende egenskaper:
Stroppen ble lagt til for å gi dybde til menyavdelingene.
Nå For å oppnå de høypolerte endene, og for å skape den riktige effekten når musepekeren oppstår, vil vi gi den et tilstøtende høydepunkt.
Gå til velg> endre> kontrakt og skriv inn 1px.
Velg brennverktøyet og angi følgende egenskaper:
Nå vil vi flytte meny divisjonen rett 1px, ved hjelp av flytteverktøyet (snarvei: v) for å vise venstre side av streken, som var usynlig på grunn av sin posisjon.
Lag kopier av ovennevnte lag og juster dem i forhold til menyteksten.
Dette ser ut som menyen ser ut når vi justerer plasseringen av lagene og menyteksten tilsvarende.
For å legge inn den typografiske effekten legger vi til "Drop Shadow" -effekten med følgende innstillinger i teksten vår:
Nå er det på tide å lage hva menyen ser ut i løpet av musemarkøren. Opprett en kopi av mappen "Menybakgrunn", og omdø nytt den til "Menykobling". Deretter flytter du mappen 70px nedover, ved hjelp av flytteverktøyet, slik at den nyopprettede menyens toppdel berører den horisontale guiden.
Årsaken til at vi har laget kopien av menymappen, er fordi vi er interessert i plasseringen av menyteksten. Hvis vi hadde opprettet det manuelt, måtte vi bekymre oss for den nøyaktige justeringen av menyens tekst, noe som ville være mye mer kjedelig.
Nå vil vi velge bakgrunnslaget på servicemenyen fra mappen "Menyovergang", og gi den en fin, elegant effekt på hover-tilstanden. For å gjøre dette, må du først opprette et valg ved å trykke ctrl og klikke på laget; Trykk deretter på slett, som vil slette gjeldende nyanse. Neste ...
Velg radial gradient, og trekk en linje fra bunnen av valget til 30px over toppen av valget.
Vårt arbeid er ikke ferdig ennå. For å gi det en jevn berøring, må vi polere det litt mer. For å lage en mer avslørende meny divisjon, vil vi gjøre kantene mørkere. For å oppnå dette må vi legge til følgende effekter:
Påfør en tilsvarende effekt for porteføljen og om menyer. For kontaktmenyen, endre gradientfargene til:
Dette hva vår meny ser ut som nå:
Hjemmemenyavdelingen må gis spesiell behandling; velg laget ved å trykke ctrl og klikke på laget. Trykk slett for å fjerne gjeldende nyanse, og velg gradientverktøyet med følgende farger:
Denne gangen velger du lineær gradient, og tegner en gradient fra toppen av valget til bunnen av valget.
Velg brennverktøyet, hold resten av egenskapene like unntatt rekkevidden, sett den til midttoner, og bruk penselstrenger rundt kantene bortsett fra toppen.
Nå for å lage den glassaktige effekten: velg pennverktøyet, pass på at "formfylling" er valgt, og tegne formen som den i bildet, og sett blandingstilstanden til mykt lys med en opasitet på ca 40%.
To ting før vi er ferdig med Photoshop-delen.
Endelig ser vårt spritbilde ut slik:
Nå kommer kodingsdelen, som er ganske enkelt. Lag en html-fil, og legg til følgende kode:
Fantastisk meny
Her har vi opprettet en enkel html-fil, som består av en uordnet liste - vår navigasjonslinje. Før vi går videre, la oss ta en titt på et par filer vi skal importere nå:
Opprett en ekstern .js-fil, kalt sprite.js, og lim inn i følgende kode.
Accentsconagua
$ (funksjon () $ ('# navigasjon li a'). append (''); // span hvis opacity vil animere når musen svinger. $ ('# navigasjon li a'). hover (funksjon () $ ('.overveier', dette) .stop (). animate ('opacity': 1, 700, 'easeOutSine'), funksjon ) $ ('hover', dette) .stop (). animate ('opacity': 0, 700, 'easeOutQuad'))); Når DOM er lastet, injiserer vi et spann inn i ankeretiketten vår; dette spekteret vil faktisk animere. Deretter anvender vi svingerfunksjonen til ankermerket, slik at spenningen er uklar. For å skape en jevnere animasjon, vil vi bruke lette likningen. Jeg bruker 'easeoutsine' og 'easeoutquad'; Du kan gjerne prøve alternative kombinasjoner, hvis du ønsker det.
Nå kommer CSS-delen. Lag stilen.css-filen. Nedenfor er det første bildet av hva menyen ser ut. For nå er det bare fire punkter, fordi vi ennå ikke har stylet det.
Først justerer vi listen.
kropp bakgrunn: # 000000; #navigering margin-left: 250px; #navigation li float: left;
Vi har bare flyttet menyen i sentrum litt.
Stil ankeretiketten; Bakgrunnen blir vår spritbilde.
#navigation li a background-image: url (images / sprite.jpg); display: block;
Skjermstilen må være innstilt for å blokkere; ellers vil ingenting bli vist.
I neste trinn vil vi gi hver av dem riktig posisjonering.
.hjem bakgrunnsstilling: 0px 0px; bredde: 102px; høyde: 70 piksler; . tjenester bakgrunnsposisjon: -102px 0px; bredde: 110px; høyde: 70px .portefølje bakgrunnsstilling: -212px 0px; bredde: 108px; høyde: 70px .om bakgrunnsstilling: -320px 0px; bredde: 102px; høyde: 70px .kontakt bakgrunnsstilling: -422px 0px; bredde: 103px; høyde: 70px
Her har vi satt bakgrunnsplasseringen og bredden på hver ankermerke. Verdiene kan variere, og det krever litt tid for å bli perfekt.
#navigasjon a. over bakgrunn: url (images / sprite.jpg) no-repeat; skjerm: blokk; opasitet: 0; stilling: relativ; topp: 0; venstre: 0; høyde: 100%; bredde: 100%; #navigasjon a.home .hover bakgrunnsposisjon: -0px -72px; #navigering a.tjenester. over bakgrunnsstilling: -102px -72px; #navigasjon a.portefølje. over bakgrunnsstilling: -212px -72px; #navigasjon a.about. over bakgrunnsstilling: -320px -72px; #navigation a.contact. over bakgrunnsstilling: -422px -72px;
Nå skal vi definere CSS for span; Dette er det samme sprite bildet som brukes ovenfor. Høyden og bredden er laget 100% slik at den inntar hele ankerblokken. Bakgrunnen til hver spanke er justert, og til slutt er arbeidet vårt fullført.
Vær oppmerksom på at det tar tid å få posisjon og bredde tuning riktig; Du kan ende opp med litt forskjellige verdier for disse egenskapene - og det er helt greit!
Phew virker som mye arbeid, men gode ting tar tid å bygge opp. Her er noen ekstra ressurser som du kan finne hendig.
