Narzędzia Deweloperskie w Przeglądarce: Praca z kolorami

0:00W tej lekcji jeszcze pozostajemy w panelu elements i w stylach

0:04css bo chciałbym ci pokazać kilka sposobów na pracę z kolorami jeżeli

0:08sobie zaznaczymy jakiś element i przejdziemy do jego styli to

0:13zauważ że tutaj w tych stylach możemy zobaczyć na przykład kolory zróbmy sobie tutaj trochę więcej

0:17miejsca i teraz te kolory można modyfikować albo klikając tutaj i

0:21cokolwiek zmieniając na escape to można anulować albo klikając

0:26sobie w tym miejscu i wtedy będziemy mieli color picker to co jest fajne

0:30to jak wjadę sobie myszką na stronę to mogę sobie pobrać dowolny kolor jeżeli

0:34kliknę i teraz wcisnę enter zauważ że ten kolor

0:38tutaj został przypisany do przycisku który mamy u dołu mogę zrobić command z

0:42lub control z żeby wycofać tą zmianę natomiast kliknijmy sobie tutaj raz

0:46jeszcze jak widzisz nawet tutaj mamy color picker i kiedy ja tutaj po nim jeżdżę zwróć

0:50uwagę na przycisk na dole strony który zmienia swój kolor więc to nam pozwala

0:55dopasować sobie kolor do takiego jaki chcemy jeżeli wcisnę escape to

0:59również anuluję te zmienay wejdźmy jeszcze raz do tego color pickera bo

1:03chciałbym ci pokazać że tutaj jest kilka rzeczy mamy po pierwsze taką paletę kolorów

1:07jest to prawdopodobnie material ale nie jestem pewny i możemy

1:11sobie z nich wybrać ale fajna rzecz jest kiedy klikniemy sobie na tą strzałkę dlatego

1:15że to możemy zobaczyć coś takiego jak page colors i to są te kolory które

1:19chrome devtools znalazło w naszych stylach czyli tutaj po pierwsze będziesz mógł zobaczyć

1:23czy nie masz tak ja zbyt wielu podobnych kolorów do siebie to

1:28by oznaczało że być może gdzieś się lekko pomyliliśmy i tak naprawdę to miał być jeden kolor a

1:32po drugie będziesz mógł kiedy masz już te wszystkie kolory w css przypisać

1:36do tego przycisku inny kolor na przykład klikając tutaj w ten sposób i

1:41od razu ten przycisk zmienia swój kolor więc warto pamiętać że pod tymi strzałkami możemy

1:45zobaczyć kolory które znajdują się na naszej stronie na escape możemy

1:50wrócić do poprzedniego ekranu tutaj chciałbym ci pokazać jeszcze jedną fajną rzecz że

1:54możemy sobie zmieniać zapis tych kolorów czyli format jeżeli tutaj kliknę

1:58zauważ że zmieniamy to na RGBA albo na HSLA

2:03i tutaj z powrotem na hex więc możemy zobaczyć jak

2:07ten kolor wygląda w innych zapisach czasami korzystamy również z innych zapisów kiedy

2:11chcemy na przykład żeby kolor był półprzezroczysty wtedy na przykład rgba i

2:15teraz również możemy w inny sposób to zmieniać wyjdę z tego w miejscu gdzie masz

2:19kolor możesz z shiftem klikać na ten kwadracik i zauważ że to nam wtedy

2:24zmienia zapis na rgb potem na hsl i

2:28z powrotem na hex natomiast jeżeli wejdziemy w rgb również zawsze możemy to zmienić

2:32na rgba i tutaj dodać sobie jako ostatni parametr na przykład alfa 0.5

2:37coś takiego i to również będzie działać zauważ że ten przycisk teraz jest taki

2:41półprzezroczysty i ostatnia rzecz którą chciałbym ci pokazać a odświeżę stronę żeby

2:45te zmiany anulować kliknę sobie na ten przycisk i teraz jeżeli

2:50sobie przejdziemy do color to się nam nie pojawi przy background ale przy color kliknę

2:54na ten color picker zauważ że pojawia się tutaj coś takiego jak contrast ratio

2:58i mamy na czerwono to oznacza że według wytycznych jakie google tutaj

3:02zastosowało w przeglądarce google chrome ten przycisk nie ma dobrego

3:06kontrastu czyli wygląda na to że po prostu ten tekst jest zbyt jasny do stosunkowo

3:11jasnego tła i teraz co możemy z tym zrobić możemy tutaj kliknąć i pokazują

3:16nam się na color pickerze dwie takie linie i to oznacza że wszystkie kolory które

3:20wybiorę pomiędzy tymi dwoma liniami będą okej a więc zauważ że tutaj ciągle mamy na

3:24czerwono zjeżdżam sobie w dół i jak wjadę w te linie to

3:28pierwszy tick zrobił nam się już na zielono to oznacza że teraz kontrast jest taki że

3:32na pewno będzie to bardzo czytelny natomiast jak zjadę pod te linie to również

3:36drugi tick tutaj możemy swoją drogą kliknąć i przeczytać w dokumentacji dokładnie

3:41o co chodzi z tymi wytycznymi drugi tick również jest na zielono tak naprawdę dobrze żeby

3:45chociaż ten pierwszy był na zielono wtedy mamy pewność że będzie to

3:49wszystko bardzo czytelne na różnych ekranach tu oczywiście możemy sobie zmieniać te kolory

3:53i zauważ że te linie się dostosowują jeżeli sobie zmienię na kolor zielony to

3:58pokazuje mi że tak naprawdę czytelne to będzie przy takim dosyć ciemnym zielonym kolorze

4:02więc warto również sobie twojej zerknąć jeżeli chcemy aby nasza strona była

4:06jak najbardziej dostępna