Tailwind CSS: Opinie - klasa rouded i object-cover

0:00Teraz spróbujemy odwzorować sobie sekcję

0:02opinii, którą mamy tutaj i zabierajmy się do pracy.

0:05Sekcja na górze potrzebujemy h3, opinions.

0:09Zapiszemy to sobie. No i poniżej

0:12potrzebujemy trzy elementy.

0:14Zacznijmy od budowy jednego z nich.

0:16Analogicznie do tego, co robiliśmy

0:18wcześniej tutaj w tej sekcji zbudujmy sobie taki jeden element najpierw.

0:23Czyli widzimy wyraźnie, że mamy tutaj

0:24jednego wielkiego wrappera, z jakimś folderem poniżej.

0:29Dodatkowo dochodzi nam na pewno

0:32wrapper tutaj na ten tekst i dodatkowo dochodzi nam wrapper tutaj na ten image.

0:38Czyli możemy stwierdzić, że mamy jeden główny div i w nim w środku mamy dwa divy.

0:44Zacznijmy sobie więc od pisania tej logiki, czyli

0:47mamy opinie poniżej zbudujemy sobie nasz element, czyli mamy jeden div.

0:50W środku będą 2 divy, które oplatają nasz content.

0:56W pierwszym divie mamy teksty, dwa teksty tak naprawdę.

0:59Możemy sobie zrobić

1:03h3 albo w tym momencie h4, tu sobie wpiszemy Albert Einstein.

1:09I drugi tekst niech będzie p, tutaj cytat,

1:14tego sławnego naukowca. Zapisujemy. I w kolejnym divie mamy nasz image

1:21i obrazek Alberta, zarówno Alberta, Sokratesa jak i Napoleona

1:25dołączam w materiałach dodatkowych do tej lekcji.

1:28Znajdziesz je w katalogu images.

1:31Ja teraz skorzystam z magii kina i dodam

1:33po prostu te obrazki do siebie do katalogu, żeby móc z nich skorzystać.

1:37U mnie już pojawiły się trzy nowe obrazki Napoleon, Sokrates i Einstein.

1:43Takie same obrazki znajdziesz w swoim katalogu z materiałami dodatkowymi do tego

1:46kursu I teraz możemy sobie już skorzystać z tego obrazka.

1:50Jako, że mamy pierwszego Alberta Einsteina, odnieśmy się do niego.

1:54Katalog images, Einstein.

1:58I tu możemy sobie wpisać imię i nazwisko naszego sławnego naukowca.

2:03Zapiszemy.

2:05Wróćmy do naszej strony i no, coś nam się pojawiło.

2:10Pozwól, że zakomentuję sobie wszystkie te sekcje, żebyśmy mogli skupić się tylko i

2:14wyłącznie na tym, co robimy w tym momencie. No I zacznijmy stylować te elementy.

2:18Na pewno potrzebujemy nadać naszemu wrapperowi display-flex z tego

2:24względu, że mamy te dwa elementy ustawione koło siebie.

2:28Dlatego zacznijmy teraz od stylowania tego głównego elementu ,flex.

2:35Możemy dać Items-center od razu, żeby wycentrować obrazek z całą resztą.

2:41No i już mamy to tak naprawdę zrobione.

2:44W tym momencie przejdziemy do naszej strony.

2:47To już mamy obrazek koło tego.

2:49Teraz możemy przyjrzeć się temu obrazkowi dokładnie, jakie on ma wymiary.

2:52I z tego co widać ten kwadrat tutaj to on ma wymiary 48 na 48.

2:57Czyli możemy przejść do naszego image,

3:01generalnie chyba nie będziemy potrzebować tego wrappera, bo image też jest jako element.

3:06Dlatego możemy sobie użyć klasy i width.

3:09Jeżeli to jest 48 to 48 dzielone na 4 mamy dokładnie 12.

3:16Możemy użyć, height też sobie ustawimy na 12. Object-Cover.

3:21Wymaga to troszeczkę wyjaśnienia.

3:23Otóż to zapobiega temu, żeby nasz obrazek

3:28generalnie zmienił swoje właściwości pod wpływem tego jak szeroki jest i wysoki

3:34jest nasz wrapper, czyli nasz image. I więcej informacji na ten temat możesz

3:39znaleźć tutaj w Tailwind CSS i w właściwości object position.

3:44I tutaj możemy sobie ustawiać, zobacz,

3:46jeżeli chodzi o obrazki mamy image i tutaj możemy sobie odpowiednio ustawić

3:52obrazek jak on ma być wyświetlany w naszym wrapperze.

3:55Jeżeli sobie nadasz Object-bottom to obrazek po

3:57prostu będzie miał pozycję startową od bottom w góry i będzie po prostu rzecz, która się

4:02nie mieści w naszym wrapperze będzie ucinania.

4:05I właśnie ja tutaj chcę zawsze pokazywać twarz Alberta Einsteina.

4:09Dlatego ja sobie wybrałem Object Cover

4:12w tym momencie, jeżeli wrócimy teraz do naszej strony internetowej, to

4:18zobaczysz, że po zapisaniu tego zmieni się nasz obrazek odpowiedniej wielkości.

4:24No i Einstein jest wyświetlany tutaj na środku.

4:28Wróćmy sobie teraz i przesuńmy ten obrazek maksymalnie w prawą stronę.

4:32Możemy to zrobić na kilka sposobów.

4:34Możemy nadać jemu margin left auto.

4:38Już to pozwoli nam przesunąć go w prawą stronę.

4:41Możemy oczywiście też nadać justify-content between, to też przesunie nam te obrazki.

4:46Natomiast zostawmy sobie ten margin left auto na razie.

4:50No i widzimy w designie, że obrazek też ma

4:52zaokrąglone rogi i tak naprawdę jest kółkiem. No i Tailwind przychodzi nam z pomocą

4:58tutaj kolejny raz. Mamy klasę Rounded,

5:02możemy sobie wybierać jak bardzo zaokrąglony powinien być nasz element.

5:05Natomiast jest też możliwość

5:09powiedzenia, że to ma być Rounded-full. Co to oznacza?

5:12Bardzo duża wielkość border radius.

5:15W większości przypadków będzie to

5:17oznaczało, że po prostu Twój element będzie kółkiem, po nadaniu takiej klasy.

5:21I już uzyskujemy taki sam efekt, jaki chcieliśmy w naszym design'ie.

5:26Widzimy, że obrazki te są nie wiem czy

5:28widać, bo one są czarno białe i możemy wykorzystać jeden z filtrów dostępnych

5:34właśnie z frameworka Tailwind, mianowicie Grayscale, który już korzystaliśmy.

5:38I robimy tutaj nic innego jak po prostu nadajemy Grayscale na nasz obrazek.

5:44Dzięki temu traci on wszystkie kolory,

5:46zostanie wyświetlany w odcieniach szarości.

5:49No i teraz możemy zająć się.