Tailwind CSS: Filtry na obrazkach w TailwindCSS
od Podstaw
3 godz. 55 min · HTML i CSS · Full-stack i Programowanie
Daniel NoworytaFull stack DeveloperCzego się nauczysz
- Zrozumienie podstawowych koncepcji i zalet frameworka TailwindCSS.
- Instalacja i konfiguracji frameworka TailwindCSS.
- Tworzenie stylów strony internetowej przy użyciu gotowych klas CSS.
- Stylowanie strony internetowej w sposób responsywny, tak aby dostosowywała się do różnych rozmiarów ekranów.
- Stylowanie strony internetowej w sposób dedykowany dla wyświetlania na dużych ekranach.
- Zastosowanie różnych technik stylowania, takich jak tworzenie układów za pomocą display flex i display grid.
- Zbudowanie atrakcyjnej strony internetowej, korzystając z frameworka TailwindCSS.
- Optymalizacja pracy i przyspieszenia procesu projektowania interfejsów użytkownika dzięki wykorzystaniu gotowych klas CSS oferowanych przez framework TailwindCSS.
Pierwszy rzut oka na TailwindCSS
W tej sekcji zapoznasz się z frameworkiem TailwindCSS i poznasz podstawowe pojęcia związane z systemem klas. Dowiesz się, czym jest TailwindCSS, jakie problemy rozwiązuje i jakie zalety posiada. Będziesz miał okazję zobaczyć, jak wyglądają gotowe klasy CSS, które oferuje TailwindCSS i jak można je wykorzystać w projektach.
Projekt The Eduweb Times
Ta sekcja zawiera praktyczne zadanie polegające na zbudowaniu strony internetowej projektu The Eduweb Times na urządzenia mobilne. Będziesz mieć okazję zastosować swoje nowo zdobyte umiejętności w praktyce, tworząc atrakcyjną i funkcjonalną stronę internetową.
The Eduweb Times i responsywność
Ta sekcja skupia się na stylowaniu strony internetowej projektu The Eduweb Times w sposób responsywny, czyli tak, aby strona dobrze wyglądała na różnych urządzeniach. Zaczniemy od stylowania na Tablety. Nauczysz się, jak tworzyć style, które dostosowują się do rozmiaru ekranu, na którym jest wyświetlana strona.
The Eduweb Times i duże ekrany
Ta sekcja skupia się na stylowaniu strony internetowej projektu The Eduweb Times w sposób dedykowany dla wyświetlania na dużych ekranach, takich jak monitory desktopowe. Nauczysz się, jak wykorzystać różne techniki stylowania, aby stworzyć atrakcyjny i funkcjonalny wygląd strony na większych ekranach.
Dla kogo jest ten kurs?
Ten kurs wprowadzający do frameworka TailwindCSS jest przeznaczony dla programistów i web developerów, którzy mają już podstawową wiedzę i umiejętności z zakresu HTMLa i CSSa, ale chcą nauczyć się używać jednego z najnowocześniejszych narzędzi do stylowania stron internetowych.
Tutaj na pewno musimy sobie odsunąć
wrapper na te teksty troszeczkę w prawą stronę od tego elementu
z tym obrazkiem. I obrazek też jest zaokrąglony na naszym designie.
A my tutaj mamy,
generalnie jak sobie zbliżymy mamy takie zaokrąglenia.
Czyli przejdźmy najpierw do naszego obrazka.
Zrobimy sobie rounded-lg.
Zapiszemy. Już nasz obrazek, powinien dostać takie zaokrąglone rogi.
Mamy to!
I teraz przejdźmy sobie tutaj do naszego wrappera na nasz tekst.
I tutaj za pomocą klasy margin ustalimy sobie na dwa.
Przesunęliśmy sobie cały nasz tekst w prawą stronę.
Natomiast nie wiem, czy to jest wystarczająco.
Sprawdźmy sobie to dokładnie ile to jest ta odległość.
Namalujemy sobie kwadrat, i to wynosi dokładnie,
mamy 12 pikseli.
Czyli możemy sobie ml-3 spokojnie zrobić.
Wróćmy do naszego designu.
No i już wygląda to dużo bliżej niż to, co chcieliśmy uzyskać.
Tak naprawdę brakuje nam tutaj jeszcze tego podkreślenia.
I jedna ważna rzecz.
Otóż ten obrazek jest kolorowy i tutaj coś dziwnego się z nim dzieje.
Jest zmiana jego ratio.
Dlatego zrobimy sobie tutaj object-cover.
Co pozwoli nam zapobiec temu, żeby ten obrazek zmieniał
swoje proporcje w stosunku do tego, jak jakiej wielkości jest wrapper.
I co ta klasa robi?
No to object-cover ustawia tak naprawdę obrazek, ten image, w
zależności od tego jakiej wielkości jest kontener.
Nie tracimy na jakości tego obrazka, bo nie rozszerza on się w żadnym kierunku.
Dodatkowo potrzebujemy jeszcze tutaj ten border pod tym elementem.
Zobaczmy sobie na nasz design jak to będzie tutaj wyglądało.
Otóż border musi być pomiędzy każdym z tych elementów.
Z tego co tutaj widać.
Dlatego możemy sobie tak naprawdę nadać
ten border, bo widać pod ostatnim też jest.
Dlatego możemy sobie nadać border na jednym elemencie na bottom.
Dlatego zawsze to będzie działało,
niezależnie ile elementów będziemy mieli w tej sekcji.
Zawsze tak naprawdę pod elementem jest obramowanie.
Przejdźmy teraz do naszego elementu.
Aby kolejny wrapper naszego diva,
mamy tego nowego diva, którego możemy sobie teraz nadawać klasy.
I tutaj mamy class i tutaj sobie wpiszemy nasz border, nie line-clamp ale border-bottom na 2.
Mamy już border, damy sobie padding na y na 2. Przesunęliśmy troszkę to.
Natomiast my potrzebujemy tylko na bottom i zwiększyć do czterech.
Mamy już border pod elementem, który jest
tutaj i dodatkowo ten border jest troszeczkę za duży.
Tutaj to co my mamy to jest linia, która ma jeden piksel.
My natomiast mamy domyślnie,
Tailwind daje nam możliwość zrobienia dwóch pikseli.
Dlatego też musimy sobie poradzić.
Widzisz border-bottom-width jest 2 piksele.
Jeżeli spojrzymy na klasy to właśnie ten border b2 daje nam 2 piksele.
Natomiast problem jest taki, że mamy jeszcze dostępne border 0.
Natomiast to jak się możesz domyślić pewnie usunie całkowicie border.
Dlatego musimy znowu skorzystać z analogicznej sytuacji jak tutaj.
Jeżeli chcemy dokładnie odzwierciedlić
design naszego kolegi z zespołu, który dostarczył nam ten wygląd.
Musimy sobie wejść tutaj i w kwadratowe nawiasy znowu wpisać
arbitary value, czyli to co chcemy żeby było de facto użyte jako
wartość tego border na bottom i zapisując to mamy już ten jedno pikselowy border.
Tutaj jeszcze sobie zwrócimy uwagę na kolory tego wszystkiego.
Zobaczmy jaki to ma kolor A1A1.
Czyli to jest dokładnie kolor ten zinc-400.
Możemy przejść tutaj do tego elementu i nadać mu kolor border zinc-400.
Zapiszemy to sobie już na naszej stronie.
Border powinien zmienić swój kolor.
Sprawdźmy kolory tych tekstów, czy
rzeczywiście są nadane jako domyślne kolory.
Tak, 18181818.
Sprawdźmy sobie, czy rzeczywiście jest to samo.
Sprawdzimy sobie teraz te kolory.
Zobaczmy jak to wygląda.
1818 to jest kolor, który użył nasz designer. To jest zinc-900.
Czyli to jest chyba tak domyślny kolor tekstu na naszej stronie.
Czyli jak najbardziej możemy sobie
zostawić to, co mamy tutaj w tym elemencie.
Natomiast jest jeden problem.
Otóż mamy tekst, który jest czarno białym tekstem.
Nie ma tutaj w ogóle kolorów.
I kolejna rzecz, z którą przychodzi nam tailwind, czyli tak zwane filtry
na obrazki i jeżeli wejdziemy na stronę TailwindCSS i poszukajmy sobie filter,
mamy sepie.
Jak widzisz mamy tutaj różne jakby
dostępne filtry, Tailwind daje nam różne dostępne filtry.
Natomiast my potrzebujemy Grayscale, żeby wyszarzyć ten obrazek.
Czyli wystarczy, że nadamy sobie tutaj klasę Grayscale na nasz obrazek i już
powinniśmy uzyskać efekt jaki mamy zamierzony przez naszego designera.
Przejdźmy do naszego edytora kodu.
Nasz obrazek, klasa I w tym momencie wkleimy sobie Grayscale
i zobacz Wszystkie kolory zostały ukryte.
I w tym momencie już chyba możemy powiedzieć, że tak
naprawdę dokładnie odwzorowaliśmy to, o co chodziło naszemu designerowi.
Ja teraz skorzystam z magii kina i
dorzucę tutaj te dwa kolejne elementy, a dla Ciebie jako zadanie
do przyszłej lekcji zostawię dołożenie tych trzech tutaj elementów.
I jak widzisz udało się odzwierciedlić nam
drugą sekcję z tymi linkami i wszystko jest w skali Grayscale zrobione.
Poznałeś tutaj, w tym,
w tej lekcji poznałeś filtry, poznałeś jak można wykorzystywać pluginy w CSS.
Teraz sobie przejdziemy do kolejnej sekcji.
Przejdziemy sobie do tworzenia tutaj kolejnych elementów naszej strony.
Najpierw sobie zaczniemy od tej reklamy, potem zrobimy sobie tutaj tą sekcję,
tą zostawię dla Ciebie w ramach ćwiczeń.
I na końcu przejdziemy sobie do tworzenia właśnie stopki.
Koniec.
To będzie koniec tego mobilnego designu i potem przejdziemy sobie do implementacji
właśnie responsywnych styli i tego w jaki sposób najlepiej możesz do tego podejść.