CSS3 фильтры
Есть много эффектов фильтра ,
которые могут быть использованы для выполнения различных визуальных эффектов ,
таких как
blur
,
opacity
и т.д. на любом графическом элементе ,
как
<img>.
Функции фильтра CSS3
Функция | Описание |
---|---|
никто | Это значение по умолчанию, оно не имеет специальных эффектов. |
размытие (пикс.) | Применяет эффект размытия. Чем больше значение, тем больше размытие элемента. Значение по умолчанию - 0. |
яркость (%) | Регулирует яркость. 0% сделает изображение полностью черным, 100% - исходная яркость, более 100% - увеличит яркость. |
контраст (%) |
Регулирует контраст.
Значения влияют так же, как в
brightness(%)
.
|
оттенки серого (%) | Он изменяет изображение на оттенки серого. Здесь 0% представляет исходное изображение, а 100% делает изображение полностью серым. |
падающая тень () | Применяет эффект тени. |
оттенок-поворот (град.) | Применяет вращение оттенка. |
инвертировать (%) | Он инвертирует цвета изображения. |
непрозрачность (%) | Он контролирует непрозрачность изображения. |
сепия(%) | Он преобразует изображение в цветовой эффект сепии. |
насыщать (%) | Уравновешивает насыщенность. |
Функция размытия
Эта функция создает эффект размытия на изображении. Чем больше значение, тем больше размытость. Значение по умолчанию - 0.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Blur Filter Effect </title>
<meta charset="UTF-8">
<style>
img.blur {
-webkit-filter: blur(1px); /* Chrome, Safari, Opera */
filter: blur(1px);
}
img.extra-blur {
-webkit-filter: blur(2px); /* Chrome, Safari, Opera */
filter: blur(2px);
}
table td{
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG.png" alt="PUBG">
</td>
<td>
<img class="blur" src="PUBG.png" alt="PUBG">
</td>
<td>
<img class="extra-blur" src="PUBG.png" alt="PUBG">
</td>
</tr>
<tr>
<td>Original Image</td>
<td>Image Blur (1px)</td>
<td>Blur (2px)</td>
</tr>
</table>
</body>
</html>
Выход
![]() |
![]() |
![]() |
Исходное изображение | Размытие изображения (1 пикс.) | Размытие (2 пикселя) |
Функция яркости
brightness()
Функция используется ,
чтобы сбалансировать яркость изображения.
Здесь
0%
создается полностью черное изображение, т.е. без яркости, а значение 100% или 1 дает исходную яркость.
Значения выше 100% увеличивают яркость изображения.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Brightness Filter Effect </title>
<meta charset="UTF-8">
<style>
img.bright {
-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
filter: brightness(200%);
}
img.dark {
-webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
filter: brightness(50%);
}
table td{
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG-GAME-IMAGE.jpg" alt="PUBG">
</td>
<td>
<img class="dark" src="PUBG-GAME-IMAGE.jpg" alt="PUBG">
</td>
<td>
<img class="bright" src="PUBG-GAME-IMAGE.jpg" alt="PUBG">
</td>
</tr>
<tr>
<td>Original Image</td>
<td>brightness(50%)</td>
<td>brightness(200%)</td>
</tr>
</table>
</body>
</html>
Выход
![]() |
![]() |
![]() |
Исходное изображение | яркость (50%) | яркость (200%) |
Регулировка контрастности изображения
contrast()
Функция используется ,
чтобы сбалансировать контрастность изображения.
Его значения действуют так же, как и в предыдущей функции.
Здесь также значение 0% создаст изображение, которое будет полностью черным, т.е. без контраста, а значение 100% или 1 дает контраст изображения по умолчанию.
Значения более 100% увеличивают контраст изображения.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Contrast Filter Effect </title>
<meta charset="UTF-8">
<style>
img.bright {
-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
filter: contrast(200%);
}
img.dim {
-webkit-filter: contrast(50%); /* Chrome, Safari, Opera */
filter: contrast(50%);
}
table td{
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG-Image.png" alt="PUBG">
</td>
<td>
<img class="dim" src="PUBG-Image.png" alt="PUBG">
</td>
<td>
<img class="bright" src="PUBG-Image.png" alt="PUBG">
</td>
</tr>
<tr>
<td>Original Image</td>
<td>contrast(50%)</td>
<td>contrast(200%)</td>
</tr>
</table>
</body>
</html>
Выход
![]() |
![]() |
![]() |
Исходное изображение | контраст (50%) | контраст (200%) |
Эффект падающей тени
drop-shadow()
Функция используется ,
чтобы применить эффект тени к изображениям.
Работает аналогично
box-shadow
собственности.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Drop Shadow Filter Effect </title>
<meta charset="UTF-8">
<style>
.shadow {
-webkit-filter: drop-shadow(5px 5px 5px green); /* Chrome, Safari, Opera */
filter: drop-shadow(5px 5px 5px green);
}
.shadow-large {
-webkit-filter: drop-shadow(10px 10px 5px red); /* Chrome, Safari, Opera */
filter: drop-shadow(10px 10px 5px red);
}
table td{
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG-GAME-IMAGE.jpg" alt="PUBG">
</td>
<td>
<img class="shadow" src="PUBG-GAME-IMAGE.jpg" alt="PUBG">
</td>
<td>
<img class="shadow-large" src="PUBG-GAME-IMAGE.jpg" alt="PUBG">
</td>
</tr>
<tr>
<td>Original Image</td>
<td>Drop-shadow(5px 5px 5px Green)</td>
<td>Drop-shadow(10px 10px 5px Red)</td>
</tr>
</table>
</body>
</html>
Выход
![]() |
![]() |
![]() |
Исходное изображение | Тень (5px 5px 5px Зеленый) | Тень (10px 10px 5px Красный) |
Преобразование в оттенки серого
grayscale()
Функция используется для преобразования цвета изображения в оттенках серого.
Здесь 100% - это полностью оттенки серого, 0% оставляет изображение без изменений.
Значение по умолчанию - 0%.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Gray-Scale Filter Effect</title>
<meta charset="UTF-8">
<style>
img.complete-gray {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
img.partial-gray {
-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
filter: grayscale(50%);
}
table td{
padding: 10px;
text-align: center;
border: 0px !important;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG-IMAGE.png" alt="PUBG">
</td>
<td>
<img class="complete-gray" src="PUBG-IMAGE.png" alt="PUBG">
</td>
<td>
<img class="partial-gray" src="PUBG-IMAGE.png" alt="PUBG">
</td>
</tr>
<tr>
<td>Grayscale(0)</td>
<td>Grayscale(50%)</td>
<td>Grayscale(100%)</td>
</tr>
</table>
</body>
</html>
Выход
![]() |
![]() |
![]() |
Оттенки серого (0) | Оттенки серого (50%) | Оттенки серого (100%) |
Применение поворота оттенка к изображению
hue-rotate()
Функция применяет цветового тона вращение на изображении.
Здесь значения указаны в градусах.
Значение 0deg дает исходное изображение.
Значение по умолчанию - 0 градусов.
Максимальное значение, которое можно использовать здесь, составляет 360 градусов.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Hue-rotate Filter Effect </title>
<meta charset="UTF-8">
<style>
img.hue-normal {
-webkit-filter: hue-rotate(200deg); /* Chrome, Safari, Opera */
filter: hue-rotate(200deg);
}
img.hue-wrap {
-webkit-filter: hue-rotate(600deg); /* Chrome, Safari, Opera */
filter: hue-rotate(600deg);
}
table td{
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG.png" alt="PUBG">
</td>
<td>
<img class="hue-normal" src="PUBG.png" alt="PUBG">
</td>
<td>
<img class="hue-wrap" src="PUBG.png" alt="PUBG">
</td>
</tr>
<tr>
<td>Original Image</td>
<td>hue-rotate(150deg)</td>
<td>hue-rotate(480deg)</td>
</tr>
</table>
</body>
</html>
Выход
![]() |
![]() |
![]() |
Исходное изображение | оттенок-поворот (150 градусов) | оттенок-поворот (480 градусов) |
Обратный эффект
invert()
Функция используется ,
чтобы инвертировать цвета изображения.
Здесь также полностью инвертируется значение 100% или 1, значение 0% дает исходное изображение.
Если параметр «количество» отсутствует, используется значение по умолчанию 0.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 invert Filter Effect </title>
<meta charset="UTF-8">
<style>
img.partially-inverted {
-webkit-filter: invert(75%); /* Chrome, Safari, Opera */
filter: invert(75%);
}
img.fully-inverted {
-webkit-filter: invert(100%); /* Chrome, Safari, Opera */
filter: invert(100%);
}
table td{
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG-IMAGE" alt="PUBG">
</td>
<td>
<img class="partially-inverted" src="PUBG-IMAGE" alt="PUBG">
</td>
<td>
<img class="fully-inverted" src="PUBG-IMAGE" alt="PUBG">
</td>
</tr>
<tr>
<td>Original Image</td>
<td>Invert(75)</td>
<td>Invert(100)</td>
</tr>
</table>
</body>
</html>
Выход
![]() |
![]() |
![]() |
Исходное изображение | Инвертировать (75) | Инвертировать (100) |
Применение прозрачности к изображениям
opacity()
Функция используется ,
чтобы применить прозрачность к изображениям.
Здесь значение 0% полностью прозрачно, значение 100% или 1 дает исходное изображение.
Если параметр «количество» отсутствует, используется значение по умолчанию 1.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Opacity Filter Effect </title>
<meta charset="UTF-8">
<style>
img.transparent {
-webkit-filter: opacity(75%);
filter: opacity(75%);
}
img.highly-transparent {
-webkit-filter: opacity(50%);
filter: opacity(50%);
}
table td{
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG-GAME-IMAGE.jpg" alt="PUBG">
</td>
<td>
<img class="transparent" src="PUBG-GAME-IMAGE.jpg" alt="PUBG">
</td>
<td>
<img class="highly-transparent" src="PUBG-GAME-IMAGE.jpg" alt="PUBG">
</td>
</tr>
<tr>
<td>Original Image</td>
<td>Opacity (75%)</td>
<td>Opacity (50%)</td>
</tr>
</table>
</body>
</html>
Выход
![]() |
![]() |
![]() |
Исходное изображение | Непрозрачность (75%) | Непрозрачность (50%) |
Применение эффекта сепии к изображениям
sepia()
Функция преобразует изображение в сепия цветового эффекта.
Здесь значение 100% или 1 является полностью сепией, значение 0% дает исходное изображение.
Если параметр «количество» отсутствует, используется значение по умолчанию 0.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Sepia Filter Effect </title>
<meta charset="UTF-8">
<style>
img.complete-sepia {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
img.partial-sepia {
-webkit-filter: sepia(50%);
filter: sepia(50%);
}
table td{
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG-IMAGE.png" alt="PUBG">
</td>
<td>
<img class="complete-sepia" src="PUBG-IMAGE.png" alt="PUBG">
</td>
<td>
<img class="partial-sepia" src="PUBG-IMAGE.png" alt="PUBG">
</td>
</tr>
<tr>
<td>Original Image</td>
<td>Sepia (100%)</td>
<td>Sepia (50%)</td>
</tr>
</table>
</body>
</html>
Выход
![]() |
![]() |
![]() |
Исходное изображение | Сепия (100%) | Сепия (50%) |
Регулировка насыщенности изображений
Эту
saturate()
функцию можно использовать для балансировки насыщенности изображения.
Здесь 0% - это полностью ненасыщенное изображение, а 100% - исходное изображение.
Значения более 100% увеличивают эффект насыщенности.
Если параметр «количество» отсутствует, используется значение по умолчанию 1.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Saturate Filter Effect </title>
<meta charset="UTF-8">
<style>
img.un-saturated {
-webkit-filter: saturate(0%);
filter: saturate(0%);
}
img.super-saturated {
-webkit-filter: saturate(200%);
filter: saturate(200%);
}
table td{
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG-IMAGE.png" alt="PUBG">
</td>
<td>
<img class="super-saturated" src="PUBG-IMAGE.png" alt="PUBG">
</td>
<td>
<img class="un-saturated" src="PUBG-IMAGE.png" alt="PUBG">
</td>
</tr>
<tr>
<td>Original Image</td>
<td>Saturate (200%)</td>
<td>Saturate (0%)</td>
</tr>
</table>
</body>
</html>
Выход
![]() |
![]() |
![]() |
Исходное изображение | Насыщение (200%) | Насыщение (0%) |