Share
CSS-sprites kunnen de prestaties van een website drastisch verhogen, en met jQuery kunnen we eenvoudig geweldige overgangseffecten implementeren. Laten we beginnen.
Sprites dateren uit de begintijd van videogames, waar ze werden gebruikt als optimalisatietechniek voor het weergeven van 2D-afbeeldingen. Een CSS-sprite is een techniek waarbij afbeeldingen worden gegroepeerd tot één hoofdafbeelding en vervolgens selectief alleen de vereiste secties worden weergegeven met CSS-kenmerken (breedte, hoogte, achtergrondpositie, enzovoort).
In deze zelfstudie maken we een navigatiemenu geïnspireerd op Dragon Interactive. Ze hebben een uitstekend ontwerpconcept, met een perfect gebruik van highlights en kleuren.
Begin met het maken van een nieuw Photoshop-document, dat 800px breed bij 500px hoog is.
Vervolgens maken we een horizontale liniaal op het 70px-teken door naar view -> new guide te gaan; dit wordt onze menushoogte.
Nu gaan we een mapmenu maken en daarbinnen een submap genaamd 'Menutekst'.
Selecteer de teksttool (snelkoppeling: t) en stel de volgende eigenschappen in de tekentoolbox in.
Andere lettertypen kunnen ook worden gebruikt, maar deze lettertypefamilie is het meest geschikt voor ingesloten teksteffecten die we later zullen geven. Als u dit lettertype niet heeft, kunt u het van de website halen.
Maak een nieuwe horizontale liniaal met 40 px, dit zal helpen onze menutekst horizontaal uitgelijnd te houden.
Selecteer nu de map met menuteksten en typ de menuwaarden HOME, SERVICES, PORTFOLIO, ABOUT en CONTACT, waarbij u gelijke spaties tussen beide houdt. Het zou nu moeten lijken op de afbeelding hieronder.
Maak nu een andere map onder de menutekstmap en noem deze "Menuachtergrond".
Laten we vervolgens een nieuwe laag maken in de map Menu Background en vervolgens een rechthoekig selectiekader gebruiken om een selectie van 100px breed en 70px hoog te maken.
Selecteer het verloopgereedschap (snelkoppeling: g) en stel de verloopkleuren in van # 555555 in #adadae .
Teken nu een verloop vanaf de onderkant van de selectie naar de top van de selectie; geef het een slag met de volgende eigenschappen:
De streek is toegevoegd om diepte te bieden aan onze menudelen.
Om de hoog gepolijste uiteinden te bereiken en om het juiste effect te creëren wanneer de muis zweeft, geven we deze een aangrenzend hoogtepunt.
Ga naar> wijzigen> contract selecteren en 1px invoeren.
Selecteer het brandprogramma en stel de volgende eigenschappen in:
Nu gaan we de menu-indeling rechts 1px verplaatsen met behulp van het gereedschap Verplaatsen (snelkoppeling: v) om de linkerkant van de streek weer te geven, die vanwege zijn positie onzichtbaar was.
Maak kopieën van de bovenstaande laag en pas ze aan met betrekking tot de menutekst.
Dit is hoe het menu eruitziet wanneer we de positionering van de lagen en menutekst dienovereenkomstig aanpassen.
Om het typografische effect te verankeren, voegen we het effect "Slagschaduw" met de volgende instellingen toe aan onze tekst:
Nu is het tijd om te creëren hoe het menu eruit ziet tijdens de status van de muisaanwijzer. Maak een kopie van de map "Menu-achtergrond" en wijzig de naam in "Menu-muisaanwijzer". Verplaats vervolgens met behulp van het verplaatsgereedschap de map 70px naar beneden zodat het bovenste gedeelte van het nieuwe menu de horizontale hulplijn raakt.
De reden dat we de kopie van de menumap hebben gemaakt, is omdat we geïnteresseerd zijn in de positionering van de menutekst. Als we het handmatig hadden gemaakt, dan zouden we ons zorgen moeten maken over de exacte uitlijning van de tekst van het menu, die veel saaier zou zijn.
Nu zullen we de achtergrondlaag van het servicemenu selecteren in de "Menu Hover" map en het een mooi elegant effect geven op de hover-status. Om dit te doen, maakt u eerst een selectie door op ctrl te drukken en op de laag te klikken; druk vervolgens op delete, waardoor de huidige schaduw wordt verwijderd. Volgende ...
Selecteer radiale gradiënt en teken een lijn vanaf de onderkant van de selectie naar 30 px boven de bovenkant van de selectie.
Ons werk is nog niet helemaal voltooid. Om het een vloeiende touch te geven, moeten we het een beetje meer oppoetsen. Om een meer onthullende menudeling te creëren, maken we de randen donkerder. Om dit te bereiken, moeten we de volgende effecten toevoegen:
Pas een soortgelijk effect toe voor de portfolio en voor menu's. Wijzig de verloopkleuren voor het contactmenu in:
Dit is wat ons menu nu ziet:
De home menu-afdeling moet een speciale behandeling krijgen; selecteer de laag door op ctrl te drukken en op de laag te klikken. Druk op delete om het huidige schaduwpunt te verwijderen en selecteer het verloopgereedschap met de volgende kleuren:
Selecteer deze keer een lineair verloop en teken een verloop van de bovenkant van de selectie naar de onderkant van de selectie.
Selecteer het brandprogramma, waarbij de overige eigenschappen hetzelfde blijven, met uitzondering van het bereik, stel deze in op middentonen en breng penseelstreken aan rond de randen, behalve de bovenkant.
Nu om het glazige effect te creëren: selecteer het pengereedschap, zorg ervoor dat "vormvulling" is geselecteerd en teken de vorm zoals die in de afbeelding, en stel de mengmodus in op zacht licht met een dekking van ongeveer 40%.
Nog twee dingen voordat we klaar zijn met het gedeelte Photoshop.
Eindelijk ziet onze sprite-afbeelding er zo uit:
Nu komt de codeersectie, wat vrij eenvoudig is. Maak een html-bestand en voeg de volgende code toe:
Geweldig menu
Hier hebben we een eenvoudig html-bestand gemaakt, dat bestaat uit een ongeordende lijst - onze navigatiebalk. Voordat we verder gaan, laten we een aantal bestanden bekijken die we nu gaan importeren:
Maak een extern .js-bestand met de naam sprite.js en plak de volgende code.
Accentsconagua
$ (function () $ ('# navigation li a'). append (''); // span wiens opacity zal animeren wanneer de muis zweeft. $ ('# navigation li a'). hover (function () $ ('. hover', this) .stop (). anim ('onacity': 1, 700, 'easeOutSine'), functie ( ) $ ('. hover', this) .stop (). anim ('opacity': 0, 700, 'easeOutQuad'))); Wanneer de DOM is geladen, injecteren we een span in onze ankertag; deze overspanning zal daadwerkelijk animeren. Vervolgens animeren we met de zweeffunctie voor de ankertag de dekking van de reeks. Om een vloeiendere animatie te maken, gebruiken we de versnellingsvergelijking. Ik gebruik 'easeoutsine' en 'easeoutquad'; voel je vrij om een alternatieve combinatie te proberen, als je dat wilt.
Nu komt het CSS-gedeelte. Maak het bestand style.css. Hieronder ziet u de eerste afbeelding van hoe het menu eruit ziet. Voorlopig zijn het maar vier punten, omdat we het nog niet hebben gestileerd.
Eerst stemmen we de lijst op elkaar af.
body background: # 000000; #navigation margin-left: 250px; #navigation li float: left;
We hebben het menu alleen een beetje in het midden verplaatst.
Stijl de ankertag; zijn achtergrond zal onze sprite-afbeelding zijn.
#navigation li a background-image: url (images / sprite.jpg); display: block;
De weergavestijl moet worden ingesteld om te blokkeren; Anders wordt er niets weergegeven.
In de volgende stap zullen we elk van hen de juiste positionering geven.
.home background-position: 0px 0px; width: 102px; hoogte: 70 pixels; .services background-position: -102px 0px; width: 110px; height: 70px .portfolio background-position: -212px 0px; width: 108px; height: 70px .about background-position: -320px 0px; width: 102px; hoogte: 70 px. contact background-position: -422px 0px; width: 103px; hoogte: 70 px
Hier hebben we de achtergrondpositionering en breedte van elk ankertag ingesteld. De waarden kunnen variëren en het vereist een beetje tijd om perfect te worden.
#navigation a .hover background: url (images / sprite.jpg) no-repeat; weergave: blok; dekking: 0; positie: relatief; boven: 0; links: 0; hoogte: 100%; breedte: 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;
Nu zullen we de CSS definiëren voor de overspanning; dit is dezelfde sprite-afbeelding die hierboven wordt gebruikt. De hoogte en breedte zijn 100% gemaakt zodat deze het hele ankerblok bezet. De achtergrond van elke span-tag wordt aangepast en tot slot is ons werk voltooid.
Merk op dat het enige tijd kost om de positie en breedte-afstemming goed te krijgen; je zou kunnen eindigen met iets andere waarden voor deze kenmerken - en dat is perfect in orde!
Pff lijkt een hoop werk, maar geweldige dingen kosten tijd om op te bouwen. Hier zijn enkele aanvullende bronnen die u misschien handig vindt.
