1 00:00:00,210 --> 00:00:03,460 Het volgende dat we zullen aanpakken is de achtergrond op het lichaam. 2 00:00:03,660 --> 00:00:09,270 En dat is eigenlijk niet een achtergrondafbeelding maar als we iemand die eruit zag als deze die zou werken prima gevonden. 3 00:00:09,420 --> 00:00:13,590 Maar maar het is eigenlijk een verloop dat CSX voegt voor mij. 4 00:00:13,650 --> 00:00:27,470 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. 5 00:00:27,750 --> 00:00:29,850 Dus het heet hellingen dot com. 6 00:00:30,030 --> 00:00:35,580 En dan heeft het een heleboel verschillende hellingen kunnen we pijltjestoetsen gebruiken om een ​​aantal van hen te zien. 7 00:00:36,180 --> 00:00:39,860 Dus ik ging gewoon door tot ik er een die ik graag gevonden. 8 00:00:40,050 --> 00:00:52,120 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. 9 00:00:52,360 --> 00:00:56,960 Dus lichaam en plak deze in. 10 00:00:57,540 --> 00:01:02,610 Dus het is eigenlijk gewoon een regel, maar er zijn al de andere browser voorvoegsels. 11 00:01:02,880 --> 00:01:09,130 Dus voor Internet Explorer voor Firefox voor Chrome voor opera al deze verschillende voorvoegsels. 12 00:01:09,240 --> 00:01:09,990 Maar wat het doet. 13 00:01:10,020 --> 00:01:18,740 We zetten de achtergrond lineair verloop en we plukken twee kleuren en verschillende percentages van deze kleuren en ook de hoek. 14 00:01:18,750 --> 00:01:24,390 Dus laat me je laten zien hoe het er nu uitziet, als we ons vernieuwen. 15 00:01:24,390 --> 00:01:26,190 We hebben dit mooie verloop. 16 00:01:26,580 --> 00:01:28,420 Dus we kunnen blijven spelen daar rond. 17 00:01:28,620 --> 00:01:31,890 U kunt kijken op een paar meer en voel je vrij om je eigen te gebruiken. 18 00:01:31,980 --> 00:01:35,860 Degene die ik besloten heet Bora-Bora hier. 19 00:01:36,210 --> 00:01:42,840 Dus we gewoon dat kopiëren naar het klembord en vervang deze code te kopiëren. 20 00:01:42,840 --> 00:01:52,870 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. 21 00:01:53,150 --> 00:01:54,450 En we zullen redden. 22 00:01:54,780 --> 00:01:56,250 En ga check it out now. 23 00:01:56,520 --> 00:01:57,830 En daar gaan we. 24 00:01:57,840 --> 00:01:59,190 Dus we steeds dichterbij. 25 00:01:59,430 --> 00:02:02,860 De volgende grote ding dat we moeten werken zijn de iconen. 26 00:02:03,060 --> 00:02:05,530 Dus hebben we een plus icoon. 27 00:02:05,640 --> 00:02:10,130 En wat dit doet is het toont en verbergt de vorm en dan hebben we de prullenbak. 28 00:02:10,130 --> 00:02:16,100 Ik kan zien dat we ook moeten omvatten die iconen zijn onderdeel van een bibliotheek genaamd lettertype. 29 00:02:16,110 --> 00:02:16,780 Geweldig. 30 00:02:17,050 --> 00:02:22,650 Dus, ga naar lettertype geweldig en gewoon google voor de website is Fonte geweldig. 31 00:02:22,660 --> 00:02:24,030 Ik krijg haar I. 32 00:02:24,930 --> 00:02:29,660 En alles wat het is, is een verzameling van een bos van iconen. 33 00:02:29,970 --> 00:02:39,720 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. 34 00:02:40,380 --> 00:02:52,740 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. 35 00:02:52,740 --> 00:02:57,370 Awesome CDN en gewoon gebruik maken van een van deze CDN ook. 36 00:02:57,450 --> 00:02:58,710 Ofwel zou werken. 37 00:02:59,100 --> 00:03:06,800 Dus voor verscheidenheid sake omdat ze al Jay vraag gedownload zal ik de CD te gebruiken en hier te kopiëren die link. 38 00:03:07,470 --> 00:03:30,940 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. 39 00:03:31,230 --> 00:03:51,350 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. 40 00:03:51,510 --> 00:03:53,400 Laten we het in de H-1. 41 00:03:53,400 --> 00:03:59,060 Het is een eye-tag die staat voor pictogram en we geven het een klasse en we hoeven niets te zetten hier. 42 00:03:59,070 --> 00:04:02,560 Dat laten we leeg en dit staat Rifan geweldig. 43 00:04:02,700 --> 00:04:13,500 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. 44 00:04:13,500 --> 00:04:28,070 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. 45 00:04:28,110 --> 00:04:49,990 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. 46 00:04:50,280 --> 00:05:00,950 F een streepje plus en wil dreef rechts net als dat en verfrissen en het is nu meer dan verder te zoeken. 47 00:05:00,960 --> 00:05:06,250 Laten we nu eens aanpakken van de vuilnisbakken en we zijn niet van plan om nog even te gaan met de animatie. 48 00:05:06,300 --> 00:05:09,810 We gaan gewoon naar de vuilnisbak te krijgen kan opdagen op alle in plaats van een X. 49 00:05:10,260 --> 00:05:44,520 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. 50 00:05:44,730 --> 00:05:46,280 We zijn nog steeds te maken met de ex. 51 00:05:46,530 --> 00:05:50,310 Dus dan willen we hier over te gaan naar onze Javascript. 52 00:05:50,310 --> 00:05:54,990 En als we pen nieuwe degene die we willen niet een overspanning met X. voegen 53 00:05:55,290 --> 00:06:00,930 U wilt een icoon te voegen en we moeten ervoor zorgen dat onze offertes niet interfereren. 54 00:06:00,930 --> 00:06:08,690 Dus als we gebruik maken van enkele aanhalingstekens daar en op te slaan en nu moeten we een prullenbakpictogram binnenkant van de overspanning. 55 00:06:08,870 --> 00:06:10,830 Dus laten we nog een paar nieuwe. 56 00:06:10,830 --> 00:06:11,650 Daar gaan we. 57 00:06:12,030 --> 00:06:15,320 En ik kan nog steeds op, omdat ze nog steeds binnenkant van een overspanning. 58 00:06:15,450 --> 00:06:18,680 Dus het is een icoon element in plaats van een overspanning. 59 00:06:19,530 --> 00:06:22,440 Dus ik klik evenement nog steeds werken. 60 00:06:22,470 --> 00:06:30,210 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. 61 00:06:30,210 --> 00:06:31,630 Ze hebben een schat aan nul. 62 00:06:31,860 --> 00:06:40,950 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. 63 00:06:41,430 --> 00:06:44,070 Dus laten we gaan proberen een deel van dat. 64 00:06:44,400 --> 00:07:06,270 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. 65 00:07:06,460 --> 00:07:10,820 En nu hebben we dat rode achtergrond omheen. 66 00:07:10,830 --> 00:07:22,680 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. 67 00:07:23,250 --> 00:07:29,140 Laten we een marge toe te voegen aan het recht van 20 pixels en ga terug. 68 00:07:29,200 --> 00:07:34,420 Nu dat geeft ons de ruimte die we hier wilden. 69 00:07:35,550 --> 00:07:45,700 Volgende laten we hen text align Center dat is slechts een zeer klein verschil op de overspanningen hier. 70 00:07:45,990 --> 00:07:55,110 De iconen binnen een belangrijke stap is om de icoon te wit dus kleur wit te maken. 71 00:07:55,110 --> 00:07:55,970 Okee. 72 00:07:56,220 --> 00:08:02,640 Dus ik ga je laten zien hoe om ze te krijgen om eerst te kijken als dit zonder de animatie zodat ze er altijd. 73 00:08:02,930 --> 00:08:06,830 En dan zullen we hen om dat te animeren dat ze verborgen totdat we zweven. 74 00:08:06,870 --> 00:08:12,190 Dus we zijn er bijna, maar we moeten deze verticaal en horizontaal nemen meer ruimte. 75 00:08:12,390 --> 00:08:21,990 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. 76 00:08:22,440 --> 00:08:23,950 En ik nu vernieuwen. 77 00:08:24,870 --> 00:08:26,790 En dat ziet er gewoon goed. 78 00:08:26,790 --> 00:08:29,460 Dus de volgende ding is om de animatie te doen. 79 00:08:29,760 --> 00:08:33,630 En de manier waarop die werkt we werkelijk naar de breedte ingesteld op nul. 80 00:08:33,780 --> 00:08:42,420 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. 81 00:08:42,870 --> 00:08:44,580 Dus laten we dat nu doen. 82 00:08:45,020 --> 00:09:02,480 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. 83 00:09:02,790 --> 00:09:08,020 Dan gaan we om met zijn 40 pixels, net als dat. 84 00:09:08,070 --> 00:09:11,310 En laten we teruggaan naar onze eigen versie en refresh. 85 00:09:11,670 --> 00:09:13,920 Je kunt zien dat de overspanningen nu zijn verdwenen. 86 00:09:14,310 --> 00:09:19,330 En als ik dan zweven en vliegen de overspanning verschijnt en de knop werkt. 87 00:09:19,800 --> 00:09:27,860 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. 88 00:09:28,170 --> 00:09:43,680 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. 89 00:09:43,680 --> 00:09:44,520 En daar gaan we. 90 00:09:44,520 --> 00:09:46,680 We hebben onze leuke animatie. 91 00:09:47,250 --> 00:09:56,110 Er is een kleine punt dat hier stoort me namelijk dat het pictogram nog steeds laat zien, zelfs wanneer de overspanning nul pixels breed. 92 00:09:56,340 --> 00:09:59,970 Dus het is echt moeilijk om te zien, maar kijk op het pictogram hier. 93 00:09:59,970 --> 00:10:03,230 Het is er nog steeds, zelfs als ik niet zweefde over het. 94 00:10:03,240 --> 00:10:11,210 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. 95 00:10:11,370 --> 00:10:17,580 Dus ondoorzichtigheid nul en vervolgens dekking 1.0 wanneer we zweven. 96 00:10:18,420 --> 00:10:19,840 En die moeten zorgen voor het. 97 00:10:19,860 --> 00:10:22,370 Dus nu kunnen we niet de icoontjes te zien. 98 00:10:22,500 --> 00:10:29,790 Er is en dan verdwijnt het en het verdwijnt uit goed ook, want het pand overgang is alles beïnvloeden. 99 00:10:30,120 --> 00:10:34,740 Dus laten we het 2,2 seconden en ik zal je laten zien. 100 00:10:35,640 --> 00:10:40,810 Merk op hoe het vervaagt in en daarna verdwijnt. 101 00:10:40,890 --> 00:10:42,560 Dus dat is een zeer trage versie. 102 00:10:43,200 --> 00:10:46,830 En we zullen gewoon doen 0.2. 103 00:10:47,070 --> 00:10:59,530 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. 104 00:11:00,060 --> 00:11:03,810 Maar de kloof gaat weg toen ik er nu concentreren flush. 105 00:11:04,200 --> 00:11:07,220 En toen ben ik niet gericht komt het terug. 106 00:11:07,500 --> 00:11:24,690 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. 107 00:11:25,080 --> 00:11:34,560 Dus we zullen teruggaan en graag de input die we hier hebben en geef het een grens van drie pixel solide R-Ga. 108 00:11:35,150 --> 00:11:38,640 nul nul nul nul. 109 00:11:39,210 --> 00:11:41,770 Dus dat zal uiteindelijk geeft ons een onzichtbare grens. 110 00:11:41,880 --> 00:11:47,420 Maar merk hier Ik kom nu te vernieuwen dat kleine kloof verdwijnt.