Tryby filtrowania i mieszania CSS to potężne narzędzia do łatwego stosowania oszałamiających efektów wizualnych na stronie internetowej bez potrzeby stosowania złożonego kodu.

Tryby filtrowania i mieszania CSS umożliwiają łatwe stosowanie efektów wizualnych na stronie internetowej. Filtry to zestaw predefiniowanych funkcji CSS służących do dostosowywania renderowania obrazów lub innych elementów HTML. Podczas gdy tryby mieszania określają, w jaki sposób element powinien mieszać się z tłem lub sąsiednimi elementami.

Korzystanie z filtrów CSS

Stosujesz filtry CSS za pomocą filtr właściwość i właściwość określająca zastosowany typ efektu. Każda właściwość filtru jest funkcją CSS, tj działa podobnie do zmiennej CSS funkcjonować. Akceptuje parametr określający, jak bardzo filtr powinien wpływać na stylizowany element.

Dostępnych jest 10 funkcji filtrowania CSS do stylizowania elementu HTML:

  • plama()
  • jasność()
  • kontrast()
  • cień()
  • skala szarości()
  • obracanie odcienia()
  • odwracać()
  • nieprzezroczystość()
  • nasycić()
  • sepia()
instagram viewer

Filtrów tych można używać pojedynczo lub w połączeniu, aby tworzyć unikalne style i poprawiać wygląd elementów HTML.

Niektóre z tych filtrów działają znacznie lepiej z innymi, gdy są używane we właściwy sposób.

Oto przykłady łączenia filtrów CSS w celu uzyskania różnych efektów wizualnych na elemencie obrazu.

1. Skala szarości i Sepia

The skala szarości() filtr usuwa wszystkie informacje o kolorze z obrazu lub elementu tekstowego. Filtr przyjmuje wartość z zakresu od 0 do 1, gdzie 0 oznacza kolor oryginalny, a 1 pełny efekt skali szarości.

The sepia() filtr stosuje efekt odcienia sepii do obrazu lub elementu tekstowego. Filtr przyjmuje również wartość z przedziału od 0 do 1.

Na przykład:

img {
filtr: skala szarości(14%) sepia(30%);
}

Łączenie skala szarości() przy 14% i sepia() przy 30% może stworzyć efekt vintage lub retro na Twoim obrazie.

2. Odwróć i nasyć

The nasycić() filtr zwiększa lub zmniejsza nasycenie obrazu lub elementu tekstowego. Filtr przyjmuje wartość od 0 do nieskończoności, gdzie 1 oznacza kolor oryginalny, a wyższe wartości zwiększają nasycenie.

The odwracać() filtr odwróci kolory obrazu lub elementu tekstowego, odwracając odcień każdego koloru o 180 stopni na kole kolorów. Oznacza to, że filtr zmienia poziomy jasności i nasycenia elementu przy jednoczesnym zachowaniu odcienia.

Na przykład:

img {
filtr: odwracać(30%) nasycić(75%);
}

Ten kod odwraca kolory obrazu i zwiększa nasycenie o 75%.

3. Obrót odcienia i kontrast

The obracanie odcienia() filtr obraca odcienie obrazu lub elementu tekstowego, co oznacza, że ​​zmienia ogólny kolor elementu przy zachowaniu poziomów jasności i nasycenia. Wielkość obrotu można określić w stopniach, gdzie 0 reprezentuje oryginalny kolor, a 360 oznacza pełny obrót z powrotem do pierwotnego koloru.

Łączenie obracanie odcienia() I kontrast() filtry mogą stworzyć żywy i kolorowy efekt na twoich obrazach.

Na przykład:

img {
filtr: zmiana odcienia(10stopień) kontrast(150%);
}

Obrót odcienia może przyjąć wartość stopień, absolwent, rad, Lub zakręt. Powyższy kod obraca odcień obrazu o 10 stopni i zwiększa kontrast.

4. Jasność i rozmycie

Filtry jasności i rozmycia są bardzo oczywiste. Pierwszy dostosowuje jasność obrazu, a drugi kontroluje zastosowany poziom rozmycia.

Łączenie jasność() I plama() filtry mogą stworzyć marzycielski i miękki efekt na twoich zdjęciach.

Na przykład:

img {
filtr: jasność(0.8) plama(5piks);
}

Powyższy kod zmniejsza jasność o 0.8 (80%) i stosuje a 5 piks efekt rozmycia obrazu.

5. Cień i krycie

Efekt cienia to efekt wizualny, w którym element wydaje się rzucać cień na powierzchnię za nim, dając złudzenie głębi i wymiarowości. Cienie są często stosowane do tekstu lub obrazów, aby stworzyć wrażenie oddzielenia elementu od tła.

Tymczasem filtr krycia kontroluje przezroczystość elementu.

Łączenie cień() I nieprzezroczystość() filtry mogą stworzyć subtelny efekt na elementach tekstowych.

Na przykład:

.efekt tekstowy {
przekształcać: Tłumaczyć(-50%, -50%);
kolor: czarny;
cień: 10piks 9piks 9piksbeżowy;
nieprzezroczystość: 70%;
}

W tym przykładzie cień jest umieszczony 10 pikseli w prawo i 9 pikseli w dół, a promień rozmycia wynosi 9 pikseli. Kolor cienia określono jako beżowy. Określono również krycie 70%.

Korzystanie z trybów mieszania CSS

Tryby mieszania CSS kontrolują, w jaki sposób zawartość elementu miesza się z tłem lub innymi elementami, umożliwiając kreatywne efekty kompozycji.

Niektóre z najpopularniejszych przypadków użycia trybów mieszania CSS obejmują:

  • Tworzenie gradientów: Do tworzenia można używać trybów mieszania kilka gradientów tła CSS to przejście między kolorami, zapewniając łatwy i skuteczny sposób dodawania głębi i wymiarów do projektów.
  • Dodawanie tekstury: Możesz także użyć trybów mieszania, aby dodać teksturę do tła, obrazów i innych elementów na stronie. Może to być świetny sposób na stworzenie niepowtarzalnego wyglądu i dodanie wizualnego zainteresowania zwykłym elementom.
  • Regulacja kolorów: W trybach mieszania można dostosować kolory elementów na stronie, w tym dostosowanie kolorów tła. Umożliwi to łatwe tworzenie efektów, takich jak kolorowe nakładki lub przyciemniane obrazy.

Dwa najpopularniejsze tryby mieszania to tryb mieszania tła I tryb mieszania mieszanego. Obie właściwości mają te same 15 wartości: normalny, mnożenie, ekran, nakładka, przyciemnianie, rozjaśnianie, unikanie kolorów, nasycenie, wypalanie kolorów, jasność, różnica, twarde światło, miękkie światło, wykluczenie i odcień.

Powinieneś użyć tryb mieszania tła gdy masz wiele układów tła, takich jak obrazy tła na elemencie, i chcesz, aby wszystkie się ze sobą łączyły.

Możesz też skorzystać z tzw tryb mieszania mieszanego mieszania zawartości danego elementu z zawartością jego bezpośredniego rodzica. The tryb mieszania mieszanego jest zwykle używany do łączenia zawartości pierwszego planu, takiej jak tekst, kształty lub obrazy.

Oto przykład użycia tryb mieszania mieszanego łączyć tekst i obraz.

HTML:

<dzklasa="pojemnik">
<img
 src=" https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=kompresuj&cs=małesrgb&w=1260&h=750&dpr=2 https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=kompresuj&cs=tinysrgb&w=1260&h=750&dpr=2"
 class="obraz-tła"
 />
<dzklasa="treść">
<h1>Powitanieh1>
<P>Witaj Użytkowniku!P>
dz>
dz>

CSS:

.pojemnik {
pozycja: absolutny;
szerokość: 100%;
wysokość: 100%;
}
.zdjęcie w tle {
szerokość: 100%;
wysokość: 100%;
dopasowanie do obiektu: okładka;
}


.treść {
pozycja: absolutny;
szczyt: 50%;
lewy: 50%;
przekształcać: Tłumaczyć(-50%, -50%);
wyrównanie tekstu: Centrum;
tryb mieszania mieszanego: różnica;
}


h1 {
rozmiar czcionki: 60piks;
kolor: biały;
}
P {
rozmiar czcionki: 40piks;
kolor: biały;
}

The różnica tryb mieszania oblicza bezwzględną różnicę między wartościami kolorów tekstu i ciemnego obrazu znajdującego się pod spodem.

W tym scenariuszu kolor tekstu wchodziłby w interakcję z ciemnym tłem, dając efekt wysokiego kontrastu.

Łączenie filtrów i trybów mieszania

Możesz łączyć filtry i tryby mieszania, aby uzyskać jeszcze bardziej interesujące wizualnie efekty. Używając obu właściwości razem, możesz osiągnąć unikalne i kreatywne wyniki, które trudno powtórzyć za pomocą innych właściwości CSS.

Oto przykład, który łączy filtr i tryb mieszania, aby uzyskać bardziej złożony efekt:

.mój-element {
filtr: jasność(150%) zmiana odcienia(180stopień) cień(0piks 0piks 10piksrgba(0, 0, 0, 0.5));
tryb mieszania mieszanego: ekran;
}

Ten kod łączy filtry; jasność, zmiana odcienia, cieńi a tryb mieszania mieszanego wartościowy ekran do obrazu. Zwiększa jasność o 150%, podczas gdy hue-obracaj spowoduje odwrócenie kolorów obrazu o 180 stopni.

Następnie nakładany jest również cień. Wreszcie, ekran wartość dla trybu mieszania połączy kolory obrazu z tłem bazowym, dając efekt, w którym jaśniejsze kolory są zintensyfikowane, a ciemniejsze mieszają się z tło.

Opanowanie filtrów i trybów mieszania

Poznałeś różne rodzaje filtrów CSS i wiesz, jak zastosować je do elementów HTML. Korzystając z różnych funkcji filtrów, takich jak rozmycie, kontrast i zmiana odcienia, możesz modyfikować wygląd swoich obrazów. Widziałeś również przykłady trybów mieszania w akcji i jak można je wykorzystać do tworzenia unikalnych projektów.

Jeśli bardziej poeksperymentujesz z tymi technikami, możesz dodać dodatkowy poziom wizualnego zainteresowania swoim projektom.