Efekty filtrów

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

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

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%);

URL (filtry SVG)

Filtry SVG

filter: url(nazwa_pliku.svg#id_filtra)
GaussianBlur	Turbulence
Lorem	Lorem

Uwagi:

• W jednym pliku SVG może być kilka zdefiniowanych filtrów.
• Kod SVG może być umieszczony w pliku styli CSS lub w pliku HTML w elemencie style np.:
  selektor {
  filter: url("data:image/svg+xml;utf8,
  <svg xmlns='http://www.w3.org/2000/svg'>
  <filter id='id_filtra'><nazwa_fitra atrybuty/></filter>
  </svg>#id_filtra");
  }

Linki: Morphology.svg GaussianBlur.svg