filter: blur, brightness, contrast, grayscale
Nauczy się Pan/Pani stosować fotograficzne efekty filtrów do elementów za pomocą funkcji właściwości CSS filter.
filter: blur, brightness, contrast, grayscale to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Właściwość CSS filter
Właściwość filter stosuje efekty graficzne do elementów — podobnie jak warstwy dopasowania w Photoshopie — bez modyfikowania rzeczywistego obrazu.
filter: blur()
Stosuje rozmycie Gaussa. Argumentem jest promień rozmycia.
<div class="frosted"></div>
<div class="hero-bg"></div>
filter: brightness()
Dostosowuje jasność. 1 = wartość oryginalna, 0 = czerń, 2 = dwukrotnie większa jasność.
<div class="dimmed"></div>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="120" height="120" alt="sample" />
filter: contrast()
Dostosowuje kontrast. 1 = wartość oryginalna, 0 = jednolita szarość, wartości powyżej 1 zwiększają kontrast.
<div class="high-contrast"></div>
<div class="low-contrast"></div>
filter: grayscale()
Konwertuje obraz do skali szarości. 0 = pełne kolory, 1 (lub 100%) = całkowita szarość.
<div class="grayscale"></div>
<div class="portfolio-item"></div>
filter: saturate()
Dostosowuje nasycenie kolorów. 0 = szarość, 1 = wartość oryginalna, wartości powyżej 1 = żywsze kolory.
<div class="vivid"></div>
<div class="muted"></div>
filter: hue-rotate()
Obraca odcień o podany kąt — przesuwa wszystkie kolory wokół koła barw.
<div class="hue-shifted"></div>
<div class="rainbow-demo"></div>
filter: sepia()
Stosuje ciepły, sepiowy efekt w stylu vintage. 0 = wartość oryginalna, 1 = pełny efekt sepii.
<div class="vintage"></div>
filter: drop-shadow()
Działa podobnie jak box-shadow, ale uwzględnia rzeczywisty kształt renderowanego elementu, w tym obszary przezroczyste. Idealnie nadaje się do nieregularnych obrazów PNG.
<div class="icon">★</div>
Łączenie wielu filtrów
Wiele funkcji filter można łączyć, oddzielając je spacjami. Są one stosowane od lewej do prawej:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="150" height="100" alt="photo" />
<div class="dramatic"></div>
filter tworzy kontekst stosu
Zastosowanie filter do elementu tworzy nowy kontekst stosu. Może to spowodować, że position: fixed elementów potomnych będzie działać jak position: absolute — jest to częsty błąd.
Szybkie sprawdzenie
Która funkcja filtra CSS stosuje do elementu rozmycie Gaussa?
Podsumowanie
Właściwość filter stosuje fotograficzne korekty: blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia() i drop-shadow(). Wiele funkcji można łączyć spacjami. Należy pamiętać, że filter tworzy kontekst stosu, co może wpływać na elementy potomne o stałej pozycji.
Ucz się CSS dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „filter: blur, brightness, contrast, grayscale” jest bezpłatna?
Tak — pełny tekst „filter: blur, brightness, contrast, grayscale” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „filter: blur, brightness, contrast, grayscale”?
Nauczy się Pan/Pani stosować fotograficzne efekty filtrów do elementów za pomocą funkcji właściwości CSS filter. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „filter: blur, brightness, contrast, grayscale”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- filter: blur, brightness, contrast, grayscale
- backdrop-filter dla efektu matowego szkła
- mix-blend-mode do mieszania warstw
- Właściwość isolation