Spis alfabetyczny stylów CSS.
Właściwość filter definiuje efekty wizualne (takie jak rozmycie i nasycenie) elementu (często jest to obraz ).
| Wartość | Opis |
| none | Określa brak efektów. Ustawienie domyślne. |
| blur(px) | Stosuje efekt rozmycia do obrazu. Większa wartość spowoduje większe rozmycie. Jeśli nie określono żadnej wartości, używane domyślnie jest 0. |
| brightness(%) | Regulacja jasności obrazu. 0% sprawi, że obraz będzie całkowicie czarny. 100% (1) jest wartością domyślną i reprezentuje oryginalny obraz. Wartości powyżej 100% zapewnią jaśniejsze wyniki. |
| contrast(%) | Regulacja kontrastu obrazu. 0% sprawi, że obraz będzie całkowicie czarny. 100% (1) jest wartością domyślną i reprezentuje oryginalny obraz. Wartości powyżej 100% zapewnią bardziej kontrastowe wyniki. |
| drop-shadow(h-shadow v-shadow blur spread color) | Stosuje efekt cienia do obrazu. Możliwa wartość: h-shadow - wymagane. Określa wartość piksela dla cienia poziomego. Wartości ujemne umieszczają cień po lewej stronie obrazu. v-shadow - wymagane. Określa wartość piksela dla cienia pionowego. Wartości ujemne umieszczają cień nad obrazem. blur - opcjonalne. To jest trzecia wartość i musi być podana w pikselach. Dodaje efekt rozmycia do cienia. Większa wartość spowoduje większe rozmycie (cień stanie się większy i jaśniejszy). Wartości ujemne są niedozwolone. Jeśli nie określono żadnej wartości, używane jest 0 (krawędź cienia jest ostra). spread - opcjonalnie. To jest czwarta wartość i musi być podana w pikselach. Wartości dodatnie spowodują rozszerzanie się i powiększanie cienia, a wartości ujemne spowodują kurczenie się cienia. Jeśli nie zostanie określony, będzie to 0 (cień będzie miał taki sam rozmiar jak element). Uwaga: Chrome, Safari i Opera oraz być może inne przeglądarki nie obsługują czwartej wartości; nie będzie renderowany, jeśli zostanie dodany. color - opcjonalnie. Dodaje kolor do cienia. Jeśli nie określono, kolor zależy od przeglądarki (często jest czarny). Przykład tworzenia czerwonego cienia o wielkości 8 pikseli w poziomie i w pionie, z efektem rozmycia 10 pikseli: filter: drop-shadow(8px 8px 10px red); Wskazówka: ten filtr jest podobny do właściwości box-shadow. |
| grayscale(%) | Konwertuje obraz na skalę szarości. 0% (0) jest wartością domyślną i reprezentuje oryginalny obraz. 100% sprawi, że obraz będzie całkowicie szary (używany w przypadku obrazów czarno-białych). Uwaga: wartości ujemne są niedozwolone. |
| hue-rotate(deg) | Stosuje rotację odcienia na obrazie. Wartość określa liczbę stopni wokół koła kolorów, o które próbki obrazu zostaną dopasowane. 0 stopni jest ustawieniem domyślnym i reprezentuje oryginalny obraz. Uwaga: maksymalna wartość to 360 stopni. |
| invert(%) | Odwraca próbki w obrazie. 0% (0) jest wartością domyślną i reprezentuje oryginalny obraz. 100% sprawi, że obraz będzie całkowicie odwrócony. Uwaga: wartości ujemne są niedozwolone. |
| opacity(%) | Ustawia poziom krycia obrazu. Opisuje poziom przezroczystości, gdzie: 0% jest całkowicie przezroczyste. 100% (1) jest wartością domyślną i reprezentuje oryginalny obraz (bez przezroczystości). Uwaga: wartości ujemne są niedozwolone. Wskazówka: ten filtr jest podobny do właściwości krycia. |
| saturate(%) | Nasycenie obrazu. 0% (0) spowoduje, że obraz będzie całkowicie nienasycony. 100% jest wartością domyślną i reprezentuje oryginalny obraz. Wartości powyżej 100% zapewniają bardzo nasycone wyniki. Uwaga: wartości ujemne są niedozwolone. |
| sepia(%) | Konwertuje obraz na sepię. 0% (0) jest wartością domyślną i reprezentuje oryginalny obraz. 100% sprawi, że obraz będzie całkowicie sepia. Uwaga: wartości ujemne są niedozwolone. |
| url() | Funkcja url () przyjmuje lokalizację pliku XML, który określa filtr SVG, i może zawierać kotwicę do określonego elementu filtru. Przykład: filter: url (svg-url # id-elementu) |
| inherit | Dziedziczy tę właściwość z elementu nadrzędnego. |
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Wskazówka: aby użyć wielu filtrów, oddziel każdy filtr spacją.
Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.
Liczba przed -webkit-, -moz- określa pierwszą wersję, która działała z prefiksem.
| Właściwość |  |
 |
 |
 |
 |
| filter | 53.0 18.0 -webkit- |
13.0 | 35.0 | 9.1 6.0 -webkit- |
40.0 15.0 -webkit- |
Kliknij wartości właściwości poniżej, aby zobaczyć wynik.
Playit
img#myImg {
filter: blur(5px);
}
Opinie umieszczone w Google są niezależne. Nie ma możliwości ich usunięcia, czy też zmiany treści. Można na nie jedynie odpowiedzieć. Są one wiarygodne, gdyż nie można nimi manipulować.
Opinie umieszczone w Google są niezależne. Nie ma możliwości ich usunięcia, czy też zmiany treści. Można na nie jedynie odpowiedzieć. Są one wiarygodne, gdyż nie można nimi manipulować.
Tworzenie stron Warszawa, Wrocław i Legnica | Teksty SEO pozycjonujące strony | Grafika na strony internetowe | Mapa strony | Polityka prywatności
Marynarska 54, 59-220 Legnica,, dolnośląskie, Polska,
tel.: +48 780 060 995,
pon. - czw. 8:00 - 16:00