Filtry

The CSS Podcast - 023: Filters

Załóżmy, że chcesz utworzyć element z efektem lekko nieprzezroczystego, matowego szkła, który będzie nakładał się na obraz. Tekst musi być tekstem na żywo, a nie obrazem. Jak to zrobić?

Połączenie filtrów CSS i funkcji backdrop-filter pozwala nam stosować efekty i rozmazywać wybrane obszary w czasie rzeczywistym. Rozmycie i przezroczystość to tylko 2 z wielu dostępnych filtrów. Zobaczmy więc, do czego służą i jak z nich korzystać.

Uwaga: umieszczając tekst na obrazach, pamiętaj, aby był on czytelny, jeśli filtr nie będzie obsługiwany w przeglądarce użytkownika.

Właściwość filter

Browser Support

• 53
• 12
• 35
• 9.1

Source

Jako wartość parametru filter możesz zastosować jeden lub wiele z tych filtrów. Jeśli zastosujesz filtr nieprawidłowo, pozostałe filtry zdefiniowane dla elementu filter nie będą działać.

blur

Stosuje ona rozmycie gausowskie, a jedynym argumentem, który możesz jej podać, jest radius, czyli stopień rozmycienia. Musi to być jednostka długości, np. 10px. Procenty nie są akceptowane.

.my-element {
    filter: blur(0.2em);
}

brightness

Browser Support

• 18
• 12
• 35
• 6

Source

Aby zwiększyć lub zmniejszyć jasność elementu, użyj funkcji jasności. Wartość jasności jest wyrażana w procentach, przy czym niezmieniony obraz ma wartość 100%. Wartość 0% powoduje, że obraz staje się całkowicie czarny, więc wartości od 0% do 100% powodują, że obraz staje się ciemniejszy. Aby zwiększyć jasność, użyj wartości powyżej 100%.

.my-element {
    filter: brightness(80%);
}

Uwaga: zamiast wartości procentowych w filtrach takich jak brightness możesz też używać wartości dziesiętnych. Aby ustawić jasność na 80% z wartością dziesiętną, wpisz 0.8.

contrast

Browser Support

• 18
• 12
• 35
• 6

Source

Aby odpowiednio zmniejszyć lub zwiększyć kontrast, ustaw wartość od 0% do 100%.

.my-element {
    filter: contrast(160%);
}

grayscale

Browser Support

• 18
• 12
• 35
• 6

Source

Aby zastosować efekt całkowicie monochromatyczny, jako wartość parametru grayscale() użyj wartości 1, a aby uzyskać całkowicie nasycone kolory, użyj wartości 0. Możesz też użyć wartości procentowych lub ułamków dziesiętnych, aby zastosować tylko częściowy efekt szarości. Jeśli nie podasz żadnych argumentów, element będzie w pełni w skali szarości. Jeśli podasz wartość większą niż 100%, zostanie ona ograniczona do 100%.

.my-element {
    filter: grayscale(80%);
}

invert

Browser Support

• 18
• 12
• 35
• 6

Source

Podobnie jak w przypadku funkcji grayscale, możesz przekazać do funkcji invert() wartość 1 lub 0, aby ją włączyć lub wyłączyć. Gdy jest włączona, kolory elementu są całkowicie odwrócone. Możesz też użyć wartości procentowych lub dziesiętnych, aby zastosować tylko częściowe odwrócenie kolorów. Jeśli nie przekażesz żadnych argumentów funkcji invert(), element zostanie całkowicie odwrócony.

.my-element {
    filter: invert(1);
}

opacity

Browser Support

• 18
• 12
• 35
• 6

Source

Filtr opacity() działa tak samo jak właściwość opacity, w której możesz podać liczbę lub procent, aby zwiększyć lub zmniejszyć przezroczystość. Jeśli nie podasz żadnych argumentów, element będzie w pełni widoczny.

.my-element {
    filter: opacity(0.3);
}

saturate

Browser Support

• 18
• 12
• 35
• 6

Source

Filtr nasycenia jest bardzo podobny do filtra brightness i akceptuje ten sam argument: liczbę lub procent. Zamiast zwiększać lub zmniejszać efekt jasności, saturate zwiększa lub zmniejsza nasycenie kolorów.

.my-element {
    filter: saturate(155%);
}

sepia

Browser Support

• 18
• 12
• 35
• 6

Source

Za pomocą tego filtra możesz dodać efekt sepii, który działa jak grayscale(). Odcień sepii to technika drukowania zdjęć, która polega na zastąpieniu czarnych tonów brązowymi, aby ocieplić obraz. Jako argument funkcji sepia() możesz podać liczbę lub wartość procentową, która zwiększy lub zmniejszy efekt. Podanie 0 argumentów powoduje zastosowanie pełnego efektu sepii (równoważne sepia(100%)).

.my-element {
    filter: sepia(70%);
}

hue-rotate

Browser Support

• 18
• 12
• 35
• 6

Source

W lekcji o kolorach dowiesz się, że odcień w hsl odnosi się do obrotu koła kolorów, a ten filtr działa w podobny sposób. Jeśli podasz kąt, np. stopnie lub obroty, zmieni się odcień wszystkich kolorów elementu, ponieważ zmieni się część koła kolorów, do której się odwołuje. Jeśli nie podasz żadnego argumentu, funkcja nie zrobi nic.

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

Browser Support

• 18
• 12
• 35
• 6

Source

Możesz zastosować cień ściśle dopasowany do krzywej, tak jak w narzędzie do projektowania, takim jak Photoshop z drop-shadow. Ten cień jest stosowany do maski alfa, co czyni go bardzo przydatnym do dodawania cienia do wyciętego obrazu. Filtr drop-shadow przyjmuje parametr cienia, który zawiera wartości offsetu w osi X, offsetu w osi Y, rozmycia i kolorów rozdzielone spacjami. Jest ona prawie identyczna z funkcją box-shadow, ale nie obsługuje słowa kluczowego inset ani wartości spreadu.

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

Więcej informacji o różnych typach cieni znajdziesz w module Cienie.

url

Browser Support

• 5
• 12
• 3
• 6

Source

Filtr url umożliwia zastosowanie filtra SVG z połączonego elementu lub pliku SVG. Więcej informacji o filtrach SVG

Filtr tła

Browser Support

• 76
• 79
• 103
• 18

Source

Właściwość backdrop-filter akceptuje te same wartości funkcji filtra co filter. Różnica między właściwościami backdrop-filter i filter polega na tym, że pierwsza z nich stosuje filtry tylko do tła, a druga – do całego elementu.backdrop-filterfilter

Przykład na początku tego samouczka jest idealny, ponieważ nie chcesz, aby tekst był rozmyty, a najlepiej nie chcesz dodawać dodatkowych elementów HTML. Możliwość zastosowania filtrów tylko do tła umożliwia to.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o filtrach

Które z tych funkcji filtra CSS?

grayscale()

🎉

invert()

🎉

flip()

Spróbuj jeszcze raz.

multiply()

Spróbuj jeszcze raz.

blur()

🎉

brightness()

🎉

Czy CSS może używać filtrów SVG?

Tak

Funkcja filtra url() umożliwia to

Nie

Spróbuj jeszcze raz.