Flexbox: Nagłówek kanału cz. 3

0:00Cześć witam cię kolejnej lekcji z kursu flexbox od podstaw i

0:04dalej kodujemy nasz layout który jest kopią youtube tutaj

0:08może zanim przejdziemy do stylowania tej części naszego headera

0:13poprawmy ten avatar to znaczy na

0:17avatarze ustawmy odpowiednie rozmiary jeszcze nie wiem jakie to są

0:21rozmiary zobaczmy 80 na 80 my tutaj mamy po prostu 100 na 100 więc

0:25robimy width 80

0:29pikseli height 80 pikseli bardzo

0:34by nam się tutaj przydał sass do różnych automatyzacji

0:38czy robienia zmiennych aby wartości były ze sobą powiązane natomiast

0:42na potrzeby tego kursu robimy to w czystym

0:47css no i ustawimy tutaj na

0:51details samych znajdźmy ten selektor padding

0:57top ustawiamy tutaj na

1:02tutaj jest 16 pikseli okej

1:07więc powiedzmy że mamy w jakimś stopniu tą część

1:11z informacjami o kanale skończoną no i

1:15przejdziemy do faktycznego stylowania tego menu nawigacyjnego czyli

1:19channel header nav robimy margin

1:240 padding 0 albo

1:28od razu padding sto pikseli tak jak wcześniej ustalaliśmy czyli tutaj

1:32zero tutaj 100 no i list-style-type

1:38none okej to tutaj nie

1:43działa bo musimy to ustawić na faktycznej liście a tu jest cały kontener

1:47czyli channel header tabs tutaj

1:51ustawiamy list-style-type none i tutaj też chcemy ustawić

1:55ten margin i padding tutaj padding

1:59w sumie na zero a tutaj padding mam

2:03już ustawiony na 100 wcześniej dla

2:09każdego taba tym razem ustawimy

2:14kolor na powiedzmy na razie na czarny już to zaraz naprawiamy żeby on

2:18się tylko nam pokazał nie pokazał się a to dlatego bo

2:22link ma faktyczny kolor jeszcze osobny

2:26ustawiony no i moglibyśmy już w sumie tak naprawdę

2:30tutaj ustawić tego fleksa czyli display flex i

2:34zobaczymy co tutaj dalej trzeba zrobić no oczywiście musimy ustawić jakąś jakieś

2:39rozmiary dla tych elementów więc ustawmy tutaj jest

2:43to padding 32 pikseli z lewej i z prawej na

2:47każdym tab'ie czyli albo

2:52w sumie od razu na każdym linku padding 0 32 piksele

2:56wysokość te linki mają 47 i kolor

3:01też 60 60 60 czyli kolor 606060

3:06tego usuwamy height

3:10ustawiamy na 47 pikseli no i tutaj ta szerokość

3:14to była całego elementu to

3:19było około 107 to jest oczywiście dostosowane do rozmiaru

3:23tekstu ale to ustawmy jeszcze chociaż font-size na

3:27te 14 pikseli i też text-transform uppercase

3:32zobaczmy jak to wygląda dobra

3:36jest już na pewno podobniej font-weight'a też zwiększymy oczywiście

3:41moglibyśmy to style jakoś lepiej wydzielić żeby nie musieć tego pisać

3:45kilkukrotnie bo widać że te style się powtarzają może dodamy na jednym

3:49elemencie na jednym tab'ie klasę

3:57channel header link active

4:02moglibyśmy zrobić klasę is active powiedzmy że zostaniemy przy tym i

4:08teraz jeśli dany element ma taką klasę no to stworzymy mu border-bottom

4:14odpowiedni zobaczymy ile on

4:18tutaj może mieć tego bordera 3 piksele

4:22a kolor

4:27w

4:31computed border-bottom

4:35color rgba no

4:41weźmy jakieś tam po prostu jakąś pochodną tego czarnego rgba

4:45101010 i tutaj

4:49na 0 a zobaczmy okej

4:57element jest ale on tego bordera jakby nie ma a

5:02no tak bo musi być jedynka nie 0 bo 0 to jest przezroczyste dobra

5:07i zobaczmy teraz jak duże są te elementy więc header

5:11ma jakąś tam określoną wysokość tutaj są te buttony wydaje

5:17mi się że to jest za małe 47

5:21pikseli niby nie mamy tu żadnego

5:26zoom'a ostatnio może background tutaj jakiś na razie

5:30na malutkie to jest acha bo linki mają

5:34domyślnie oczywiście display inline no i musimy zmienić im display

5:38inline-block jeśli chcemy im nadać jakąś

5:42konkretną wysokość natomiast my możemy nawet tutaj zrobić

5:47display flex po prostu i

5:51ustawić align-items na center no w tym

5:55momencie te linki faktycznie będą zajmowały

6:01taki obszar no i będziemy mogli im ustawić wysokość więc jest

6:11tutaj wskaźnik że możemy kliknąć dane

6:15elementy widzimy że tam channel już nam odjechał może

6:21ustawmy to jednak na jakimś wcześniejszym elemencie

6:25byśmy to po prostu widzieli dobra

6:31no

6:36i tutaj już nam wychodzą treści poza ten element co jest czego

6:41moglibyśmy się spodziewać skoro youtube też tutaj zaimplementował

6:47te strzałki więc

6:56co my zrobimy to wykorzystamy sobie te buttony czyli channel header

7:01button jeśli

7:05dobrze pamiętam nazwę slide

7:13button button okej slide baton te elementy są

7:17tu background red dalej

7:22go nie widzę dobra ustawmy po prostu wysokość i szerokość możliwe

7:28że przez to że nie mają treści ale treść powinny mieć bo chyba

7:32ustalaliśmy im a a nie ustalaliśmy im

7:37ikonek faktycznych no dobrze to oczywiście to ma sens ustawimy tutaj jeszcze

7:41fas chevron left jeśli

7:48dobrze pamiętam nazwę fas spacja

7:53fa chevron left i tutaj jest ten malutki

7:57chevron tylko że to jest element

8:02następny więc tutaj zrobimy chevron right i

8:07tutaj chevron left

8:17okej no i teraz możemy wrócić tutaj

8:21anulować te kolorowanie wstawić

8:27odpowiedni rozmiar tych przycisków bo to też jest istotne oraz to żeby one

8:31były tak naprawdę zaokrąglone one mają 14 pixeli

8:35font-size tak font-size 14

8:41pikseli kolor 60 60 60 teraz

8:46jak tu wracamy to okej no i

8:50zrobimy im oczywiście border-radius 50%

8:54i te elementy powinny być wypozycjonowanie tutaj no i w momencie przy krawędzi od

9:01strony prawej być nad tą listą która

9:05dalej tam się będzie ciągnąć ale będzie już ukryta czyli musimy

9:09im ustawić pozycjonowanie absolutne tylko względem czego zobaczmy

9:14względem czego możemy je ustawić prawdopodobnie w prawdopodobnie

9:19względem channel header nav czyli channel header nav nie

9:26ma pojedynczej tutaj klasy to ustawimy mu tylko na nim position

9:31relative no i na buttonie ustawiłem

9:35position absolute już

9:39ten przycisk tutaj się nam pokazał ustawiłem mu background

9:50i z-index na jedynkę żeby faktycznie był warstwę wyżej niż

9:54ta lista nawigacyjna może zmieńmy rozmiary

9:59tej strzałki żeby faktycznie pasowała 48 na 48

10:04no byłem blisko 48 na 48 tutaj

10:11pewnie jest powiązane z tą wartością zróbmy tutaj że to będzie 50 pikseli to będzie 48

10:16też mogłoby być 50 ale zostaniemy przy tym okej

10:22i ustawimy kolor jednak nie na biały tylko

10:26na taki jak ma ustawiony ten

10:32nav przepraszam cały header czyli fafafa

10:37jest

10:43fafafa no i teraz musimy tylko sprawić żeby

10:47oba te elementy były wypozycjonowane od góry do swojego rodzica

10:51czyli pojedynczo na każdym elemencie ustawimy

10:56tutaj prev będzie pozycjonowany one

11:00oba mają być wypozycjonowane od góry przy zerze więc teraz ten

11:04nam zniknął który kierował w lewo natomiast

11:09on się po prostu znajduje pod tym po prawej czy jeśli

11:13następny przeniesiemy

11:17na 0 od prawej strony a

11:28poprzedni na lewo to

11:32mamy już tą nawigację zrobioną tylko nie jestem pewien czy ona

11:36powinna być wypozycjonowana trochę mniej niż ten padding ciężko

11:41mi tutaj oszacować jak bardzo podejrzewam że po prostu 100

11:45minus 100 z tego paddingu który

11:49ustawialiśmy tam wcześniej czyli tej odległości czyli 100 pikseli

11:55minus faktyczny rozmiar tej strzałki czyli 48

12:00no i zobaczymy no

12:04jest mniej więcej tak jak w tym design'ie no i oczywiście powiedzmy

12:09że na youtubie nie widać tego na hoverze nie ma jakichś

12:13styli my możemy na active zrobić po prostu ten

12:19kolor szary czyli na obu

12:24channel button active

12:29ustawiony background na 60 60 60 i

12:35możemy jeszcze ustawić transition na background

12:390.3 sekundy

12:45liniowo no i teraz w momencie gdy będziemy klikać ten element

12:49to to nam się troszkę zbyt ściemni a

12:53może jakieś eee albo ddd

13:00nawet no i teraz mamy ddd może

13:06zrobimy tutaj na jedną sekundę żeby to było bardziej widoczne no

13:10i ten element jeszcze nie jest wycentrowany

13:14konkretnie względem tego koła

13:18jak widać to nie jest do końca na środku chociaż pewnie pod

13:22z punktu widzenia css jest ustawmy dla pewności display

13:27flex justify-content na center

13:31i

13:36zobaczymy no niestety nie jest to równe to jest złudzenie optyczne ponieważ

13:41z punktu widzenia matematycznego w css ten element jest na środku

13:45tylko z racji tego że ta strzałka kieruje w lewo to ona powinna być

13:49troszkę przesunięta w tą stronę żeby się wizualnie wydawała wycentrowana

13:54my to zostawimy w ten sposób no i w tym momencie pozostaje

13:59nam tylko może jeszcze zrobić tą lupę i przyciąć elementy

14:03za pomocą overflow hidden nie

14:08będziemy robić różne inne mniejsze szlify w kolejnej części tego

14:12kursu jeszcze poświęconemu header'owi aby go trochę dopracować

14:16do pracy