Podcast CSS – 023: filtry
.
Powiedzmy, że chcesz zbudować element, który jest trochę nieprzezroczysty, efekt oszronionego szkła znajdujący się nad obrazem. Musi to być zwykły tekst, a nie obraz. Jak to zrobić?
Kombinacja filtrów CSS i backdrop-filter
pozwalają nam stosować efekty i rozmyć potrzebne elementy w czasie rzeczywistym.
Rozmycie i przezroczystość to 2 z wielu dostępnych filtrów:
więc pokrótce omówię pokrótce, do czego służą i jak ich używać.
Właściwość filter
Możesz zastosować jeden lub kilka z następujących filtrów jako wartości dla
filter
Jeśli niewłaściwie zastosujesz filtr,
pozostałe filtry zdefiniowane dla elementu filter
nie będą działać.
blur
Stosuje ono rozmycie Gaussa. Jedynym argumentem, który możesz przekazać, jest radius
,
czyli
stopień rozmycia.
Musi to być jednostka długości, np. 10px
. Wartości procentowe nie są akceptowane.
.my-element {
filter: blur(0.2em);
}
brightness
Aby zwiększyć lub zmniejszyć jasność elementu: korzystać z funkcji jasności. Wartość jasności jest wyrażana jako wartość procentowa, przy czym niezmieniony obraz ma wartość 100%. Wartość 0% powoduje, że obraz jest całkowicie czarny, dlatego wartości od 0% do 100% powodują, że obraz jest mniej jasny. Aby zwiększyć jasność, użyj wartości powyżej 100%.
.my-element {
filter: brightness(80%);
}
contrast
Aby odpowiednio zmniejszyć lub zwiększyć kontrast, ustaw wartość między 0% a 100%.
.my-element {
filter: contrast(160%);
}
grayscale
Można zastosować efekt w skali szarości, używając parametru 1
jako wartości argumentu grayscale()
,
lub 0
, aby element był całkowicie nasycony.
Możesz też użyć wartości procentowych lub dziesiętnych, aby zastosować tylko częściowy efekt skali szarości.
Jeśli nie przekażesz żadnych argumentów, element przejdzie w skali szarości.
Jeśli przekażesz wartość większą niż 100%, będzie ona ograniczona do 100%.
.my-element {
filter: grayscale(80%);
}
invert
Tak jak grayscale
,
możesz przekazać 1
lub 0
do funkcji invert()
, aby ją włączyć lub wyłączyć.
Po włączeniu tej opcji kolory elementu są całkowicie odwrócone.
Możesz też użyć wartości procentowych lub dziesiętnych, by zastosować tylko częściową odwrócenie kolorów.
Jeśli nie przekażesz żadnych argumentów do funkcji invert()
,
element zostanie całkowicie odwrócony.
.my-element {
filter: invert(1);
}
opacity
Filtr opacity()
działa tak samo jak właściwość opacity
,
gdzie możesz przekazać liczbę lub wartość procentową, aby zwiększyć lub zmniejszyć przezroczystość.
Jeśli nie przekażesz żadnych argumentów, element będzie w pełni widoczny.
.my-element {
filter: opacity(0.3);
}
saturate
Filtr nasycony jest bardzo podobny do filtra brightness
i akceptuje ten sam argument:
liczby czy procenty.
Zamiast zwiększać lub zmniejszać efekt jasności,
saturate
zwiększa lub zmniejsza nasycenie kolorów.
.my-element {
filter: saturate(155%);
}
sepia
Za pomocą tego filtra, który działa jak grayscale()
, można dodać efekt sepii.
Sepia to technika druku fotograficznego polegająca na konwertowaniu odcieni czarnych na brązowe w celu rozgrzewki.
Jako argumentu funkcji sepia()
możesz przekazać wartość liczbową lub procentową.
co zwiększa lub zmniejsza efekt.
Brak argumentów powoduje dodanie pełnego efektu sepii (odpowiednik sepia(100%)
).
.my-element {
filter: sepia(70%);
}
hue-rotate
Wiesz już, że kolor w polu hsl
odnosi się do obrotu koła kolorów
lekcja kolorów i ten filtr działa w podobny sposób.
Jeśli mijasz kąt, np. w stopniach lub skrętach,
zmienia barwę wszystkich kolorów elementu,
przez zmianę części koła kolorów, do którego się odwołuje. Jeśli przekażesz żaden argument, nie przyniesie to żadnego efektu.
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
Możesz zastosować przylegający do krzywej cień jak w narzędziu do projektowania,
takich jak Photoshop z
drop-shadow
Ten cień jest stosowany na maskę alfa, co bardzo ułatwia dodawanie cienia do wyciętego zdjęcia.
Filtr drop-shadow
wykorzystuje parametr cienia, który zawiera rozdzielone spacjami wartości przesunięcia-x, przesunięcia-y, rozmycia i koloru.
Jest prawie taki sam jak box-shadow
,
ale słowo kluczowe inset
i wartość rozkładu nie są obsługiwane.
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
Więcej informacji o różnych rodzajach cieni zawiera moduł cienie.
url
Filtr url
umożliwia zastosowanie filtra SVG z połączonego elementu lub pliku SVG.
Dostępne opcje
więcej informacji o filtrach SVG
Filtr tła
Filtr tła,
właściwość akceptuje wszystkie wartości funkcji filtra co filter
.
Różnica między backdrop-filter
a filter
jest to, że właściwość backdrop-filter
stosuje filtry tylko do tła,
gdzie właściwość filter
stosuje ją do całego elementu.
Świetny przykład widać na początku tej lekcji: ponieważ tekst nie jest rozmyty, a najlepiej nie trzeba dodawać dodatkowych elementów HTML. Stosowanie filtrów tylko do tła jest możliwe.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o filtrach
Które z tych funkcji są funkcjami filtra CSS?
multiply()
blur()
invert()
brightness()
flip()
grayscale()
Czy CSS może używać filtrów SVG?