#73. CSS – filtry

Metoda blur()

Metoda blur() (gdzie x to liczba) ustawia elementowi rozmycie zgodnie z liczbą pixeli podanych w deklaracji.

Obsługiwaną jednostką są piksele, a im większa wartość, tym większe rozmycie nadamy elementowi.

Aby nadać duże rozmycie właściwość skonstruujemy następująco: filter: blur(15px).

Spójrz na poniższy przykład z zasady działania powyższej metody:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

gallant-maxwell-u7626

gallant-maxwell-u7626 danielminschinski

Metoda brightness()

Metoda brightness() ma zadanie rozjaśniać oraz przyciemniać element. Właściwość przyjmuje wartości procentowe(%) w przedziale od 0 do nieskończoności, ponieważ przy większej wartości element stanie się całkowicie biały i nie zajdzie więcej zmian. Dla wartości 0 element będzie czarny.

Przykładowo, chcemy aby element był lekko przyciemniony. Należy użyć następującej właściwości:
filter: brightness(65%)

Spójrz na poniższy przykład z zastosowania powyższej metody:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

priceless-kare-yqmbo

priceless-kare-yqmbo danielminschinski

Metoda contrast()

Metoda contrast() ma zadanie ustawiać kontrast elementu.

Jednostką współpracującą jest procent(%) w zakresie od 0 (całkowicie czarny element) do nieskończoności (znów teoretycznej nieskończoności, ponieważ przy pewnej wartości zmiany przestaną zachodzić).

Gdy chcemy zmienić kontrast w naszym elemencie użyjemy następującej właściwości: filter: contrast(240%).

Sprawdź w praktyce jak kontrast sobie poradzi:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

bold-frost-24pqd

bold-frost-24pqd danielminschinski

Metoda grayscale()

Metoda grayscale() odpowiada za ustawienie elementowi odcień szarości. Jednostką której używamy do określenia tej właściwości to procenty(%) w zakresie od 0 do 100%.

Dla wartości 0 element nie zmienai się. Gdy wartość się powiększa tym bardziej desaturujemy obrazek, tzn. pozbawiamy kolorów.

Jeśli chcemy, aby nasz obrazek był czarno-biały użyjemy następującej właściwości: filter: grayscale(100%).

Spójrz w praktyce jak to wygląda:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

dank-platform-bb2fp

dank-platform-bb2fp danielminschinski

Metoda invert()

Metoda invert() służy do odwracania kolorów. Właściwość przyjmuje jednostki procentowe(%) w zakresie od 0 do 100%. Wartość 0 oznacza brak zmian a 100% to całkowite odwrócone kolory.

Reguła częściowo odwracająca kolory może wyglądać następująco:
filter: invert(50%).

Spójrz jak to w praktyce wygląda:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

busy-pare-9383j

busy-pare-9383j danielminschinski

Metoda saturate()

Metoda saturate() odpowiada za saturacje elementu, tzn. nasycenie kolorem.

To kolejna właściwość przyjmująca wartości procentowe(%) w przedziale od 0 do nieskończoności. Przy wartości 0 otrzymamy element pozbawiony kolorów. Wartość 100% jest domyślną. Powyżej nasycamy element kolorami. Najlepsze efekty widać między wartościami od 0 – 200%.

Przykładowo, jeżeli chcemy nasycić element kolorami możemy użyć następującej właściwości: filter: saturate(150%).

Spójrz jak to wygląda w praktyce:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

practical-ritchie-epqyc

practical-ritchie-epqyc danielminschinski

To by było na tyle. Najważniejsze filtry przedstawiłem powyżej. Nie zawsze trzeba wrzucać na stronę przygotowany obrazek w 100%. Wystarczy użyć styli i uzyskamy podobne efekty.

Za tydzień dodam materiał o gradientach CSS! Z góry zapraszam!

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!