Webflow: Strona Główna - Stylowanie Kart

0:00Cześć! Witaj w kolejnej lekcji, w której pokażę Ci jak ostylować

0:02tak przygotowane kafelki. W zasadzie możesz pominąć tę lekcję,

0:05jeżeli wiesz, że stylowanie nie stanowi już

0:07dla Ciebie problemu. Ja akurat uważam, że kafelki po prostu były na tyle ważne, że

0:11chciałem pokazać od początku do końca w tym kursie jak je zrobić.

0:14Nawet dla osób, które nie oglądały kursu

0:16podstawowego, ale, jeśli już przerobiłeś kurs podstawowy i wiesz dokładnie jak

0:20posługiwać się właściwościami w CSS, możesz spokojnie tę lekcję przewinąć, bo będę

0:24tutaj tylko robił style, a nie będę robił elementów CMSa. Także zaczynamy stylowanie

0:29od Blog card i Blog card chciałbym ustawić parę właściwości.

0:34Przede wszystkim zmienimy Layout. Ustawimy na Display Flex. Direction wybierzemy vertical

0:40po to, żeby wyświetlać pionowo elementy. A po co to robię? Po to

0:43żeby właśnie upewnić się, że elementy będą rozciągnięte.

0:47Następnie wybieram widoczność elementu.

0:53Kolejną właściwość overflow ustawiam na Hidden.

0:55W razie czego, żeby nic nie

0:57było widoczne poza tymi kafelkami, a samą pozycję ustawię tutaj na pozycję Relative.

1:04Dlaczego?

1:05Dlatego, że później będziemy mogli łatwo pozycjonować wewnątrz tego elementu

1:08Inne rzeczy takie jak np.

1:10właśnie ten tags wrapper.

1:12Następna rzecz, którą ustawiamy to będzie

1:14kolor. Nie kolor tekstu, a color background, czyli wybierzemy ten kolor na Brand 6.

1:21W ten sposób, a następnie Border radius jeszcze ustawimy na 12 pikseli.

1:26No i box shadow też dodamy, będzie to trochę mniejszy cień.

1:30Będziemy chcieli go ustawić na

1:3215, czy 16 pikseli, wybierzmy 15 i blur zrobimy na 30, czy nawet 35, żeby

1:41był większy, natomiast jego przezroczystość znacznie zmienimy np.

1:46zrobimy tutaj 7, czy 6.

1:48Taką wartość, której używaliśmy wcześniej.

1:50Upewnię się też, że kursor jest ustawiony na Pointer, ponieważ całość jest linkiem,

1:56W związku z tym chciałbym, żeby było to widoczne jak ktoś najedzie, żeby

2:00tutaj widział rączkę, która wskazuje, że można na to kliknąć.

2:04Następnie mamy tags wrapper. Przejdźmy do tego kolejnego elementu i dla tags wrappera,

2:09elementy, które chce zmienić główne to

2:12będzie pozycja, ponieważ chciałbymm ustawić dla niego pozycję absolutną.

2:15Będzie ona pozycjonowana względem pierwszego relatywnego elementu,

2:19relatywnie pozycjonowanego elementu rodzica, w związku z tym względem blog card,

2:23które przed chwilą przestawiłem na relative

2:26No i w związku z tym mogę już łatwo

2:28dostosować teraz pozycje. Ja po prostu odsłonę to,

2:31wyrównam do lewej górnej krawędzi, ale odsunę to o

2:34np. 16 pikseli, nie procent, tylko wpiszę sobie z palca piksele, 16 pikseli od

2:41lewej i od górnej strony. No i w ten sposób udało się to łatwo zrobić. Z index w razie

2:46czego zrobię trochę wyższy, żeby mieć pewność, że jest to widoczne nad kartą.

2:51Kolejno mamy elementy Captions. W zasadzie one są dobrze ostylowane, jedyne, co zrobię to może

2:55dodam z prawej strony jakiś mały margines, żeby rozsunąć je, odsunąć od siebie.

2:59Teraz mamy obrazek. Może rzeczywiście wybierzemy najpierw Card image, po to

3:04żeby na ten obrazek nadać konkretne właściwości.

3:07Ja chciałbym, żeby mieć pewność, że on ma szerokość i wysokość 100 proc.

3:11Jako Fit wybiorę sobie Cover.

3:14No i też, żeby mieć pewność, że on dobrze się wyświetla w każdej sytuacji w tym

3:18kafelku, to wybiorę dla niego pozycjonowanie absolutne i po prostu

3:22rozciągnę go na full, czyli z każdej strony.

3:26Naturalnie on teraz wyskoczył z naszego

3:28obiegu dokumentu, dlatego, że cards image kontener powinien być jego rodzicem, który

3:32jest pozycjonowany na pewno relatywnie, więc tutaj zmienię pozycję na relative

3:36i już wszystko zaraz wróci do odpowiedniej wielkości.

3:39Natomiast sztuczka polega na tym, że teraz

3:41właśnie na cards image conteiner ustawię sobie konkretną szerokość. 100%

3:45upewnię się, że jest, ale ustawię sobie konkretny Padding od góry i to właśnie tym

3:49Paddingiem będę determinował wysokość tego zdjęcia. To jest fajna sztuczka, którą

3:54zwykle właśnie stosuję w takich sytuacjach.

3:56Dzięki temu możemy bardzo łatwo określić

3:59sobie Padding, określić sobie wielkość zdjęcia, wysokość i ja mogę sobie ją ustawić np.

4:03w procentach na 54 proc.

4:06akurat w tym przypadku. Będzie to całkiem fajne, elastyczne rozwiązanie. Wydaje mi się,

4:10że jeśli chodzi o właściwości zarówno zdjęcia jak i jego maski, którą

4:16stworzyliśmy z pomocą Paddingu, to to jest już wszystko. To teraz możemy przejść do

4:20tej sekcji card text i tutaj ustawiamy kolejne właściwości.

4:24Przede wszystkim będę chciał ustawić

4:27Display na Flex i wybierzemy dla niego Vertical, czyli pionowe.

4:32Następnie wybierzemy

4:34Justify od góry i od dołu, tak, żeby sekcja Footer była przyciągnięta do

4:40dołu, a sekcja Card title była przyciągnięta do góry.

4:44Kolejno będę chciał, mamy tu Padding już

4:46ustawiony, więc w zasadzie kolejne dla tej sekcji, chyba tylko zmienimy kolor tła,

4:51czyli wybiorę sobie kolor tła na kolor biały, bo tak jest w naszych kafelkach

4:54zadeklarowane. Jeśli chodzi o Card title to w zasadzie nie musimy tu nic zmieniać,

4:59podobnie jak dla Heading 3, ale zmienimy właściwości paragrafu.

5:03Czyli może wpiszemy Card excerpt.

5:08Zrobimy tutaj nową klasę,

5:10a następnie wrzucimy na pewno jakiś delikatny margines,

5:14może 8 pikseli od góry, żeby odsunąć go od tytułu.

5:18Kolejne ustawienia to na pewno musimy

5:20zmienić kolor tekstu, czyli przejdźmy do Text color i tutaj skorzystamy z koloru

5:268d8d8d. W sumie to jest kolor szary, z którego już korzystaliśmy.

5:30Nie wiem, czy on jest w Style guidzie.

5:31Chyba jest. Moglibyśmy właśnie skorzystać z jednego z tych kolorów, które mamy tutaj

5:35zadeklarowane albo użyć właśnie tego i dodać go do Style Guide'u.

5:39Myślę, że tak jest w porządku, natomiast musimy zmienić grubość tego tekstu. Zmieniamy ją

5:44na Normal i rozmiar to będzie nie 18, a 16 a Interlinia to 21

5:50W tym przypadku. Tutaj w zasadzie też

5:52nie musimy nic zmieniać, jeśli chodzi o ten kontener.

5:54Natomiast na pewno będziemy musieli zmienić w każdym z tych przypadków, mamy

5:58klasę Display, czyli wyświetlanie na blog, Card separator też na blog,

6:02i Card category też na blog, czy Inline blog, żeby te rzeczy umieścić obok siebie.

6:08Kolejno w tym Card separatorze dodamy margines z lewej i z prawej strony, czyli

6:13mogę z altem go dodać na przykład na 10 pikseli,

6:17to za dużo, zresztą zaraz zobaczymy jak dostylujemy jeszcze tekst. Rozmiar tego tekstu zmienimy

6:21na 10 pikseli i wysokość linii zmienimy na 13.

6:26To chyba wszystkie ustawienia,

6:29które są nam tutaj potrzebne i to samo zrobimy w Card authorze.

6:32Tutaj też zmienimy tak samo kolor, tak samo zmienimy tekst na 10 i na 13 wysokości linii

6:40i w tym przypadku Card category zmienimy sobie

6:45na pewno wielkość tekstu też na 10 i na 13

6:49Interlinie, natomiast kolor zostawimy taki i teraz wydaje mi się, że jest OK.

6:53Natomiast rzeczywiście między in jest teraz chyba

6:55za duży jednak odstęp, spróbujmy go zmienić np.

6:59na 3 piksele i teraz jest OK.

7:01Ostatnia rzecz, która jest tutaj do zrobienia to chciałbym sprawić, żeby zawsze

7:05te wszystkie kafelki miały równą wysokość. Zrobię to z pomocą takiej sztuczki, że na

7:10cały Collection item mogę wrzucić Display Flex i wtedy będzie to działać.

7:14Dlaczego?

7:14Dlatego, że w Line mamy po prostu opcję wyrównania od góry do dołu ustawioną na

7:20Stretch i w takiej sytuacji będzie to działać poprawnie.

7:24Oczywiście trzeba będzie zobaczyć, czy na

7:25poszczególnych wariantach kafelków, z różnymi długościach excerptu też

7:29wygląda to ok. Na razie myślę, że tak, bo tu mamy cztery linie, tutaj mamy trzy.

7:34Marginesy i odstępy są ustawione poprawnie, ale zwykle jest tak, że, jeżeli więcej

7:38danych nam się tu załaduje będziemy mogli dostrzec jakieś ewentualne niedoskonałości.

7:42Natomiast ważne jest to, że my te

7:44niedoskonałości poprawiamy tylko na jednym elemencie, czyli mamy w zasadzie Card list,

7:47który jest takim kontenerem, później mamy ten wrapper i na każdym item'ie po prostu

7:53będą te zmiany widoczne w momencie, gdy je wprowadzimy, więc robimy je raz w jednym

7:57miejscu i dzięki temu będzie zmieniać się wszędzie.

8:00Teraz zobaczymy jeszcze wersje responsywne,

8:02pewnie przy nich nam wyjdzie trochę rzeczy. Zerknijmy

8:05tutaj. Wygląda może OK.

8:07Może tutaj już w tym wariancie responsywnym tabletowym tak jest ok

8:113 karty, ale w tej najmniejszej rozdzielczości już raczej nie.

8:14Dwóch nie będziemy mogli zrobić, bo wyjdzie nam 2 i 1, więc zostaje nam wariant

8:18przełączania tutaj już na tablecie, na jeden kafelek, ale zanim to zrobię to

8:22zobacz jeszcze zauważyłem, że ten footer nie jest wszędzie równo. Tu mamy

8:25więcej tekstu i tak wygląda na to, że cały Card text nie dopasowuje się wysokością

8:32do kafelka. A jak możemy to zrobić? Bardzo łatwo, dlatego że Card text jest dzieckiem

8:38tego Blog card, który ma właściwość Flex, w związku z tym mamy Flex child i domyślnie

8:43Sizing jest ustawiony na Shrink. My będziemy musieli zmienić to na Grow.

8:47Najlepiej jednak będzie to zmienić już

8:49tutaj, po to żeby wszystkie wersje to dziedziczyły, to ustawienie.

8:52Więc przechodzimy tu i wybieramy Grow if

8:55possible i teraz jest dużo lepiej. Również na wersjach responsywnych też będzie OK.

9:00Natomiast tak jak wspomniałem, już w tej

9:02wersji tabletowej w mojej ocenie po prostu trzeba przejść do Blog card list, następnie

9:06wyedytować grida i usunąć stąd dwie kolumny po to, żeby została tylko jedna kolumna.

9:11To jest ok i na cały Blog card list wybierzmy teraz dane. Na całą Blog card list

9:16jeszcze wrzucimy margines od lewej i prawej strony 12,

9:19taki sam jak mieliśmy w kontenerze wyżej.

9:21Moglibyśmy oczywiście to zrobić, gdzieś

9:23wyżej, może w kontenerze miałoby większy sens, bo, jeśli wrzucimy to na Blog content

9:28container to Category section i Blog content container są elementami, które

9:32będziemy powielać na kolejne sekcje, więc może rzeczywiście tutaj by było OK.

9:36Natomiast tutaj musimy dodać Padding, ale to mi nie przeszkadza.

9:39Natomiast tego Padding'u nie chciałem mieć

9:40w wersji desktopowej, chcę mieć to dopiero od wersji mobilnej.

9:43No i to, co możemy zrobić jeszcze to

9:46dostosować zdjęcia, a raczej Cards image container.

9:50Mamy tutaj 54 proc.

9:51Padding'u, możemy to zmienić, ponieważ samo zdjęcie jest ustawione na Background size cover,

9:57to ono powinno ładnie się wszędzie centrować.

9:59Natomiast my mamy możliwość w każdej wersji responsywnej np.

10:02w mobilnej tej tutaj, jeżeli uznamy, że to zdjęcie jest za

10:05małe, nie ma problemu, możemy po prostu je powiększyć z pomocą tej sztuczki

10:09z Paddingiem i zawsze będzie dobrze nam się skalować.

10:11Dobrze to działa i myślę, że w responsywnych widokach też wygląda w porządku.

10:15Rzecz jasna można by było trochę rzeczy

10:17dopracować, ale myślę, że jest okej. Możemy przejść do kolejnej lekcji, gdzie dodamy

10:21sobie jeszcze jeden przycisk, a także dodamy kolejne sekcje. Do usłyszenia!