Edycja stylu elementów na stronie internetowej za pomocą JavaScript

Właściwość filter w CSS – dostępne efekty

Właściwość filter pozwala na nakładanie efektów graficznych na elementy strony, najczęściej na obrazy (img). Efekty te mogą być dynamicznie zmieniane również za pomocą JavaScript.

---

1. none

Domyślna wartość. Oznacza brak jakichkolwiek efektów.

Przykład:

img {
  filter: none;
}

---

2. blur(px)

Nakłada efekt rozmycia na obraz. Im większa wartość w pikselach, tym silniejsze rozmycie.

Przykład:

img {
  filter: blur(5px);
}

---

3. brightness(%)

Zmienia jasność obrazu.

• 0% – obraz całkowicie czarny
• 100% – obraz oryginalny
• powyżej 100% – jaśniejszy obraz

Przykład:

img {
  filter: brightness(120%);
}

---

4. contrast(%)

Reguluje kontrast obrazu.

• 0% – obraz całkowicie czarny
• 100% – kontrast oryginalny
• powyżej 100% – większy kontrast

Przykład:

img {
  filter: contrast(150%);
}

---

5. grayscale(%)

Zamienia obraz na odcienie szarości.

• 0% – brak efektu
• 100% – obraz czarno-biały

Przykład:

img {
  filter: grayscale(100%);
}

---

6. invert(%)

Odwraca kolory obrazu (negatyw).

• 0% – brak efektu
• 100% – pełny negatyw

Przykład:

img {
  filter: invert(100%);
}

---

7. opacity(%)

Ustawia przezroczystość obrazu.

• 0% – całkowicie przezroczysty
• 100% – brak przezroczystości

Przykład:

img {
  filter: opacity(60%);
}

---

8. sepia(%)

Nadaje obrazowi efekt starej fotografii.

• 0% – brak efektu
• 100% – pełna sepia

Przykład:

img {
  filter: sepia(100%);
}

---

Łączenie kilku filtrów jednocześnie

Można zastosować kilka filtrów naraz, zapisując je po sobie:

img {
  filter: grayscale(100%) blur(3px) brightness(120%);
}

---

Ćwiczenie: Transformacje obrazów z wykorzystaniem JavaScript

Cel ćwiczenia

Celem ćwiczenia jest przećwiczenie obsługi zdarzeń, pracy z formularzem oraz stosowania właściwości filter w JavaScript do dynamicznej modyfikacji wyglądu obrazów na stronie internetowej.

---

Wymagania ogólne

1. Skrypt musi być napisany w języku JavaScript.
2. Należy stosować znaczące i czytelne nazwy zmiennych oraz funkcji (np. applyBlurFilter, opacityValue).
3. Skrypt ma realizować transformacje obrazów z wykorzystaniem właściwości CSS filter.
4. Efekty działania filtrów powinny być widoczne bez przeładowywania strony.

---

Część 1 – Transformacje obrazu 1 (radio)

Dla pierwszego obrazu przygotuj trzy elementy radio:

• Blur

  • Po zaznaczeniu checkboxa na obraz ma zostać nałożony filtr rozmycia.
  • Wartość rozmycia powinna mieścić się w przedziale od 4 px do 8 px (dowolna wartość z tego zakresu).

• Sepia

  • Po zaznaczeniu checkboxa na obraz ma zostać nałożony filtr sepii o wartości 100% (efekt starej fotografii).

• Negatyw

  • Po zaznaczeniu checkboxa na obraz ma zostać nałożony filtr odwrócenia kolorów (negatyw) o wartości 100%.

Filtry powinny reagować na zaznaczanie i odznaczanie checkboxów.

---

Część 2 – Transformacje obrazu 2 (przyciski)

Dla drugiego obrazu przygotuj dwa przyciski:

• „Kolory”

  • Po kliknięciu przycisku obraz ma mieć usunięty filtr odcieni szarości (powrót do kolorów).

• „Czarno-biały”

  • Po kliknięciu przycisku na obraz ma zostać nałożony filtr grayscale(100%).

---

Część 3 – Transformacje obrazu 3 (suwak + przycisk)

Dla trzeciego obrazu przygotuj:

• suwak (input type="range") do wyboru poziomu przezroczystości,
• przycisk „Zastosuj”.

Po kliknięciu przycisku:

• na obraz ma zostać nałożony filtr przezroczystości (opacity),
• wartość filtru ma pochodzić bezpośrednio z ustawienia suwaka.

---

Część 4 – Transformacje obrazu 4 (jasność)

Dla czwartego obrazu przygotuj:

• suwak do ustawiania poziomu jasności,
• przycisk „Zastosuj”.

Po kliknięciu przycisku:

• na obraz ma zostać nałożony filtr zmiany jasności (brightness),
• wartość filtru ma być zgodna z aktualnym ustawieniem suwaka.

---

Wskazówki

• Pamiętaj o korzystaniu z właściwości .value, .checked oraz .style.filter.
• Każda transformacja powinna być obsługiwana przez osobną, czytelnie nazwaną funkcję.
• Zadbaj o to, aby kod był czytelny i logicznie podzielony.