Dobrze welcome back.
W tym filmie mamy zamiar pracować w stylizacji naszej stronie w tej chwili.
To na pewno nigdzie w pobliżu, co to ma wyglądać na końcu.
Więc właściwie porównać je obok siebie.
Oto nasza tutaj.
Tak więc niektóre z wielkich zmian musimy dokonać zaokrąglenia narożników dodając kilka odstępów tu się wierzchu.
Zmiana stylizacji przycisków tutaj.
Więc te przyciski nie naprawdę wyglądają jak przyciski, aż po najechaniu na nich i otrzymujemy efekt najechania nasze przyciski są zdecydowanie ohydne i nie mamy żadnego wpływu aktywowanych na nich.
Również pozycja z nich jest trochę racji.
Jak widać, jeśli myślę tu dostaję tekst, ale jeśli były świeże, że przestrzeń tech jest już uwzględniona w porównaniu z naszej wersji, jeśli myślę, że tekst pcha wszystko z dala na boki.
Również tam animacja tutaj.
Więc kiedy klikam zauważyć jak zanikają powoli nasz kiedy kliknij dobrze, jeśli kliknę niepoprawny jeden po prostu od razu jest usuwany.
Dlatego chcemy, aby dodać przejście do tego.
Również mamy H-1 tu, że wymaga jeszcze trochę pracy na nasze.
Trzeba zajmują więcej miejsca.
Musimy zmienić kolor tła.
Chcemy zmienić czcionkę.
Musimy upewnić się, że rozpiętość naszej koloru jest poprawnie sformatowany, więc jest to z własnej linii i jest to większa czcionka.
Również musimy zmienić czcionkę dla całego ciała.
To są wszystkie takie same czcionki.
I wreszcie zauważysz mamy trochę miejsca w prawo tutaj pomiędzy paskiem i koniec korpusu oraz w wersji rozwiązania nie ma miejsca w ogóle.
OK.
Zaczynajmy od pierwszego rozwiązania tego H-1.
Więc mamy zamiar udać się do mojego tekstu sublinii i przejść do H-1, a pierwszą rzeczą, która zrobi to tylko wyrównać rzeczy w środku, jak widać w roztworze.
Rzeczy są wyrównane do środka.
Więc wszystko co musisz zrobić, to dodać tekst centrum wyrównać i zapisać i odświeżyć.
Ok niewielka poprawa.
Następna w kolejce zmieńmy kolor tła, więc kolor będzie nadal na niebiesko, ale można zauważyć, że jeśli I odświeżyć stronę teraz działa dobrze.
Ale jeśli znów odświeżyć, a potem wygrać grę lub kliknięciu na nowych kolorach.
To wraca do czerni i to dlatego, że nasz kod javascript jest nadpisanie że jesteśmy ustawienie go z powrotem do tego ciemnoszarym czarniawy koloru w naszym javascript.
Musimy znaleźć miejsca, gdzie jesteśmy zresetowanie do tego koloru, który jest 2 3 2 3 2 3.
No to ruszamy.
Chcemy tylko, aby to zmienić, aby być ciągle na niebiesko.
I to także wtedy, gdy odświeżam zaczyna to wciąż niebiesko.
Mam nowe kolory.
To pozostaje w dalszym ciągu na niebiesko.
OK.
Więc to jest to.
Teraz pozbyć się wszystkich czarnej przestrzeni po obu stronach naszej H-1.
Tak więc w naszym H-1 mamy zamiar pozbyć się wszystkich marginesu marży zerowej na górze i na dole po lewej i prawej.
Więc zauważyć co się dzieje kiedy to zrobić.
To czarna przestrzeń odchodzi ze wszystkich stron, z wyjątkiem tego trochę odstępu na lewej górnej i prawej.
A to nie przychodzi z lub H-1, który jest w rzeczywistości pochodzące z organizmu.
Więc to naprawić, że możemy udać się do ciała i nadać mu margines zerowy.
I teraz zwrócić uwagę na ten mały luki będę odświeżyć i że odchodzi.
Więc nasz biały pasek przechodzi przez całą drogę do boku, tak jak ma to miejsce w tej wersji tutaj.
OK.
Następna w kolejce skupmy się na zabawie.
Więc zabawa będzie taka sama dla wszystkich naszych elementów.
Przyciski i H-1 i rozpiętość tutaj to wszystko jest tego samego kroju nieco różne grubości.
I mamy zamiar używać tylko jednego z wbudowanych czcionek system vaunts które nazywa Avenir.
Tak, że będzie czcionka rodziny Avenir.
To jest czcionka, która może działać na każdym systemie tam.
Więc mamy zamiar dodać w innej opcji, która jest Mont. Serat tak po prostu.
Tak więc skończyć z tym zabawy tutaj co oczywiście nie wygląda dokładnie tak samo.
I to sprowadza się do naszej wagi czcionek.
Więc musimy zmienić wagę tej czcionki bo to H1.
Domyślnie jest to, aby pogrubione lub mieć jak 700 lub 800 lub nawet 900 wagi czcionek.
To, co chcemy zrobić, to dać mu wagę czcionki normalny.
Więc kiedy nasz H-1 można dodać wagi czcionki normalne i oszczędzać.
Odświeżać.
To się im bliżej przyjrzeć.
Teraz istnieje kilka innych rzeczy, które trzeba zmienić.
Pierwszym z nich jest, że to wszystko jest wielkie i możemy zrobić z RCSS używając tekstu przekształcić wielkie i zapisać Więc teraz przyjrzeć się bliżej, a także chcą, aby upewnić się, że nasz kolor jest na osobnej linii i że styl, który rozciągać się nieco inaczej aby to zrobić.
Mamy zamiar iść tutaj do naszego zespołu i rzeczywiście będziemy edytować w wieku go trochę.
I to jest pierwszy sposób, że jedziemy do tej pracy.
Zobaczymy inny sposób robi to z Pearcey SS Ale mamy zamiar zacząć od stylizacji to gdzie mamy wielki w jednej linii, a następnie dodać przerwę.
Możemy użyć ABR tag i faktycznie nie jest to świetny pomysł, jeśli chodzi o styl to trochę mile widziana, ale jest to szybki i łatwy sposób, aby zacząć dodawanie pewnych zwrotów i pewne podziały wiersza i to wszystko, że ten tag robi to dodaje podział wiersza.
Dlatego chcemy, jeden po Wielkiej chcemy sobie przerwę, a następnie nasz zakres, a następnie chcemy kolejną przerwę, a następnie gra kolorów na dole i jeśli odświeżyć Teraz widać, że jesteśmy coraz bliżej.
Teraz musimy skupić się na tworzeniu rozpiętość dużo większe.
Więc ten zespół ma pomysł na kolorowym wyświetlaczu.
Więc mamy zamiar przejść do Rc S i wybierz kolorowy wyświetlacz podobnie jak ten.
Id kolorowy wyświetlacz, a następnie jedziemy do powiedzenia rozmiar czcionki wynosi 200 procent rozmiaru czcionki H-1.
A jeśli odświeżyć teraz uzyskać ten znacznie większy rozmiar czcionki.
I jesteśmy coraz bliżej.
Mamy przerwy tutaj.
Można również zauważyć, że choć mamy dużo większą przestrzeń między liniami niż my tutaj.
Więc jest kilka rzeczy, które możemy zrobić, aby pracować nad tym.
Pierwszy z nich to zmienić wysokość wiersza.
Więc dajemy mu wysokość linii 1,1 i oszczędzać.
I spójrzmy na naszej wersji ponownie i odświeżyć i widać, że kurczy się nieco w dół.
Ale teraz straciliśmy miejsca na górze i na dole.
Musimy trochę miejsca tam.
Więc co zrobimy, to udać się i dodaj jakieś dopełnienie.
Więc mamy zamiar dodać dopełnienie do góry i na dole nie tylko w lewo i prawo i chcemy 20 pikseli na górze i na dole, dzięki czemu możemy zrobić, tak jak to wyściółką 20 pikseli i zera.
Możemy również zrobić dopełnienie top 20 pikseli i dopełnienie dno, ale to jest ładniejszy krótka droga robi to odświeżyć i można zobaczyć, że jesteśmy prawie tam teraz.
Więc nasz nagłówek wygląda dobrze.
Mamy prawidłowa czcionka poprawny sposób czcionek to wszystko w wielkiej odpowiednim kolorem tła.
Upewnijmy się, jak gram pozostaje poprawna wygląda wszystko dobrze.
Następną rzeczą, którą powinniśmy zająć się przyciski na tym pasku nawigacyjnym.
Więc na pewno ma długą drogę do przebycia, aby poprawić te.
Pierwszą rzeczą, którą chcesz zrobić, to pozbyć się granic więc nie mamy tej oczywistej obramowanie wokół przycisku.
Chcemy także, aby pozbyć się koloru tła.
Więc nie powinno być żadnego tła, jak można zobaczyć tutaj.
To jest po prostu poczekać, aż unoszą lub dopóki nie wybrać.
Ponadto chcemy, aby upewnić się, że rodzina czcionek jest taka sama jak tej czcionki tutaj.
Więc zacznijmy.
I mam zamiar wybrać wszystkie przyciski przycisk SO i jesteśmy po prostu powie granicznego żaden i oszczędzać.
Zwróć uwagę na przyciski kiedy odświeżenia.
OK.
Więc teraz mamy żadnej granicy.
Ale wciąż mamy ten kolor tła.
Więc teraz, że sam brak tła i zapisać i odświeżyć i jesteśmy coraz bliżej.
Więc teraz mamy tylko zwykły tekst.
I zaczniemy poprzez te wszystkie wielkie litery tekstu jak mamy tutaj.
Więc używamy tekst przekształcić ponownie po prostu skopiować tę linię na pastę, że tam i odświeżyć.
Teraz nasze przyciski są wielkimi literami.
Następną rzeczą, którą chcemy zrobić, to upewnić się, że przycisk przechodzi przez całą drogę od góry do dołu pojemnika div paskiem.
Teraz trzeba tylko część przestrzeni, więc możemy to zrobić poprzez ustawienie wysokości do 100 proc.
A to oznacza, że ​​będzie trwać 100 procent elementu zawierającego jak widać, że robi się nam o wiele bliżej.
Właśnie teraz trzeba zmienić niektóre kolory zmienić rozmiar czcionki grubość czcionki, a następnie zmienić efekt najechania które nie zostały jeszcze skonfigurowane.
Następną rzeczą, która będzie zrobić to czcionka trochę poczekać nieco cięższe i zmienić kolor będzie nadal niebieskie, jak również.
Więc waga czcionki zrobi siedemset wtedy kolor będzie również nadal na niebiesko.
I niech to sprawdzić odświeżania.
Tak robi się trochę starszy i można również zobaczyć, że kolor zmienił się na tym jeszcze tego samego koloru niebieskiego mamy tutaj.
Jest to naprawdę niewielka zmiana, że ​​możemy sprawić, która ma zmienić literę rozstaw być jeden piksel.
A jeśli zwrócić uwagę, gdy odświeżam można zobaczyć rzeczy rozłożonych tylko trochę między każdą literę.
Leslie skupmy się na wielkości czcionki.
Wydają się trochę za mały.
Więc będziemy po prostu użyć rozmiar czcionki i ustawić go do dziedziczenia.
A gdybym odświeżyć widać, że dziedziczą one rozmiaru czcionki, a my nie musimy wyraźnie powiedział.
Warto więc przyjrzeć się teraz.
Jedną z największych różnic jest to, że one są obecnie rozmieszczone inaczej.
Jak tylko załadowaniu strony mamy tu miejsca na naszej wersji.
Jednak nie ma tego miejsca, dopóki nie klikniesz na przycisku.
Więc co trzeba zrobić, to faktycznie styl przedział, który jest tutaj, a rozpiętość nazywa komunikat i będziemy chcieli pójść i podać, że niektóre właściwości, aby podjąć tę przestrzeń i wszystko, co musisz zrobić, to zmienić jeden Obiekt rzeczywistości.
Więc mamy zamiar wybrać wyświetlanie nasze przesłanie, które jest tego wentylatora i mamy zamiar zmienić właściwości wyświetlania się w kolejce.
BLOK Więc co to będzie zrobić, gdy odświeżam nie zauważy dużą różnicę od razu, ale to dlatego, że musimy również je przypisać z was wie, nadać mu o 20 procent, a zapisać i odświeżyć.
Mamy teraz ten przedział, mimo że nie ma nic w tym, że zaczyna się 20 procent tego ekranu.
Tak, że popycha tych elementów na stronie, która jest dokładnie to, co chcemy.
Rzućmy okiem i porównać je.
Dobrze więc, że wygląda całkiem blisko.
Co teraz będziemy pracować nad następnym jest coraz wybraną klasę, aby dopasować odpowiedni kolor i mający nasz efekt najechania również.
Tak, że będzie to w naszej przycisku i mamy zamiar dodać efekt najechania pierwszy.
Więc wszystko co musisz zrobić, to dodać przycisk Colan Huffer i mamy zamiar zmienić kolor czcionki być biały i kolor tła będzie niebieski stalowy.
Więc jesteśmy w zasadzie odwracania kolorów i będziemy zapisywać i odświeżać.
Teraz, kiedy unoszą widać uzyskać taki efekt.
Idealny.
A nasz Wybrana klasa, że ​​mamy będzie wyglądać tak samo.
Podobnie dzieje skopiować style.
Nie ma żadnej różnicy, gdy jesteśmy unoszące się nad czymś kontra gdy jest zaznaczona.
Powinny one wyglądać tak samo.
Więc widać, że patrzy w prawo i unoszą i tylko wtedy, gdy I wskaźnik.
Czy to aby ta niebieskim tle i biały kolor tekstu.
A kiedy przenieść odchodzi.
Istnieje niewielka różnica.
Gdybym najedź roztworze przyciski zauważyć, że zanika w tym kolorze.
To nie tylko natychmiastowe przełączenie na mojej wersji.
To po prostu przełącza natychmiast.
Możemy naprawić przy użyciu właściwości przejścia Css wewnątrz selektora przycisku.
Mamy zamiar napisać przejścia i przekazać je.
Dwa argumenty są dwie wartości, a pierwszy z nich jest to, co chcemy, aby przejść w naszym przypadku mamy tylko zamiar dodać do każdej nieruchomości, a potem następny, jak długo chcemy podjąć.
Więc zamierzam przesadzać go w pierwszym z dwóch sekund.
Więc znowu własnością przejście jest jak możemy powiedzieć CSX jak animowanie przejścia pomiędzy zmianami barwy lub zmiany wielkości czcionki i właściwości.
Więc to, co powiedziałem o to że za każdym razem zmiany własności na dowolny przycisk, który w naszym przypadku będzie tak naprawdę być koloru i tła.
Tak więc, gdy kolor zmienia i zmienia kolor tła powinien trwać dwie sekundy, a zobaczysz, kiedy odświeżenia.
I unosić.
Och, to nadal nie działa.
Brakuje mi tu moje s 2,00 s.
A teraz, gdybym odświeżyć i unoszą trwa dwie sekundy zanikać i gdy klikam aby dodać wybraną klasę również zajmuje dwie sekundy, a to trwa dwie sekundy zanikać, kiedy odejdę.
Więc dwie sekundy jest zdecydowanie zbyt długi.
Myślę, że dążenie do punktu około trzy sekundy.
Sprawdźmy to.
No to jedziemy.
To wygląda całkiem nieźle.
Ostatnią wielką rzeczą jest coraz zaokrąglone narożniki na tych kwadratów tak, że mamy te zaokrąglone narożniki wykorzystuje właściwość o nazwie Promień Granicznej.
Więc mam mediana docs otwarte, jeśli chcesz spojrzeć.
To dobra lektura.
Ale oni pokazać kilka przykładów dotyczących różnych rzeczy można zrobić z płyty promień.
Więc co mamy zamiar zrobić, to dać mu niewielki promień graniczny i są kwadraty tutaj.
I rzućmy okiem na to, co chcemy osiągnąć.
Więc to są, co chcemy uzyskać.
Tak było nieznaczne nieznaczne krzywej.
Chodźmy do naszego placu i przypisać klasie promień graniczny i zróbmy coś naprawdę przesadzone zacząć pokażę ci, co się stanie, jeśli zrobimy 50 procent.
Dostajemy kręgi i może rzeczywiście wolą używać koła.
Zastanawiałem się korzystania z nich, ale w końcu wolałem te zaokrąglone narożniki kwadraty i numer, który użyłem jest 15 proc.
A my po prostu dokładnie sprawdzić i porównać je.
OK, tak, że wygląda dobrze.
Piętnaście procent, ale jeśli chcesz, pokażę ci, co się dzieje, jeśli zrobiliśmy coś podobnego 5 procent i odświeżyć.
Otrzymujemy bardzo nieznacznie zaokrąglone narożniki.
Więc wracam do mojego 15 odświeżyć i teraz mamy nasze ładne zaokrąglone narożniki, ale musimy również działać na uzyskanie efektu animacji, ponieważ po kliknięciu na jedną z nich.
Zauważ, jak zmienia kolor, kiedy to zanika, podobnie jak efekt aktywowania wyblakłe i obecnie.
Aby to osiągnąć, musimy także użyć właściwości przejścia, ale w nieco inny sposób.
Więc mam zamiar iść do kwadratu, a jedyną rzeczą, którą chcemy przejścia jest kolor tła lub po prostu tła.
I znowu zróbmy długo jak 2,0 sekundy i zobaczyć, jak to wygląda.
Więc będę odświeżyć i będę kliknąć na jeden z nich.
Widać to trwa całe dwa sekundy fade out.
Więc nie chcemy coś trwać tak długo.
Prawdopodobnie przejść do punktu zerowego sześciu może.
Spróbujmy tego.
OK.
To wydaje się rozsądne.
Więc widać, że gdy tło zmienia to trwa 0,6 sekundy.
Czym różni się jednak, że gdy inne właściwości zmieniają nie animować je jak nasze guziki, gdzie powiedział, kiedy każda nieruchomość zmienia powinno zająć punkt trzy sekundy.
Jesteśmy tylko kierowanie tło i który zmienia.
Powinno ono 0,6 sekundy.
Jedna drobna rzecz, że chcemy, aby mieć świadomość, że nieruchomość przejście nie będzie działać we wszystkich przeglądarkach tak, że mamy napisane teraz być jak najbardziej przyjazne przeglądarce.
Tak naprawdę trzeba dodać dwa więcej właściwości, które nie zauważą żadnej różnicy w funkcjonalności, ale istnieją tylko dla wsparcia przeglądarki.
Tak więc pierwszy z nich jest zestaw Web Dasch przejścia, a my po prostu dodać ten sam dokładną wartość tutaj tak po prostu.
A potem musimy jeszcze jeden który to powinien być jeden myślnik Moz M. Ozy.
To są rzeczywiście prefiksy przeglądarki.
Więc Web Kit jest zestawem internetowej, która jest motorem, który jak używać przeglądarek Safari.
A potem mamy Moz i Mozy, która jest krótka forma jest Zilah czyli co Firefox jest zbudowany na.
To są po prostu dodać trochę więcej wsparcia, ponieważ nieruchomość przejście nie jest wbudowana w każdej przeglądarce jeszcze.
Więc odświeżyć.
Nic nie powinno wydawać się inaczej.
Nasza gra nadal działa w ten sam sposób, a my wciąż tę samą animację i powinniśmy zrobić to samo tutaj, kiedy my wszyscy przesiedli się powielić i zmienić to, że aby być przejściowe i przejścia wszystkich 0,3 sekundy do przejścia Mooc.
Ostatnią rzeczą, którą możemy naprawić tutaj jest trochę odstępy pomiędzy paskiem a początkiem naszej sieci.
Więc widać, mamy tu trochę więcej odstępów, że nie mamy tutaj.
A teraz, jeśli mamy wglądu mamy element, który jest wokół naszej sieci.
Mamy kwadraty i mamy kontener div id i że kontener div okrąża wszystkie 6 kwadratów.
Tak więc możemy użyć tego i po prostu dodać trochę odstępu do tego kontenera div musimy po prostu dodać margines na górze i na dole.
Więc myślę, że mamy go już stylizowany trochę.
No to ruszamy.
Więc powiedzieliśmy marża wynosi zero.
I auto, co zrobimy, a nie jest powiedzieć, marża wynosi 20 pikseli na górze i na dole i auto po lewej i prawej stronie, która jest, jak to jest wyśrodkowany.
Dlatego chcemy, że jest to auto z lewej i prawej, ale 20 pikseli na górze odświeżaniu.
Mamy odstępy.
OK, więc mamy zrobić z stylizacji do teraz.