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