- Autor publikacji
- Virtual Patriot - Administrator
filter
- Data publikacji
- Ostatnio edytowano
Przeznaczenie właściwości filter
Za pomocą właściwości filter
możemy zmienić kolorystykę interesującego nas elementu HTML.
- Informacje dodatkowe
-
gdy element przodek oraz element potomek posiadają właściwość
filter
wraz z wartością różną od wartości none, wtedy zmiana kolorystyki rozpoczyna się od elementu potomka.
Informacje techniczne o właściwości filter
- przeznaczenie
-
element HTML każdego typu
- pozycja
-
dowolna
- dziedziczenie
-
nie
- wartość initial
- wyjątki initial
-
brak
- animowanie
-
tak
Interpretacja właściwości filter
-
tak
-
tak
-
tak
-
tak
-
nie
-
tak
Zobacz więcej informacji o interpretacji właściwości filter.
Opis wartości właściwości filter
none
Wyjaśnienie
Wartość none
jest domyślną wartością właściwości filter
.
Domyślnie pierwotna kolorystyka elementu HTML nie jest zmieniona.
Przykład
filter:none;

Kolorystyka przykładowego elementu "img" nie została zmieniona.
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
</style>
</head>
<body>
<img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">
</body>
</html>
grayscale()
Wyjaśnienie
Za pomocą właściwości filter
oraz funkcji grayscale() możemy zmienić procent szarości kolorów interesującego nas elementu HTML.
Przykład
filter:grayscale(90%);


Procent szarości kolorów przykładowego elementu "img" został powiększony o 90 procent, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "grayscale()", w której to funkcji została użyta wartość "90%".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
img {
filter:grayscale(90%);
}
</style>
</head>
<body>
<img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">
</body>
</html>
sepia()
Wyjaśnienie
Za pomocą właściwości filter
oraz funkcji sepia() możemy zmienić procent sepii kolorów interesującego nas elementu HTML.
Przykład
filter:sepia(100%);


Procent sepii kolorów przykładowego elementu "img" został powiększony o 100 procent, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "sepia()", w której to funkcji została użyta wartość "100%".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
img {
filter:sepia(100%);
}
</style>
</head>
<body>
<img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">
</body>
</html>
saturate()
Wyjaśnienie
Za pomocą właściwości filter
oraz funkcji saturate() możemy zmienić procent nasycenia kolorów interesującego nas elementu HTML.
Przykład
filter:saturate(180%);


Procent nasycenia kolorów przykładowego elementu "img" został powiększony o 80 procent, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "saturate()", w której to funkcji została użyta wartość "180%".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
img {
filter:saturate(180%);
}
</style>
</head>
<body>
<img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">
</body>
</html>
hue-rotate()
Wyjaśnienie
Za pomocą właściwości filter
oraz funkcji hue-rotate() możemy zmienić (na podstawie koła barw) odcienie kolorów interesującego nas elementu HTML.
Przykład
filter:hue-rotate(30deg);


Odcienie kolorów przykładowego elementu "img" zostały zmienione, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "hue-rotate()", w której to funkcji została użyta wartość "30deg".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
img {
filter:hue-rotate(30deg);
}
</style>
</head>
<body>
<img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">
</body>
</html>
invert()
Wyjaśnienie
Za pomocą właściwości filter
oraz funkcji invert() możemy zmienić procent odwrócenia kolorów interesującego nas elementu HTML.
Przykład
filter:invert(100%);


Procent odwrócenia kolorów przykładowego elementu "img" został powiększony o 100 procent, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "invert()", w której to funkcji została użyta wartość "100%".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
img {
filter:invert(100%);
}
</style>
</head>
<body>
<img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">
</body>
</html>
brightness()
Wyjaśnienie
Za pomocą właściwości filter
oraz funkcji brightness() możemy zmienić procent jasności kolorów interesującego nas elementu HTML.
Przykład
filter:brightness(160%);


Procent jasności kolorów przykładowego elementu "img" został powiększony o 60 procent, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "brightness()", w której to funkcji została użyta wartość "160%".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
img {
filter:brightness(160%);
}
</style>
</head>
<body>
<img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">
</body>
</html>
contrast()
Wyjaśnienie
Za pomocą właściwości filter
oraz funkcji contrast() możemy zmienić procent zróżnicowania kolorów interesującego nas elementu HTML.
Przykład
filter:contrast(200%);


Procent zróżnicowania kolorów przykładowego elementu "img" został powiększony o 100 procent, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "contrast()", w której to funkcji została użyta wartość "200%".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
img {
filter:contrast(200%);
}
</style>
</head>
<body>
<img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">
</body>
</html>
blur()
Wyjaśnienie
Za pomocą właściwości filter
oraz funkcji blur() możemy zmienić stopień rozmycia kolorów interesującego nas elementu HTML.
Przykład
filter:blur(2px);


Stopień rozmycia kolorów przykładowego elementu "img" został powiększony na podstawie wartości równej 2 piksele, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "blur()", w której to funkcji została użyta wartość "2px".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
img {
filter:blur(2px);
}
</style>
</head>
<body>
<img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">
</body>
</html>
opacity()
Wyjaśnienie
Za pomocą właściwości filter
oraz funkcji opacity() możemy zmienić procent przezroczystości kolorów interesującego nas elementu HTML.
Przykład
filter:opacity(50%);


Procent przezroczystości kolorów przykładowego elementu "img" wynosi 50 procent, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "opacity()", w której to funkcji została użyta wartość "50%".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
background-image:url(https://webkod.pl/files/css/obrazek-01.png);
}
img {
filter:opacity(50%);
}
</style>
</head>
<body>
<div>
<img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">
</div>
</body>
</html>
drop-shadow()
Wyjaśnienie
Za pomocą właściwości filter
oraz funkcji drop-shadow() możemy określić efekt cienia dla kolorów interesującego nas elementu HTML.
Przykład
filter:drop-shadow(4px 4px 2px black);


Do znajdujących się na przezroczystym tle kolorów przykładowego elementu "img" został dodany efekt cienia (przesunięty w prawo o 4 piksele, przesunięty w dół o 4 piksele, posiadający stopień rozmycia równy 2 piksele oraz posiadający kolor czarny), ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "drop-shadow()", w której to funkcji zostały użyte następujące wartości: "4px 4px 2px black".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
img {
filter:drop-shadow(4px 4px 2px black);
}
</style>
</head>
<body>
<img src="https://webkod.pl/files/css/obrazek-02.png" alt="wielokąty na przezroczystym tle">
</body>
</html>
kombinacja wartości
Wyjaśnienie
Za pomocą kombinacji kilku (oddzielonych od siebie znakiem spacji) wartości należących do właściwości filter
możemy zmienić kolorystykę interesującego nas elementu HTML na kilka różnych sposobów jednocześnie.
Podana przez nas kombinacja wartości właściwości "filter" nie może zawierać wartości none oraz wartości globalnych.
Podana przez nas kolejność wartości kombinacji wartości właściwości "filter" ma znaczenia na ostateczny sposób zmiany kolorystyki elementu HTML.
Przykład
filter:grayscale(100%) blur(2px);


Najpierw procent szarości kolorów przykładowego elementu "img" został powiększony o 100 procent, a następnie stopień rozmycia kolorów przykładowego elementu "img" został powiększony na podstawie wartości równej 2 piksele, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z następującą kombinacją wartości: "grayscale(100%) blur(2px)".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
img {
filter:grayscale(100%) blur(2px);
}
</style>
</head>
<body>
<img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">
</body>
</html>