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>

Выход

CSS 3 Blur Filter Effect


Исходное изображение	Размытие изображения (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>

Выход

CSS 3 Brightness Filter Effect


Исходное изображение	яркость (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>

Выход

CSS 3 Contrast Filter Effect


Исходное изображение	контраст (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>

Выход

CSS 3 Drop Shadow Filter Effect


Исходное изображение	Тень (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>

Выход

CSS 3 Gray-Scale Filter Effect


Оттенки серого (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>

Выход

CSS 3 Hue-rotate Filter Effect


Исходное изображение	оттенок-поворот (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>

Выход

CSS 3 invert Filter Effect


Исходное изображение	Инвертировать (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>

Выход

CSS 3 Opacity Filter Effect


Исходное изображение	Непрозрачность (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>

Выход

CSS 3 Sepia Filter Effect


Исходное изображение	Сепия (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>

Выход

CSS 3 Saturate Filter Effect


Исходное изображение	Насыщение (200%)	Насыщение (0%)

CSS

CSS3 фильтры

Функции фильтра CSS3

Функция размытия

Выход

Функция яркости

Выход

Регулировка контрастности изображения

Выход

Эффект падающей тени

Выход

Преобразование в оттенки серого

Выход

Применение поворота оттенка к изображению

Выход

Обратный эффект

Выход

Применение прозрачности к изображениям

Выход

Применение эффекта сепии к изображениям

Выход

Регулировка насыщенности изображений

Выход

Подпишитесь на нашу email рассылку 👇