Share
CSS sprites kan dramatiskt öka webbplatsens prestanda, och med jQuery kan vi enkelt genomföra fantastiska övergångseffekter. Låt oss börja.
Sprites går tillbaka till de tidiga dagarna av videospel, där de användes som optimeringsteknik för visning av 2D-grafik. En CSS-sprite är en teknik som involverar att gruppera bilder för att bilda en enda huvudbild och sedan selektivt visa endast de erforderliga sektionerna med hjälp av CSS-attribut (bredd, höjd, bakgrundsställning etc.).
I den här handledningen skapar vi en navigationsmeny inspirerad av Dragon Interactive. De har ett utmärkt designkoncept, med perfekt användning av höjdpunkter och färger.
Börja med att skapa ett nytt Photoshop-dokument, som är 800x bred vid 500px högt.
Därefter skapar vi en horisontell linjal vid 70 px markeringen genom att visa -> ny guide; Det här blir vår menyhöjd.
Nu ska vi skapa en mapp meny, och inuti den, en undermapp som heter "Meny Text".
Markera textverktyget (genväg: t) och ställ in följande egenskaper i teckenverktygslådan.
Andra teckensnitt kan också användas men denna typsnittfamilj passar bäst för inbäddad texteffekt som vi kommer att ge senare. Om du inte har denna typsnitt kan du hämta den från webbplatsen.
Skapa en annan horisontell linjal vid 40px, vilket hjälper till att hålla vår menytext horisontellt anpassad.
Välj nu menytextmappen och skriv menyorden HEM, TJÄNSTER, PORTFOLIO, OM OCH KONTAKT, och håll lika mellanrum mellan varandra. Det ska nu se ut som bilden nedan.
Skapa nu en annan mapp under menyns textmapp och namnge den "Menybakgrund".
Låt oss nu skapa ett nytt lager i menyn Bakgrundsmapp och sedan använda ett rektangulärt markeringsverktyg, skapa ett val av 100px bred och 70px hög.
Välj gradientverktyget (genväg: g) och ställ in gradientfärgerna från # 555555 till #adadae .
Dra nu en gradient från början av valet till toppen av valet. Ge sedan en stroke med följande egenskaper:
Strejken tillsattes för att ge djupet till våra menyavdelningar.
Nu För att uppnå de högpolerade ändarna, och för att skapa den korrekta effekten när muspekaren dyker upp, kommer vi att ge den en angränsande höjdpunkt.
Gå till välj> ändra> kontrakt och ange 1px.
Välj brännverktyget och ställ in följande egenskaper:
Nu flyttar vi menyavdelningen rätt 1px, med hjälp av flyttverktyget (genväg: v) för att visa vänstra sidan av stroke, vilket var osynligt på grund av sin position.
Skapa kopior av ovanstående lager och justera dem med avseende på menytexten.
Så här ser menyn ut när vi justerar placeringen av lagren och meny texten i enlighet därmed.
För att bädda in den typografiska effekten lägger vi till "Drop Shadow" -effekten med följande inställningar till vår text:
Nu är det dags att skapa vad menyn ser ut under muspekarens tillstånd. Skapa en kopia av mappen "Menybakgrund" och byt namn på den till "Menyhoppare". Flytta sedan mappen 70px ner med hjälp av flyttverktyget så att den nybildade menyns övre del berör den horisontella guiden.
Anledningen till att vi har skapat kopian av menymappen är att vi är intresserade av att placera menytexten. Om vi hade skapat det manuellt skulle vi behöva oroa oss för den exakta anpassningen av menyens text, vilket skulle vara mycket mer tråkigt.
Nu väljer vi bakgrundsskiktet i servicemenyn från mappen "Menyhantering" och ger den en fin elegant effekt på svävarläget. För att göra detta, först skapa ett val genom att trycka på ctrl och klicka på lagret; tryck sedan på radera, vilket tar bort den nuvarande nyansen. Nästa…
Välj radial gradient och dra en rad från botten av valet till 30px över toppen av valet.
Vårt arbete är inte klart ännu. För att få det smidigt, behöver vi polera det lite mer. För att skapa en mer uppenbar menyavdelning gör vi kantarna mörkare. För att uppnå detta måste vi lägga till följande effekter:
Applicera en liknande effekt för portföljen och om menyer. För kontaktmenyn, ändra gradientfärgerna till:
Så här ser vår meny ut nu:
Hemmenydelningen behöver ges särskild behandling; välj skiktet genom att trycka på ctrl och klicka på skiktet. Tryck på delete för att ta bort nuvarande nyans och välj gradientverktyget med följande färger:
Välj den här gången linjär gradient och dra en gradient från toppen av markeringen till botten av valet.
Välj brännverktyget, håll resten av egenskaperna lika med undantag av intervallet, ställ det till midtoner och applicera penselsträckor runt kanterna förutom toppen.
Nu för att skapa den glasartade effekten: välj pennverktyget, se till att "formfyllning" är vald och dra formen som den i bilden och ställ in blandningsläget till mjukt ljus med en opacitet på cirka 40%.
Två saker innan vi är färdiga med Photoshop-delen.
Slutligen ser vår spritbild så ut:
Nu kommer kodningssektionen, vilket är ganska enkelt. Skapa en html-fil och lägg till följande kod:
Fantastisk meny
Här har vi skapat en enkel html-fil, som består av en orörd lista - vår navigeringsfält. Innan vi går framåt, låt oss ta en titt på ett par filer som vi nu ska importera:
Skapa en extern .js-fil, kallad sprite.js, och klistra in i följande kod.
Accentsconagua
$ (funktion () $ ('# navigation li a'). append (''); // span vars opacitet kommer att animera när musen svävar. $ ('# navigation li a'). sväva (funktion () $ ('sväva', detta) .stop (). animate ('opacity': 1, 700,' easeOutSine '), funktion ) $ ('.huver', detta) .stop (). animera ('opacitet': 0, 700, 'easeOutQuad'))); När DOM är laddad, injicerar vi en spänn in i vår ankar tagg; denna spänning kommer faktiskt att animera. Med hjälp av svängningsfunktionen för ankaretiketten, så animerar vi spännens opacitet. För att skapa en mjukare animation använder vi lättnadskvationen. Jag använder 'easeoutsine' och 'easeoutquad'; gärna prova en alternativ kombination, om du vill.
Nu kommer CSS-delen. Skapa style.css-filen. Nedan är den första bilden av hur menyn ser ut. För nu är det bara fyra prickar, för att vi ännu inte har stylat det.
Först anpassar vi listan.
kropp bakgrund: # 000000; #navigation margin-left: 250px; #navigation li float: left;
Vi har bara flyttat menyn i mitten lite.
Stil ankaretiketten; dess bakgrund kommer att bli vår spritbild.
#navigation li a background-image: url (images / sprite.jpg); display: block;
Displaystilen måste vara inställd för att blockera; annars kommer ingenting att visas.
I nästa steg kommer vi att ge var och en av dem rätt positionering.
.hem bakgrundsställning: 0px 0px; bredd: 102px; höjd: 70 bildpunkter; . tjänster bakgrundsposition: -102px 0px; bredd: 110px; höjd: 70px .portfolio background-position: -212px 0px; bredd: 108px; höjd: 70px .om bakgrundsställning: -320px 0px; bredd: 102px; höjd: 70px .contact background-position: -422px 0px; bredd: 103px; höjd: 70px
Här har vi ställt in bakgrundspositionen och bredden på varje ankaremärke. Värdena kan variera, och det tar lite tid att bli perfekt.
#navigation a .hover background: url (images / sprite.jpg) no-repeat; display: block; opacitet: 0; position: relativ; topp: 0; vänster: 0; höjd: 100%; bredd: 100%; #navigation a.home .hover bakgrundsposition: -0px -72px; #navigering a.tjänster. över bakgrundsposition: -102px -72px; #navigering a.portfolio. över bakgrundsposition: -212px -72px; #navigation a.about .hover background-position: -320px -72px; #navigation a.contact .hover background-position: -422px -72px;
Nu ska vi definiera CSS för spänningen; Detta är samma spritbild som används ovan. Höjden och bredden är gjorda 100% så att den upptar hela ankarblocket. Bakgrunden till varje span-tagg justeras, och slutligen är vårt arbete komplett.
Observera att det tar tid att få position och breddstämning rätt; du kan sluta med lite olika värden för dessa attribut - och det är helt okej!
Phew verkar som mycket arbete, men bra saker tar tid att bygga upp. Här är några ytterligare resurser som du kan hitta praktiska.
