Het volgende dat we zullen aanpakken is de achtergrond op het lichaam.
En dat is eigenlijk niet een achtergrondafbeelding maar als we iemand die eruit zag als deze die zou werken prima gevonden.
Maar maar het is eigenlijk een verloop dat CSX voegt voor mij.
Dus in wezen kunnen we lineaire verlopen schrijven en in plaats van hen te schrijven op onze eigen vanaf nul Ik ga je laten zien een geweldige bron dat een aantal leuke pre-done kleurovergangen heeft dat we kunnen werken met die wij kunnen bijwerken en bewerken op onze eigen.
Dus het heet hellingen dot com.
En dan heeft het een heleboel verschillende hellingen kunnen we pijltjestoetsen gebruiken om een ​​aantal van hen te zien.
Dus ik ging gewoon door tot ik er een die ik graag gevonden.
Dus laten we zeggen dat ik wilde gebruiken dit alles wat we moeten doen is klikken op get CSSA code of druk op de Enter-toets en kopieer deze code op een klembord en dan gaan we het lichaam te kiezen.
Dus lichaam en plak deze in.
Dus het is eigenlijk gewoon een regel, maar er zijn al de andere browser voorvoegsels.
Dus voor Internet Explorer voor Firefox voor Chrome voor opera al deze verschillende voorvoegsels.
Maar wat het doet.
We zetten de achtergrond lineair verloop en we plukken twee kleuren en verschillende percentages van deze kleuren en ook de hoek.
Dus laat me je laten zien hoe het er nu uitziet, als we ons vernieuwen.
We hebben dit mooie verloop.
Dus we kunnen blijven spelen daar rond.
U kunt kijken op een paar meer en voel je vrij om je eigen te gebruiken.
Degene die ik besloten heet Bora-Bora hier.
Dus we gewoon dat kopiëren naar het klembord en vervang deze code te kopiëren.
Dit alles hier met die nieuwe gradient die weer is gewoon een lineaire gradiënt dat iemand anders schreef twee kleuren verschillende percentages van elk.
En we zullen redden.
En ga check it out now.
En daar gaan we.
Dus we steeds dichterbij.
De volgende grote ding dat we moeten werken zijn de iconen.
Dus hebben we een plus icoon.
En wat dit doet is het toont en verbergt de vorm en dan hebben we de prullenbak.
Ik kan zien dat we ook moeten omvatten die iconen zijn onderdeel van een bibliotheek genaamd lettertype.
Geweldig.
Dus, ga naar lettertype geweldig en gewoon google voor de website is Fonte geweldig.
Ik krijg haar I.
En alles wat het is, is een verzameling van een bos van iconen.
Dus laat me zien als we kijken onder iconen is er een enorme lijst van alle verschillende pictogrammen die we kunnen gebruiken, zodat u kunt daar te zien.
Dus moeten we deze bibliotheek onder meer binnenkant van onze applicatie, zodat we kunnen ofwel gaan om het daar te downloaden en klik op download of we kunnen ook een lettertype te doen.
Awesome CDN en gewoon gebruik maken van een van deze CDN ook.
Ofwel zou werken.
Dus voor verscheidenheid sake omdat ze al Jay vraag gedownload zal ik de CD te gebruiken en hier te kopiëren die link.
Dan ga ik naar mijn indexpagina Timo en ik moet een link tag toe te voegen, want het is CSSA file, dus het is niet echt een javascript-bestand of een lettertype, maar het is een C Ss-bestand en ik zal besparen en wat dat doet is het eigenlijk geeft me een heleboel klassen die zijn pre-built en pre-en-klare, dat ik dan kan toevoegen aan elementen, zodat ik u een paar voorbeelden zullen laten zien.
Als je wilde gebruiken zeggen dat de batterij leeg is of de batterij driekwart alles wat we nodig hebben om te weten is dat de klasse wordt genoemd f een scheutje batterij dash 3 dash courters Dus moeten we voegen een net de code in onze applicatie te kopiëren hier ergens.
Laten we het in de H-1.
Het is een eye-tag die staat voor pictogram en we geven het een klasse en we hoeven niets te zetten hier.
Dat laten we leeg en dit staat Rifan geweldig.
En dan is dit de naam van het pictogram en zal refresh redden en we hebben nu dat de batterij-icoon in plaats van de batterij-icoon drie kwart.
We willen het plusteken en de vuilnisbak dus we zullen hierheen te gaan en in de H-1 wordt het pictogram te houden en de f a klasse, maar we willen F.A. dash plus en voel je vrij om je eigen icoon te gebruiken.
Als je op geweldig te vinden en u vindt een ander die je leuk vindt, omdat we ook één van de als een potlood op zoek pictogram of een potlood en papier kunnen gebruiken en als ik fris waren en nu hebben op het plusteken die ging in stijl en beweging naar rechts en alles wat we moeten doen want dat is selecteer het eerste, zodat we de hond zullen selecteren.
F een streepje plus en wil dreef rechts net als dat en verfrissen en het is nu meer dan verder te zoeken.
Laten we nu eens aanpakken van de vuilnisbakken en we zijn niet van plan om nog even te gaan met de animatie.
We gaan gewoon naar de vuilnisbak te krijgen kan opdagen op alle in plaats van een X.
Dus laten we terug gaan en op onze spand we eigenlijk aan de hand om zich te ontdoen van de X krijgen en binnen de reeks gaan we naar een ander e-tag en de e-TAG gaat om een ​​klasse van FAA hebben en de naam van de toe te voegen de vuilnisbak icoon is FAA Dasch prullenbak laten kopiëren die over naar de andere overspanning en dit is alleen voor de bestaande te gebruiken wanneer de pagina wordt geladen, maar we krijgen drie vuilnisbakken voor de nieuwe.
We zijn nog steeds te maken met de ex.
Dus dan willen we hier over te gaan naar onze Javascript.
En als we pen nieuwe degene die we willen niet een overspanning met X. voegen
U wilt een icoon te voegen en we moeten ervoor zorgen dat onze offertes niet interfereren.
Dus als we gebruik maken van enkele aanhalingstekens daar en op te slaan en nu moeten we een prullenbakpictogram binnenkant van de overspanning.
Dus laten we nog een paar nieuwe.
Daar gaan we.
En ik kan nog steeds op, omdat ze nog steeds binnenkant van een overspanning.
Dus het is een icoon element in plaats van een overspanning.
Dus ik klik evenement nog steeds werken.
Laten we nu werken aan dit eenvoudige animatie en dit alles gebeurt met C beoordelen van de overspanningen hier zijn eigenlijk verborgen wanneer de pagina wordt geladen.
Ze hebben een schat aan nul.
En toen ik zweven we eigenlijk het verhogen van de breedte van 40 pixels en dan zijn we waardoor het geanimeerd met de eigenschap overgang.
Dus laten we gaan proberen een deel van dat.
Openstellen van onze CSSA bestand en het eerste wat we doen is de stijl overspant zo overspannen en we gaan ze een achtergrond kleur die rode kleur die is e 7 4 C 3 C en zal vernieuwen om te geven.
En nu hebben we dat rode achtergrond omheen.
Volgende wat we zullen doen, is hen een hoogte van 40 pixels die niet lijkt te nog veel te doen, maar zodra we voegen in een paar eigenschappen die u zult een verschil merken.
Laten we een marge toe te voegen aan het recht van 20 pixels en ga terug.
Nu dat geeft ons de ruimte die we hier wilden.
Volgende laten we hen text align Center dat is slechts een zeer klein verschil op de overspanningen hier.
De iconen binnen een belangrijke stap is om de icoon te wit dus kleur wit te maken.
Okee.
Dus ik ga je laten zien hoe om ze te krijgen om eerst te kijken als dit zonder de animatie zodat ze er altijd.
En dan zullen we hen om dat te animeren dat ze verborgen totdat we zweven.
Dus we zijn er bijna, maar we moeten deze verticaal en horizontaal nemen meer ruimte.
Dus ik ga in een toe te voegen met een 40 pixels die uiteindelijk gaan we op nul te zetten en om de weergave twee in lijn Block.
En ik nu vernieuwen.
En dat ziet er gewoon goed.
Dus de volgende ding is om de animatie te doen.
En de manier waarop die werkt we werkelijk naar de breedte ingesteld op nul.
Dus al deze overspanningen te hebben met een nul totdat ik zweven over een bondgenoot en dan verhogen we dat met zijn 40 op die spanwijdte.
Dus laten we dat nu doen.
Ik ga op te zetten met nul en toen we de muisaanwijzer over een bondgenoot en niet alleen de overspanning, maar toen we de muisaanwijzer over een bondgenoot willen we de overspanning dat er binnen in een bondgenoot dat wordt zweefde over te selecteren.
Dan gaan we om met zijn 40 pixels, net als dat.
En laten we teruggaan naar onze eigen versie en refresh.
Je kunt zien dat de overspanningen nu zijn verdwenen.
En als ik dan zweven en vliegen de overspanning verschijnt en de knop werkt.
Dus de volgende functie krijgt het zo animeren dat het niet alleen verschijnen onmiddellijk en te doen dat we gewoon zullen gebruik maken van de woning overgang.
Zo op de overspanning we gaan overgang twee seconden toe te voegen nulpunt en we zullen het lineaire die net verwijst naar de versoepeling wat betekent dat het met een constante snelheid zal bewegen te maken.
En daar gaan we.
We hebben onze leuke animatie.
Er is een kleine punt dat hier stoort me namelijk dat het pictogram nog steeds laat zien, zelfs wanneer de overspanning nul pixels breed.
Dus het is echt moeilijk om te zien, maar kijk op het pictogram hier.
Het is er nog steeds, zelfs als ik niet zweefde over het.
Dus wat we zullen doen is gewoon zet de dekking op de overspanning tot nul te zetten en vervolgens om één te zijn wanneer we zweven.
Dus ondoorzichtigheid nul en vervolgens dekking 1.0 wanneer we zweven.
En die moeten zorgen voor het.
Dus nu kunnen we niet de icoontjes te zien.
Er is en dan verdwijnt het en het verdwijnt uit goed ook, want het pand overgang is alles beïnvloeden.
Dus laten we het 2,2 seconden en ik zal je laten zien.
Merk op hoe het vervaagt in en daarna verdwijnt.
Dus dat is een zeer trage versie.
En we zullen gewoon doen 0.2.
Er is een kleine irritante ding dat we nog wat als je kijkt echt dicht hier of de grootte is er een kleine kloof tussen de ingang en dan is dit een lijst van de UL.
Maar de kloof gaat weg toen ik er nu concentreren flush.
En toen ben ik niet gericht komt het terug.
Dus om vast te stellen dat we gaan naar een kleine rand die onzichtbaar is eigenlijk dat het gaat om een ​​kleur slechts een kleine rand van R.G. hebben toe te voegen zijn 0 0 0 0 0 0 die we zojuist zullen nemen dezelfde ruimte als onze grens doet wanneer we gefocust.
Dus we zullen teruggaan en graag de input die we hier hebben en geef het een grens van drie pixel solide R-Ga.
nul nul nul nul.
Dus dat zal uiteindelijk geeft ons een onzichtbare grens.
Maar merk hier Ik kom nu te vernieuwen dat kleine kloof verdwijnt.