logo-tworzenie-stron-legnica

config

Style CSS

Spis alfabetyczny stylów CSS.

Ściąga CSS - przykłady, style CSS alfabetycznie, spis stylów CSS, właściwości CSS, skorowidz stylów CSS.


 

Strona w trakcie modernizacji

Zapraszamy wkrótce

Właściwość CSS filter

Definicja stylu, przeznaczenie i użycie filter

Właściwość filter definiuje efekty wizualne (takie jak rozmycie i nasycenie) elementu (często jest to obraz ).

Wartości właściwości filter

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

Składnia CSS filter

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ą.

Wsparcie przeglądarek dla właściwości filter

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ść chrome edge firefox safari opera
filter 53.0
18.0 -webkit-
13.0 35.0 9.1
6.0 -webkit-
40.0
15.0 -webkit-

 

Przykładowe zastosowania z właściwością filter

Kliknij wartości właściwości poniżej, aby zobaczyć wynik.

Playit
Właściwość CSS:
filter:

Uwaga: Właściwość filter nie jest obsługiwana w Edge 12 ani Internet Explorer.

Result:
CSS Code:
img#myImg {
filter: blur(5px);
}
 

 

Przykłady właściwości filter

 

Witold Czuba Tworzenie stron Warszawa, Wrocław i Legnica | Grafik | Strony , , Marynarska 54, 59-220, Legnica, dolnośląskie, Polska, tel. +48 780 060 995, Pon. - pt. 8:00 - 17:00

 

 

Witold Czuba

Tworzenie stron Warszawa, Wrocław i Legnica | Grafik | Strony

Marynarska 54
59-220, Legnica,
dolnośląskie, Polska,
tel. +48 780 060 995,
Pon. - pt. 8:00 - 17:00