Jak sprawdzić jakiego koloru jest tekst i tło na stronie?

Dzisiaj pokaże wam jak w dość prosty sposób samodzielnie możecie ustalić jakiego koloru jest tekst i tło na stronie internetowej.

W tym celu po raz kolejny korzystamy z narzędzia do badania strony. Jeżeli korzystacie z Chrome lub Firefox narzędzie to jest wbudowane w waszą przeglądarkę i wystarczy jedynie wcisnąć F12 (lub najechać kursorem myszy na obiekt i kliknąć prawym przyciskiem -> wybieramy opcję zbadaj).

Większość, rzeczy które będę robić postaram się, wam pokazać poniżej na obrazkach i dodam odpowiednie komentarze. Jednak dobrze by było gdybyście równolegle spróbowali ich użyć sami.

Od czego zacząć sprawdzanie koloru?

Na początek wchodzimy na stronę, z której chcemy pobrać kolor. Ja wybrałam podstronę jednego z moich blogów – konkretnie stronę główną/ blogową. Jak widać na załączonym poniżej obrazku.

W tym konkretnym przypadku tytuł wpisu jest także linkiem prowadzącym do treści całego wpisu. I jak widać jest w kolorze złamanej wiśni / czerwieni.

Jak zbadać kolor fontu/czcionki oraz sprawdzić jaki jest kolor tła witryny?

Na początek muszę umieścić kursor myszy nad elementem, który chce sprawdzić. Następnie klikam w niego lewym klawiszem. Z menu kontekstowego wybieram opcję Zbadaj lub Zbadaj element. Nazwa opcji zależy od przeglądarki, z której się korzysta.

Po wybraniu tej opcji otworzy się dodatkowe okno w, którym będziemy mogli podejrzeć kod strony. Nowe okno domyślnie otworzy się na zakładce Styles. Dlatego trzeba będzie ją zmienić poprzez kliknięcie w nazwę kolejnej.

Będzie to Computed – zawiera ona „skondensowane” informacje o naszym fragmencie kodu. W tym momencie do odczytania przydatna jest znajomość chociaż by podstaw CSS.

I tak z kodu mogę odczytać:

• background-color: rgba (0, 0, 0, 0);
• color: rgb(214, 80, 80);

Kolor tła to – background-color jego wartość to rgba (0, 0, 0, 0) – czyli w praktyce element nie posiada tła bo jest ono przezroczyste.

Kolor fontu – color to rgb(214, 80, 80);

Nieco więcej szczegółów poznać można klikając w słowo color i rozwijając pole. Jak widać na poniższym obrazku pokaże się wtedy lista z kolorami – jakie przyjmuje mój tekst w różnych sytuacjach.

Mój tekst jest odnośnikiem w efekcie czego można zobaczyć, że jego kolor ulega nawet istotnym zmianą.

Jak widzicie sprawdzenie koloru nie było w cale takie trudne.

Jeżeli chcecie więcej tego typu, podobnych tutoriali możecie o tym napisać w komentarzu pod wpisem lub na facebooku.