Efekty filtrów

Plansza interaktywna grudzień 2015

URL:
http://www.plotkarka.eu/Pi/filter-effects/
Autor:
Radosław Kowaluk

Filtry graficzne

Własność filter
filter:
none;filter-function-list
np. blur(1px);
Lorem Lorem
filter-function-list = [ filter-function | url ]+
filter-function = blur() | brightness() | contrast()
 | drop-shadow() | grayscale() | hue-rotate() | invert()
 | opacity() | sepia() | saturate()

Funkcje

Funkcja blur() (rozmycie)
filter: blur(length)
np. blur(1px);
Lorem
Funkcja brightness() (jasność)
filter: blur(number | percentage)
np. brightness(0.4);np. brightness(60%);
Lorem Lorem

Filtry

Kontrast
filter: blur(number | percentage)
np. contrast(1.1);np. contrast(120%);
Cień
filter: drop-shadow(length{2,3} color?)
np. drop-shadow(2px 2px red);np. drop-shadow(2px 2px 1px silver);
Lorem Lorem
Skala szarości
filter: grayscale(number | percentage)
np. grayscale(0.5);np. grayscale(90%);
Odwrócenie barw
filter: hue-rotate(angle)
np. hue-rotate(180deg);
Lorem

Wypełnienie tonalne - radialne

Inwersja (negatyw)
filter: invert(number | percentage)
np. invert(0.1);np. invert(90%);
Przezroczystość
filter: opacity(number | percentage)
np. opacity(0.1);np. opacity(90%);
Nasycenie (saturacja)
filter: saturate(number | percentage)
np. saturate(0.1);np. saturate(90%);
Sepia
filter: sepia(number | percentage)
np. sepia(0.1);np. sepia(90%);

Efekty

URL (filtry SVG)

Filtry SVG
filter: url(nazwa_pliku.svg#id_filtra)
GaussianBlurTurbulence
Lorem Lorem

Uwagi:

Fitry SVG

Linki: Morphology.svg GaussianBlur.svg