3. CSS3 - język opisu wyglądu

3.6. Filtry

Filtry w CSS3 są narzędziem pozwalającym na stosowanie efektów graficznych do elementów HTML (np. obrazów, tekstu czy innych elementów). Filtry mogą zmieniać wygląd elementów poprzez modyfikację ich kolorów, ostrości, kontrastu, jasności i innych właściwości wizualnych.

Filtry są dostępne dzięki właściwości CSS filter i mogą być stosowane zarówno do elementów rastrowych (np. obrazów), jak i wektorowych (np. elementów SVG), a także innych elementów HTML.

Ogólna składnia wygląda następująco:

selektor {
    filter: efekt1(wartość) efekt2(wartość) ...;
}
Dostępne filtry
  • filter: blur(5px);
    Efekt rozmycia (ang. blur) powoduje, że element staje się niewyraźny. Wartość określa promień rozmycia w pikselach.
  • filter: contrast(1.5);
    Zmienia kontrast elementu. Wartość domyślna to 1. Wartości powyżej 1 zwiększają kontrast. Wartości poniżej 1 (w przedziale do zera) zmniejszają kontrast.
  • filter: brightness(0.5);
    Zmienia jasność elementu. Wartość domyślna to 1. Wartości powyżej 1 zwiększają jasność. Wartości poniżej 1 (w przedziale do zera) zmniejszają jasność.
  • filter: grayscale(1);
    Przekształca element w odcienie szarości. Wartość to liczba z zakresu od 0 (brak efektu) do 1 (pełna skala szarości), lub analogicznie od 0% do 100%.
  • filter: invert(1);
    Odwraca kolory elementu, dając efekt negatywu. Można ustawić głębokość efektu za pomocą liczby z zakresu 0 ... 1 (lub 0% ... 100%).
  • filter: opacity(0.5);
    Zmienia przezroczystość elementu. Wartość to liczba z zakresu od 0 (całkowicie przezroczysty) do 1 (brak przezroczystości).
  • filter: saturate(2);
    Zmienia nasycenie kolorów elementu. Wartości z przedziału 0 ... 1 pozwalają na zmniejszenie nasycenia, a wartości powyżej 1 zwiększają nasycenie.
  • filter: sepia(0.7);
    Nadaje elementowi efekt sepii, który przypomina starą fotografię. Wartość to liczba z zakresu od 0 (brak efektu) do 1 (pełny efekt sepii).
  • filter: hue-rotate(90deg);
    Zmienia barwy elementu poprzez obrót w kole barw o określony kąt (w stopniach). Wartość 0deg oznacza brak zmiany, a wartość maksymalna to 360deg.
  • filter: drop-shadow(offset-x offset-y blur-radius color);
    przykład: filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5));
    Dodaje cień do elementu.