Następną rzeczą, którą będziemy rozwiązania jest tło na ciele.
I to naprawdę nie jest to obraz tła choć jeśli znaleźliśmy jeden, który wyglądał tak, że będzie działać dobrze.
Ale ale to właściwie gradient że CSX jest dodanie dla mnie.
Więc w zasadzie możemy napisać gradienty liniowe i zamiast zapisując je na własną rękę od podstaw mam zamiar pokazać wam wielki zasób, który posiada kilka pre-done gradientów kolorów, że możemy pracować z tym możemy aktualizować i edytować na naszej własny.
Tak to się nazywa gradienty dot com.
I to ma kilka różnych gradientów możemy użyć klawiszy strzałek, aby zobaczyć niektóre z nich.
Więc po prostu przeszedł aż znalazłem jeden, który mi się podobało.
Więc powiedzmy, że chciałem to wykorzystać wszystko, co musimy zrobić, to kliknąć na Pobierz kod CSSA lub naciśnij klawisz Enter, a następnie skopiować ten kod do schowka i wtedy będziemy wybierać ciało.
Więc ciało i wklej że.
Więc jest to naprawdę tylko jedna linia, ale są wszystkie różne przedrostki przeglądarki.
Więc dla programu Internet Explorer dla Firefoksa do Chrome dla operowych wszystkich tych różnych prefiksów.
Ale to, co robi.
Jesteśmy ustawienie tła dla gradientu liniowego i jesteśmy zbierając dwa kolory i różne procenty tych kolorów, a także kąt.
Więc pozwól mi pokazać, jak to wygląda teraz, jeśli mamy odświeżyć nasze.
Mamy ten miły gradient.
Tak więc możemy zachować zabawy tam.
Możesz sprawdzić kilka więcej i czuć się swobodnie korzystać z własnych.
Ten, który zdecydowałem się na nazywa się Bora-Bora tutaj.
Więc po prostu skopiować tę kopię do schowka i zastąpić ten kod.
Wszystko to tutaj z tego nowego gradientu, który ponownie jest tylko kolejnym gradient linearny, że ktoś inny napisał dwa kolory różne procenty każdego z nich.
I będziemy oszczędzać.
I to sprawdzić teraz.
I tam idziemy.
Więc jesteśmy coraz bliżej.
Kolejna wielka rzecz, że musimy pracować nad znajdują się ikony.
Mamy więc pojawić się ikona Plus.
A co to robi to pokazuje i ukrywa formularz, a następnie mamy kosza.
Widzę, że musimy również obejmować te ikony są częścią biblioteki o nazwie czcionki.
Niesamowite.
Więc idź do czcionki niesamowite i tylko google na stronie internetowej jest Fonte niesamowite.
Ja się jej I.
I wszystkim, że jest to zbiór pęczek ikony.
Więc pozwól mi pokazać, jeśli spojrzymy pod ikonami istnieje ogromna lista wszystkich różnych ikon możemy wykorzystać, dzięki czemu można zobaczyć tam.
Więc musimy włączyć tę bibliotekę wewnątrz naszej aplikacji, dzięki czemu możemy albo pójść ściągnąć go właśnie tam, a po kliknięciu na pobranie pliku, możemy również zrobić czcionkę.
Niesamowite CDN i po prostu użyć jednej z tych sieci CDN, jak również.
Albo jeden będzie działać.
Więc dla dobra odmiana, ponieważ już pobrane Jay zapytanie użyję CD i tu skopiować ten link.
Potem pójdę do mojej strony indeksu Timo i muszę dodać tag linku, ponieważ jest to plik CSSA więc nie jest to właściwie plik javascript lub czcionki, ale jest to plik C Ss i będę zapisać i co to robi to w rzeczywistości daje mi kilka klas, które są wstępnie zbudowane i gotowych że można następnie dodać do elementów, więc pokażę wam kilka przykładów.
Jeśli chcesz użyć powiedzenia bateria pusta lub bateria threequarters wszystkim musimy wiedzieć, że klasa jest nazywany f bateria kreska courters kreska 3 kreska więc musimy dodać jeden wystarczy skopiować kod gdzieś w naszej aplikacji.
Ujmę to w H-1.
Jest to znacznik oko co oznacza ikonę i dajemy mu klasy i nie trzeba kłaść się tutaj.
Wyjeżdżamy, że pusta, a to oznacza Rifan niesamowite.
I to jest to nazwa ikonę i uratuje odświeżenia i mamy teraz, że ikona baterii zamiast ikony baterii trzy czwarte.
Chcemy znak plus i śmieci, tak pójdziemy tutaj i wewnątrz H-1 będzie utrzymywać ikonę i zachować f klasę ale chcemy F.A. kreska plus i zachęcamy do korzystania z własną ikonę.
Jeśli pójdziesz dalej, aby dowiedzieć niesamowite i znaleźć inny, który lubisz, bo mogliśmy również użyć jednego z jak ołówek patrząc ikony lub ołówka i papieru, a jeśli były świeże, a teraz mają znak plus, który udał się do stylu i przenieść na prawo i wszystko, co trzeba zrobić, bo to wybierz ją najpierw więc musimy wybrać psa.
F plus myślnik i wola swobodny prawo tak po prostu i odświeżyć i jest obecnie ponad po prawej stronie.
Teraz zająć się pojemniki na śmieci, a my nie zamierzamy zajmować się animacją jeszcze.
Jesteśmy po prostu dostanie śmieci mogą pojawić się w ogóle zamiast X.
Więc wróćmy oraz na naszej spand jesteśmy rzeczywiście zamierza pozbyć się X, a wewnątrz przęsła mamy zamiar dodać kolejne e-tag i e-TAG będzie miał klasę FAA oraz nazwę śmieci mogą ikona jest FAA Dasch śmieci niech skopiować, że na drugą rozpiętości i to tylko dla istniejących używać podczas wczytywania strony, ale mamy trzy pojemniki na śmieci na nowe.
My wciąż do czynienia z ex.
Tak więc chcemy iść tutaj do naszego JavaScript.
A kiedy pióro nowy nie chcemy dołączyć rozpiętość z X.
Chcesz dołączyć ikonę i musimy upewnić się, że nasze notowania nie przeszkadzają.
Więc jeśli używamy apostrofów tam i zapisać, a teraz powinniśmy mieć ikonę kosza w środku rozpiętości.
Warto więc dodać kilka nowych.
No to jedziemy.
I nadal mogę kliknąć, ponieważ są one nadal w środku rozpiętości.
Więc jest to element ikona zamiast rozpiętości.
Więc kliknij zdarzenie nadal działać.
Teraz działa na tej prostej animacji, a to wszystko jest zrobione z C ocenić tutaj rozpiętości są rzeczywiście ukryte podczas wczytywania strony.
Mają mnóstwo zera.
A potem, kiedy unoszą jesteśmy rzeczywiście zwiększenie szerokości 40 pikseli, a potem robimy to animowane za pomocą właściwości przejścia.
Więc chodźmy próbować trochę tego.
Otwórz nasz plik CSSA a pierwszą rzeczą, którą możemy zrobić, to styl rozpiętości więc rozciągać i zamierzamy dać im kolor tła, że ​​kolor czerwony, który jest E 7 4 C 3 C i odświeżyć.
A teraz mamy, że czerwone tło wokół niego.
Następną rzeczą, którą zrobimy, to dać im wysokość 40 pikseli, które nie wydają się jeszcze wiele do zrobienia, ale gdy dodamy jeszcze kilka właściwości zauważysz różnicę.
Dodajmy margines z prawej strony 20 pikseli i wrócić.
Teraz, gdy daje nam miejsca, które chcieliśmy tutaj.
Następny dajmy im tekst Center align, która jest tylko bardzo niewielka różnica tutaj przęseł.
Ikony wewnątrz ważny jest, aby ikonę zbyt białe, tak kolor biały.
W porządku.
Więc mam zamiar pokazać, jak je zdobyć wyglądać jak ten pierwszy bez animacji, dzięki czemu są one zawsze.
A potem dostaniemy je animować tak, że są one ukryte dopóki nie unosić.
Więc jesteśmy już blisko, ale musimy je wziąć więcej miejsca w pionie i poziomie.
Więc mam zamiar dodać A o 40 pikseli, który ostatecznie mamy zamiar ustawić na zero i ustawić wyświetlanie dwóch linii w bloku.
I teraz odświeżyć.
A to wygląda tak dobrze.
Więc następną rzeczą jest zrobić animację.
I sposób, że działa właściwie mamy zamiar ustawić szerokość wynosi zero.
Więc wszystkie te przęsła mają się od zera aż najechaniu na sojusznika, a potem zwiększamy że wraz być 40 na tej rozpiętości.
Więc zróbmy to teraz.
Idę do ustawiania zera, a następnie, gdy unoszą się nad sojusznika, a nie tylko rozpiętość ale kiedy najedź sojusznika chcemy, aby wybrać zakres, który jest wewnątrz sojusznika, który jest jest unosił się nad.
Następnie jedziemy do ustaw z 40 pikseli być tak po prostu.
I wróćmy do naszej wersji i odświeżyć.
Widać, że rozpiętości teraz zniknął.
I kiedy najedź i latać pojawia rozpiętość a prace przycisk.
Więc następnym elementem jest coraz to animować tak, że nie pojawia się natychmiast i aby to zrobić musimy po prostu skorzystać z właściwości przejścia.
Więc na rozpiętości mamy zamiar dodać Transition punkt zerowy dwie sekundy, a zrobimy to liniowy, który po prostu odnosi się do łagodzenia, co oznacza, że ​​będzie poruszać się ze stałą prędkością.
I tam idziemy.
Mamy miłą animacji.
Jest jeden mały element, który nie przeszkadza mi tutaj, które jest, że ikona nadal pokazuje nawet gdy rozpiętość wynosi zero pikseli szerokości.
Więc jest to naprawdę trudne do zobaczenia, ale oglądać ikonę tutaj.
To wciąż istnieje nawet wtedy, gdy nie jestem unoszące się nad nim.
Więc co zrobimy jest po prostu ustawić krycie na rozpiętość wynosi zero, a następnie ustawić go za jednego gdy unoszą.
Więc krycie zera a następnie krycie 1,0, gdy unoszą.
I że należy dbać o niego.
Więc teraz nie widzimy ikony.
Nie jest to, a potem znika i znika, a także dlatego, że nieruchomość Przejście dotyka wszystkiego.
Więc zróbmy to 2,2 sekundy, a pokażę ci.
Zauważ, jak wyłania się, a następnie znika.
Więc to jest bardzo powolny wersji.
A my po prostu zrobić 0.2.
Jest jeden mały irytujące, że mamy w lewo, który jest, jeśli wyglądają naprawdę ściśle tutaj lub zwiększyć rozmiar znajduje się mała szczelina pomiędzy wejściem a następnie na tej liście ul.
Ale różnica znika gdy skupię tam teraz równo.
A potem, kiedy ja nie koncentruje się wraca.
Więc to naprawić mamy zamiar dodać niewielką ramkę, która jest niewidoczna faktycznie będzie mieć kolor tylko mały pograniczu R. G. wynosić 0 0 0 0 0 0 której po prostu zajmują tę samą przestrzeń, jak nasza granica robi, gdy jesteśmy skupieni.
Więc wracamy i jak wejście, które mamy tutaj i dać go do granicy trzech pikseli stałej R-Ga.
zero zero zero zero.
Tak, że skończy się dając nam niewidzialną granicę.
Ale Wskazówki Tutaj będę odświeżyć teraz ta mała szczelina odchodzi.