Filtry CSS to potężne narzędzie, którego autorzy mogą używać do uzyskiwania różnych efektów wizualnych (coś w rodzaju filtrów Photoshopa w przeglądarce). Właściwość CSS filterzapewnia dostęp do efektów, takich jak rozmycie lub przesunięcie kolorów w renderowaniu elementu przed wyświetleniem elementu. Filtry są powszechnie używane do dostosowywania renderowania obrazu, tła lub obramowania.
Składnia jest następująca:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Istnieje kilka funkcji, których można użyć dla wartości:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- do stosowania filtrów SVGcustom()- "wkrótce"
Można używać wielu funkcji oddzielonych spacjami.
.do-more-things ( filter: blur(20px) grayscale(20%); )Funkcje filtra
Aby użyć właściwości filtra CSS, określ wartość jednej z poniższych funkcji wymienionych powyżej. Jeśli wartość jest nieprawidłowa, funkcja zwraca „none”. O ile nie zaznaczono inaczej, funkcje, które przyjmują wartość wyrażoną za pomocą znaku procentu (jak w 34%), akceptują również wartość wyrażoną jako ułamek dziesiętny (jak w 0,34).
Oto demo, które pozwala trochę pobawić się indywidualnymi filtrami:
skala szarości ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Konwertuje obraz wejściowy na skalę szarości. Wartość „kwota” określa udział konwersji. Wartość 100% to całkowicie skala szarości. Wartość 0% pozostawia wejście niezmienione. Wartości od 0% do 100% są liniowymi mnożnikami efektu. W przypadku braku parametru „kwota” używana jest wartość 100%. Wartości ujemne są niedozwolone.
sepia()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Konwertuje obraz wejściowy na sepię. Wartość „kwota” określa udział konwersji. Wartość 100% to całkowicie sepia. Wartość 0 pozostawia wejście niezmienione. Wartości od 0% do 100% są liniowymi mnożnikami efektu. W przypadku braku parametru „kwota” używana jest wartość 100%. Wartości ujemne są niedozwolone.
nasycić()
filter: saturate(2); /* same as… */ filter: sature(200%);Nasycenie obrazu wejściowego. Wartość „kwota” określa udział konwersji. Wartość 0% jest całkowicie nienasycona. Wartość 100% pozostawia wejście niezmienione. Inne wartości są liniowymi mnożnikami efektu. Dozwolone są wartości powyżej 100%, co zapewnia wyniki przesycone. W przypadku braku parametru „kwota” używana jest wartość 100%. Wartości ujemne są niedozwolone.
hue-rotate ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Stosuje rotację odcienia w obrazie wejściowym. Wartość „kąta” określa liczbę stopni wokół koła kolorów, o które zostaną dopasowane próbki wejściowe. Wartość 0 stopni pozostawia wejście niezmienione. Jeśli brakuje parametru „kąt”, 0degużywana jest wartość . Maksymalna wartość to 360deg.
odwracać()
filter: invert(100%);Odwraca próbki w obrazie wejściowym. Wartość „kwota” określa udział konwersji. Wartość 100% jest całkowicie odwrócona. Wartość 0% pozostawia wejście niezmienione. Wartości od 0% do 100% są liniowymi mnożnikami efektu. W przypadku braku parametru „kwota” używana jest wartość 100%. Wartości ujemne są niedozwolone.
nieprzezroczystość()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Stosuje przezroczystość do próbek w obrazie wejściowym. Wartość „kwota” określa udział konwersji. Wartość 0% jest całkowicie przezroczysta. Wartość 100% pozostawia wejście niezmienione. Wartości od 0% do 100% są liniowymi mnożnikami efektu. Jest to równoważne pomnożeniu próbek obrazu wejściowego przez ilość. W przypadku braku parametru „kwota” używana jest wartość 100%. Ta funkcja jest podobna do bardziej ustalonej właściwości krycia; różnica polega na tym, że w przypadku filtrów niektóre przeglądarki zapewniają przyspieszenie sprzętowe dla lepszej wydajności. Wartości ujemne są niedozwolone.
jasność()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Stosuje mnożnik liniowy do obrazu wejściowego, dzięki czemu wydaje się być mniej lub bardziej jasny. Wartość 0% utworzy obraz, który jest całkowicie czarny. Wartość 100% pozostawia wejście niezmienione. Inne wartości są liniowymi mnożnikami efektu. Dozwolone są wartości powyżej 100%, co zapewnia jaśniejsze wyniki. W przypadku braku parametru „kwota” używana jest wartość 100%.
kontrast()
filter: contrast(4); /* same as… */ filter: contrast(400%);Reguluje kontrast wejścia. Wartość 0% utworzy obraz, który jest całkowicie czarny. Wartość 100% pozostawia wejście niezmienione. Dozwolone są wartości powyżej 100%, co daje wyniki o mniejszym kontraście. W przypadku braku parametru „kwota” używana jest wartość 100%.
plama()
filter: blur(5px); filter: blur(1rem);Stosuje rozmycie gaussowskie do obrazu wejściowego. Wartość „promień” określa wartość odchylenia standardowego funkcji Gaussa lub liczbę pikseli na ekranie zlewa się ze sobą, więc większa wartość spowoduje większe rozmycie. Jeśli nie podano żadnego parametru, używana jest wartość 0. Parametr jest określony jako długość CSS, ale nie akceptuje wartości procentowych.
cień ()
filter: drop-shadow((2,3) ?)Stosuje efekt cienia do obrazu wejściowego. Cień jest w rzeczywistości rozmytą, przesuniętą wersją maski alfa obrazu wejściowego narysowaną w określonym kolorze, złożoną pod obrazem. Funkcja przyjmuje parametr typu (zdefiniowany w CSS3 Backgrounds), z wyjątkiem tego, że słowo kluczowe „inset” jest niedozwolone.
Ta funkcja jest podobna do bardziej znanej właściwości box-shadow; różnica polega na tym, że w przypadku filtrów niektóre przeglądarki zapewniają przyspieszenie sprzętowe dla lepszej wydajności.
Cień również w naturalny sposób naśladuje kontur zamierzonych obiektów, w przeciwieństwie do box-shadowtego, że jako ścieżka traktuje tylko prostokąt.
Podobnie jak w przypadku text-shadow, nie ma parametru „spread”, który pozwoliłby stworzyć jednolity cień większy niż obiekt.
url ()
filter: url()url()Funkcja przyjmuje położenie pliku XML, który określa filtr SVG, i może zawierać kotwicę do specyficznego elementu filtrującego. Oto samouczek, który działa jako ładne wprowadzenie do filtrów SVG z zabawnym pokazem.
Animowanie filtrów
Ponieważ Filtry są animowane, może otworzyć drzwi do całej masy zabawy.
Uwagi
Możesz łączyć dowolną liczbę funkcji, aby manipulować renderowaniem, ale kolejność nadal ma znaczenie (np. Użycie grayscale()after sepia()da całkowicie szare wyjście).
Obliczona wartość inna niż „none” powoduje utworzenie kontekstu stosowego w taki sam sposób, jak robi to krycie CSS. Właściwość filtra nie ma wpływu na geometrię modelu prostokąta elementu docelowego, mimo że filtry mogą powodować malowanie poza ramką elementu. Na wszystkie części elementu docelowego wpływają funkcje filtrujące. Obejmuje to dowolną treść, tło, obramowanie, dekorację tekstu, kontur i widoczny mechanizm przewijania elementu, do którego zastosowano filtr, oraz elementów podrzędnych. Filtry można również stosować do zawartości wbudowanej, takiej jak pojedyncze rozpiętości tekstu.
Specyfikacja wprowadza również funkcję filter(image-URL, filter-functions)opakowującą dla obrazu. Umożliwiłoby to filtrowanie dowolnego obrazu w czasie, gdy używasz go w CSS. Na przykład możesz rozmyć obraz tła bez rozmycia tekstu. Ta funkcja filtrowania nie jest jeszcze obsługiwana w przeglądarkach. W międzyczasie możesz zastosować zarówno tło, jak i filtr do pseudoelementu, aby uzyskać podobny efekt.
Własny filtr IE
Korzystano również z filternieruchomości, takich jak:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Używane głównie do krycia, gdy trzeba obsługiwać przeglądarkę IE 8 i starszą.
Więcej informacji
- Specyfikacja efektów filtrów W3C
- http://html5-demos.appspot.com/static/css/filters/index.html
- Galeria filtrów Bennetta Feely'ego
- MDN Docs
- Mogę uzyć
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Zrozumienie efektów filtrów CSS
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 18 * | 35 | Nie | 79 | 6 * |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0-6,1 * |