Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie
Polityka Prywatności
OK
CodeWorlds

Filtry CSS

1. Jak Używać Filtrow 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.

Przykład:
1img {
2  filter: blur(5px) brightness(0.8);
3}

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. PRZYKŁAD
  • brightness(): Kontroluje jasność elementu. PRZYKŁAD
  • contrast(): Zmienia kontrast elementu. PRZYKŁAD
  • grayscale(): Konwertuje element na skalę szarości. PRZYKŁAD
  • hue-rotate(): Obraca barwy elementu wokół koła barw. PRZYKŁAD
  • invert(): Odwraca kolory elementu. PRZYKŁAD
  • opacity(): Kontroluje przezroczystość elementu. PRZYKŁAD
  • saturate(): Kontroluje nasycenie kolorów elementu. PRZYKŁAD
  • sepia(): Dodaje efekt sepii do elementu. PRZYKŁAD

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.

Przykład:
1img {
2  filter: grayscale(100%) contrast(1.5) brightness(0.7);
3}

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

Chociaż filtry są obsługiwane przez większość nowoczesnych przeglądarek, zawsze warto sprawdzić kompatybilność, zwłaszcza jeśli chcesz, aby Twój projekt działał na starszych wersjach przeglądarek.

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

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
7  <title>Filtry CSS</title>
8</head>
9<body>
10  <h1>Filtry CSS</h1>
11  <img src="https://via.placeholder.com/150" class="example-image" alt="Przykładowy obraz">
12</body>
13</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.

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

Krok 4: Dodaj filtr jasności (brightness)

Dodaj styl dla klasy 

.example-image
, aby zmienić jasność obrazu.

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

Krok 5: Dodaj filtr kontrastu (contrast)

Dodaj styl dla klasy 

.example-image
, aby zmienić kontrast obrazu.

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

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

Dodaj styl dla klasy 

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

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

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

Dodaj styl dla klasy 

.example-image
, aby obrócić barwy obrazu.

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

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

Dodaj styl dla klasy 

.example-image
, aby odwrócić kolory obrazu.

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

Krok 9: Dodaj filtr przezroczystości (opacity)

Dodaj styl dla klasy 

.example-image
, aby zmienić przezroczystość obrazu.

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

Krok 10: Dodaj filtr nasycenia (saturate)

Dodaj styl dla klasy 

.example-image
, aby zwiększyć nasycenie kolorów obrazu.

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

Krok 11: Dodaj filtr sepii (sepia)

Dodaj styl dla klasy 

.example-image
, aby dodać efekt sepii do obrazu.

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

Krok 12: Łączenie filtrów

Dodaj styl dla klasy 

.example-image
, aby zastosować wiele filtrów jednocześnie.

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

Wynik

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

Plik HTML (index.html)

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
7  <title>Filtry CSS</title>
8</head>
9<body>
10  <h1>Filtry CSS</h1>
11  <img src="https://via.placeholder.com/150" class="example-image blur" alt="Filtr blur">
12  <img src="https://via.placeholder.com/150" class="example-image brightness" alt="Filtr brightness">
13  <img src="https://via.placeholder.com/150" class="example-image contrast" alt="Filtr contrast">
14  <img src="https://via.placeholder.com/150" class="example-image grayscale" alt="Filtr grayscale">
15  <img src="https://via.placeholder.com/150" class="example-image hue-rotate" alt="Filtr hue-rotate">
16  <img src="https://via.placeholder.com/150" class="example-image invert" alt="Filtr invert">
17  <img src="https://via.placeholder.com/150" class="example-image opacity" alt="Filtr opacity">
18  <img src="https://via.placeholder.com/150" class="example-image saturate" alt="Filtr saturate">
19  <img src="https://via.placeholder.com/150" class="example-image sepia" alt="Filtr sepia">
20  <img src="https://via.placeholder.com/150" class="example-image combined" alt="Filtry łączone">
21</body>
22</html>

Plik CSS (styles.css)

1/* Filtr rozmycia (blur) */
2.example-image.blur {
3  filter: blur(5px);
4}
5
6/* Filtr jasności (brightness) */
7.example-image.brightness {
8  filter: brightness(0.8);
9}
10
11/* Filtr kontrastu (contrast) */
12.example-image.contrast {
13  filter: contrast(1.5);
14}
15
16/* Filtr skali szarości (grayscale) */
17.example-image.grayscale {
18  filter: grayscale(100%);
19}
20
21/* Filtr obrotu barw (hue-rotate) */
22.example-image.hue-rotate {
23  filter: hue-rotate(90deg);
24}
25
26/* Filtr odwrócenia kolorów (invert) */
27.example-image.invert {
28  filter: invert(100%);
29}
30
31/* Filtr przezroczystości (opacity) */
32.example-image.opacity {
33  filter: opacity(50%);
34}
35
36/* Filtr nasycenia (saturate) */
37.example-image.saturate {
38  filter: saturate(2);
39}
40
41/* Filtr sepii (sepia) */
42.example-image.sepia {
43  filter: sepia(100%);
44}
45
46/* Łączenie filtrów */
47.example-image.combined {
48  filter: grayscale(100%) contrast(1.5) brightness(0.7);
49}

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.

Przejdź do CodeWorlds→