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:
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:
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:
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:
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:
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:
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