Filtry w CSS3

By /

CSS

CSS3 wprowadziło wiele potężnych narzędzi do manipulowania wyglądem elementów HTML bez potrzeby użycia zewnętrznych bibliotek graficznych czy skryptów. Jedną z takich funkcji są filtry, które pozwalają na stosowanie różnorodnych efektów graficznych bezpośrednio na elementach strony, takich jak rozmycie, nasycenie kolorów czy przekształcenia kolorystyczne. Filtry CSS otwierają nowe możliwości dla projektantów i programistów, umożliwiając im tworzenie bardziej dynamicznych i wizualnie atrakcyjnych stron internetowych.

Przykład użycia filtrów CSS

Poniżej znajduje się przykład wykorzystania filtrów CSS w połączeniu z HTML i JavaScript, który demonstruje, jak można dynamicznie zmieniać wygląd obrazu na stronie.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład wykorzystania filtrów w CSS3</title>
    <style>
        #imageToFilter {
            transition: filter 0.5s ease; /* Gładkie przejście efektu */
        }
    </style>
</head>
<body>

<h2>Dynamiczna zmiana filtrów CSS na obrazie</h2>

<img id="imageToFilter" src="obraz.jpg" alt="Przykładowy obraz" width="300">

<button id="blurButton">Rozmycie</button>
<button id="grayscaleButton">Skala szarości</button>
<button id="resetButton">Resetuj filtry</button>

<script>
    // Pobieranie elementów
    const image = document.getElementById('imageToFilter');
    const blurButton = document.getElementById('blurButton');
    const grayscaleButton = document.getElementById('grayscaleButton');
    const resetButton = document.getElementById('resetButton');

    // Dodawanie nasłuchiwaczy zdarzeń do przycisków
    blurButton.addEventListener('click', function() {
        image.style.filter = 'blur(5px)';
    });

    grayscaleButton.addEventListener('click', function() {
        image.style.filter = 'grayscale(100%)';
    });

    resetButton.addEventListener('click', function() {
        image.style.filter = '';
    });
</script>

</body>
</html>

W powyższym przykładzie, filtry CSS są stosowane dynamicznie do obrazu poprzez JavaScript. Użytkownik ma możliwość nałożenia efektu rozmycia (blur) lub przekształcenia obrazu w skalę szarości (grayscale) za pomocą przycisków. Możliwe jest również zresetowanie wszystkich zastosowanych filtrów, przywracając obraz do jego pierwotnego stanu.

Znaczenie i możliwości

Filtry CSS są potężnym narzędziem, które może znacząco wzbogacić interakcje użytkownika ze stroną internetową. Oferują szeroki zakres efektów, które mogą być stosowane indywidualnie lub łączone, aby osiągnąć jeszcze bardziej zaawansowane i unikalne efekty wizualne. Oprócz wspomnianych blur i grayscale, CSS3 oferuje między innymi:

  • sepia(): przekształca obraz do sepii,
  • saturate(): zwiększa nasycenie kolorów,
  • contrast(): zwiększa kontrast,
  • brightness(): reguluje jasność,
  • invert(): odwraca kolory,
  • hue-rotate(): zmienia odcień kolorów.

Podsumowanie

Filtry w CSS3 otwierają drzwi do tworzenia bardziej zaawansowanych i estetycznie przyjemnych projektów webowych. Umożliwiają one łatwe i efektywne stosowanie różnorodnych efektów wizualnych bezpośrednio na elementach strony, co może znacząco poprawić wrażenia użytkownika. Dzięki łatwej integracji z JavaScriptem,

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDeveloper w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

 

Powiązane artykuły

Scroll to Top