Filtry CSS

1. Jak używać filtrów w CSS?

Filtry stosuje się do elementów HTML za pomocą właściwości CSS filter. Możesz zastosować jeden lub więcej efektów filtrów, łącząc je w jednym wyrażeniu. Na przykład:

img {
  filter: blur(5px) brightness(0.8);
}

W tym przypadku obraz zostanie rozmyty o 5 pikseli, a jasność zostanie zredukowana do 80% pierwotnej wartości.

2. Rodzaje filtrów

Istnieje wiele dostępnych filtrów, z których każdy oferuje unikalny efekt. Oto kilka popularnych:

• blur(): rozmywa element, np. filter: blur(4px);.
• brightness(): zmienia jasność: brightness(0.5) przyciemnia o połowę, brightness(1.5) rozjaśnia.
• contrast(): zmienia kontrast, np. contrast(1.5).
• grayscale(): zamienia kolory na odcienie szarości, np. grayscale(100%).
• hue-rotate(): obraca barwy po kole barw, np. hue-rotate(90deg).
• invert(): odwraca kolory, np. invert(100%).
• opacity(): ustawia przezroczystość, np. opacity(50%).
• saturate(): zmienia nasycenie, np. saturate(2).
• sepia(): nadaje efekt starej fotografii, np. sepia(100%).

3. Łączenie filtrów

Możesz łączyć różne filtry, aby osiągnąć złożone efekty. Filtry są stosowane w kolejności, w jakiej są zapisane. Na przykład:

img {
  filter: grayscale(100%) contrast(1.5) brightness(0.7);
}

W powyższym przykładzie obraz zostanie najpierw przekształcony na skalę szarości, następnie zostanie zastosowany wyższy kontrast, a na koniec zostanie zredukowana jasność.

4. Obsługa przeglądarek

Filtry działają we wszystkich aktualnych przeglądarkach; zgodność sprawdzaj tylko wtedy, gdy musisz wspierać bardzo stare wersje.

Ćwiczenie: Filtry CSS

W tym ćwiczeniu nauczysz się, jak używać filtrów CSS, aby stosować różne efekty wizualne do elementów HTML. Twoim zadaniem będzie utworzenie strony internetowej z obrazem, który będzie stylizowany za pomocą różnych filtrów CSS.

Krok 1: Stwórz podstawową strukturę dokumentu HTML

Najpierw stwórz nowy plik HTML i dodaj podstawową strukturę dokumentu HTML. Dodaj element <img> z przykładowym obrazem w ciele dokumentu (<body>).

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
  <title>Filtry CSS</title>
</head>
<body>
  <h1>Filtry CSS</h1>
  <img src="https://placehold.co/150" class="example-image blur" alt="Przykładowy obraz">
</body>
</html>

Krok 2: Stwórz plik CSS

Otwórz lub utwórz nowy plik CSS i zapisz go jako styles.css.

Krok 3: Dodaj filtr rozmycia (blur)

Dodaj styl dla klasy .example-image, aby zastosować efekt rozmycia do obrazu.

/* Filtr rozmycia (blur) */
.example-image.blur {
  filter: blur(5px);
}

Selektor .example-image.blur (dwie klasy bez spacji) trafi tylko do obrazka, który ma obie klasy naraz.

Krok 4: Dodaj filtr jasności (brightness)

Dodaj styl dla klasy .example-image, aby zmienić jasność obrazu.

/* Filtr jasności (brightness) */
.example-image.brightness {
  filter: brightness(0.8);
}

Krok 5: Dodaj filtr kontrastu (contrast)

Dodaj styl dla klasy .example-image, aby zmienić kontrast obrazu.

/* Filtr kontrastu (contrast) */
.example-image.contrast {
  filter: contrast(1.5);
}

Krok 6: Dodaj filtr skali szarości (grayscale)

Dodaj styl dla klasy .example-image, aby przekształcić obraz na skalę szarości.

/* Filtr skali szarości (grayscale) */
.example-image.grayscale {
  filter: grayscale(100%);
}

Krok 7: Dodaj filtr obrotu barw (hue-rotate)

Dodaj styl dla klasy .example-image, aby obrócić barwy obrazu.

/* Filtr obrotu barw (hue-rotate) */
.example-image.hue-rotate {
  filter: hue-rotate(90deg);
}

Krok 8: Dodaj filtr odwrócenia kolorów (invert)

Dodaj styl dla klasy .example-image, aby odwrócić kolory obrazu.

/* Filtr odwrócenia kolorów (invert) */
.example-image.invert {
  filter: invert(100%);
}

Krok 9: Dodaj filtr przezroczystości (opacity)

Dodaj styl dla klasy .example-image, aby zmienić przezroczystość obrazu.

/* Filtr przezroczystości (opacity) */
.example-image.opacity {
  filter: opacity(50%);
}

Krok 10: Dodaj filtr nasycenia (saturate)

Dodaj styl dla klasy .example-image, aby zwiększyć nasycenie kolorów obrazu.

/* Filtr nasycenia (saturate) */
.example-image.saturate {
  filter: saturate(2);
}

Krok 11: Dodaj filtr sepii (sepia)

Dodaj styl dla klasy .example-image, aby dodać efekt sepii do obrazu.

/* Filtr sepii (sepia) */
.example-image.sepia {
  filter: sepia(100%);
}

Krok 12: Łączenie filtrów

Dodaj styl dla klasy .example-image, aby zastosować wiele filtrów jednocześnie.

/* Łączenie filtrów */
.example-image.combined {
  filter: grayscale(100%) contrast(1.5) brightness(0.7);
}

Wynik

Po wykonaniu wszystkich kroków twój plik HTML i CSS powinny wyglądać następująco:

Plik HTML (index.html)

Strona z osobnym obrazkiem dla każdego filtra:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
  <title>Filtry CSS</title>
</head>
<body>
  <h1>Filtry CSS</h1>
  <img src="https://placehold.co/150" class="example-image blur" alt="Filtr blur">
  <img src="https://placehold.co/150" class="example-image brightness" alt="Filtr brightness">
  <img src="https://placehold.co/150" class="example-image contrast" alt="Filtr contrast">
  <img src="https://placehold.co/150" class="example-image grayscale" alt="Filtr grayscale">
  <img src="https://placehold.co/150" class="example-image hue-rotate" alt="Filtr hue-rotate">
  <img src="https://placehold.co/150" class="example-image invert" alt="Filtr invert">
  <img src="https://placehold.co/150" class="example-image opacity" alt="Filtr opacity">
  <img src="https://placehold.co/150" class="example-image saturate" alt="Filtr saturate">
  <img src="https://placehold.co/150" class="example-image sepia" alt="Filtr sepia">
  <img src="https://placehold.co/150" class="example-image combined" alt="Filtry łączone">
</body>
</html>

Plik CSS (styles.css)

Wszystkie reguły z kroków 3-12 w jednym pliku:

/* Filtr rozmycia (blur) */
.example-image.blur {
  filter: blur(5px);
}

/* Filtr jasności (brightness) */
.example-image.brightness {
  filter: brightness(0.8);
}

/* Filtr kontrastu (contrast) */
.example-image.contrast {
  filter: contrast(1.5);
}

/* Filtr skali szarości (grayscale) */
.example-image.grayscale {
  filter: grayscale(100%);
}

/* Filtr obrotu barw (hue-rotate) */
.example-image.hue-rotate {
  filter: hue-rotate(90deg);
}

/* Filtr odwrócenia kolorów (invert) */
.example-image.invert {
  filter: invert(100%);
}

/* Filtr przezroczystości (opacity) */
.example-image.opacity {
  filter: opacity(50%);
}

/* Filtr nasycenia (saturate) */
.example-image.saturate {
  filter: saturate(2);
}

/* Filtr sepii (sepia) */
.example-image.sepia {
  filter: sepia(100%);
}

/* Łączenie filtrów */
.example-image.combined {
  filter: grayscale(100%) contrast(1.5) brightness(0.7);
}

Eksperymentuj dalej

1. Dodaj więcej elementów z różnymi filtrami, aby lepiej zrozumieć, jak działają różne filtry.
2. Spróbuj dodać więcej stylów do swojej strony, np. zmieniając kolory, rozmiary i inne właściwości CSS.
3. Przetestuj swoje umiejętności, tworząc bardziej złożone efekty z użyciem różnych kombinacji filtrów.

Po wykonaniu tego ćwiczenia powinieneś lepiej rozumieć, jak używać różnych filtrów w CSS, aby stosować różne efekty wizualne do elementów HTML.