CSS: Malowanie układu strony

0:00W tej lekcji opowiem o malowaniu układów

0:03strony czyli generalnie o leje od pięciu lat.

0:05To ma duże odniesienie do animacji ale nie tylko bo początkowo poza ładowaniu się

0:11naszej strony w przeglądarce to też się dzieje.

0:14Generalnie za każdym razem jak przeglądarka wyświetla coś na ekranie no

0:18to wtedy leje out czy play out Shift się dzieje.

0:21Oczywiście one się dzieją w różnych momentach ale tutaj chciałbym pokazać jak

0:25tu debatować i jakich takich podstawowych problemów uniknąć.

0:29Czy ja stworzyłem sobie Animation które jest elementem tutaj

0:36jednym z tych patronów no i możemy aplikować tutaj tą animację.

0:41Francuz mówił też w ramach Powtórki po

0:44prostu sobie powtórzyć jak działają czyli nie ma i się nam ustawiamy na

0:50Animation Time link Faction możemy sobie ustawić na liniową.

0:54Animation Nation.

0:58Ustawiamy na powiedzmy sekundę Animation.

1:03PlayStation Racing

1:05Animation.

1:08Film od.

1:11I zobaczymy czy to wystarczy.

1:14Szczerze mówiąc nie wiem może o której zapomniałem.

1:16Zobaczymy jeśli sobie tutaj powiedzmy ustalimy animację pozycji czyli left

1:23a nie pójdziemy do Left powiedzmy 200 pikseli i napiszemy.

1:30No to widzimy że ta animacja faktycznie się dzieje.

1:33Możemy jeszcze zmienić Animation i rejon Kutna Infinite no to wtedy będzie lepiej

1:39widoczne że faktycznie tam lata z powrotem możemy jeszcze zmienić kolor.

1:45Na pomarańczowy.

1:49No i jak tu debatować.

1:52Jest taka zakładka w Prusach którą możecie otworzyć tutaj klikając na elipsy czyli

1:57trzy takie córeczki i klikając na kurs Mortal.

2:03Możecie tutaj oczywiście dywagować sama.

2:05Ale my chcemy dywagować teraz.

2:08I tutaj macie opcję włączenia Flash ringu leje.

2:12Możemy po kolei to zrobić.

2:14Jak wygląda pęd Flash Ring widzimy tutaj

2:18taki zielony obramowanie które wskazuje że faktycznie przeglądarka musi te miejsca

2:24Reader dynamicznie non stop i niektórych właściwości będą sprawiały że

2:30przeglądarka będzie musiała to robić samodzielnie.

2:35Ale są też rejony.

2:38Które tego robić nie będą np.

2:40przy pomocy transformatory.

2:42Jeśli zmienimy sobie pozycję na.

2:46Transformer.

2:48Transformer po prostu przesunięty za pomocą polecenia trans Lite

2:52od zera do powiedzmy tak samo 200 pikseli i piszemy łączymy Flushing.

2:58No to widzimy że tutaj nie ma i to nie jest wcale błąd przeglądarki tutaj nic nie

3:03zrobiłem źle w tym miejscu natomiast się to cofniemy do Left.

3:07No to widzimy że to się przemawia.

3:09Dlatego nie powinniśmy animowanych właściwości top Left Right bo

3:14Tom bo one będą właśnie powodowały renta no a właściwości takie jak Transformer

3:22trans Lite one działają na karcie graficznej i nie ma z tym problemu.

3:26Tego w rankingu nie robią nawet jeśli piszemy sobie 200 pikseli to

3:30nie ma Flash ringu bo zielony boks tylko raz.

3:34W momencie gdy animacja jest uruchamiana

3:37możemy też zobaczyć lead Shift czyli jak pozostałe elementy reagują na to że.

3:46Ta nie ma co się dzieje w przypadku transportu lata.

3:49Nie ma z tym najmniejszego problemu ale jeśli np.

3:52chcielibyśmy zajmować margines

3:55czyli ustawiły tutaj zamiast tego to możemy komentować

4:00marki na zero.

4:02I tutaj margines rajd na powiedzmy znowu 200 pikseli.

4:09Zapisujemy i widzimy że oczywiście ta

4:13animacja nie ma tutaj za dużo sensu bo po prostu jest brzydka

4:17ale widać tutaj problem może troszkę ją spowolnić do 10 sekund

4:23i widać że teraz ta animacja czyli ten element który się faktycznie przesuwa

4:28sprawia że nie tylko ten element się wędruje.

4:32Oczywiście to jest dosyć abstrakcyjny

4:34przykład ale często na stronach WWW będziecie mieli sytuację że

4:38jeden element pomimo tego że tylko on się przeładowane no to inne też mają.

4:43Nawet jeżeli to nie jest tak widoczne jak tutaj że faktycznie boksy się przesuwają.

4:47W związku z czym warto korzystać z tej

4:49zakładki w narzędziach deweloperskich i sprawdzać sobie czy wasze animacje

4:53faktycznie działają tak jak byście się tego spodziewali.

4:56Ponieważ jeśli będziecie mieli takie problemy no to wasz CSS po prostu nie

5:01będzie wydajny i będziecie też gorzej oceniani przez silniki wyszukiwarek które

5:07będą określały ranking waszych stronach internetowych.

5:10W tej konkretnej wyszukiwarce

5:14generalnie można tu jeszcze bardzo dużo

5:16debatować przy pomocy narzędzi deweloperskich.

5:19I tutaj ja odsyłam do bardzo dobrego kursu Piotra malarza też na platformie ePUAP

5:23gdzie możecie nauczyć się jak korzystać z plusów Chrome w sposób wydajny no i też

5:29tam na pewno poznać te informacje o zasięgu.

5:33Czy tak dogłębnie.

5:36Podsumowując nie ani mój się nigdy przy pomocy właściwości takich jak

5:41lew czy botoks a jeśli chcecie możecie też w internecie znaleźć młot bez

5:48refleksu CSS i na pewno będzie.

5:53Strona internetowa która wam pokaże które elementy faktycznie wpływają na to

5:58że dany element jest reprezentowany bądź nie bo jest to oczywiście lista skończona

6:04i te elementy Możecie sobie sprawdzić niekoniecznie musicie ich uczyć na pamięć.

6:09Ważne tylko żebyście.

6:12Mogli to zweryfikować jeżeli macie

6:14problemy z performance na waszej stronie w kontekście animacji.