Приклади CSS фільтрів (CSS Filters)

CSS фільтри потрібні для застосування ефектів у графіку як частина специфікації SVG. В ексклюзивній верстці сайтів іноді без CSS фільтрів (CSS filter) не обійтися.

Важливо пам'ятати! CSS фільтри дають гарний візуальний ефект, але є й погана сторона, CSS filter негативно впливають на продуктивність сайту, оскільки вимагають час і ресурси браузера на малювання.

normal

grayscale(50%)

saturate(360%)

sepia(100%)

invert(100%)

opacity(50%)

brightness(120%)

contrast(160%)

hue-rotate(160deg)

blur(2px)

Приклади користувацьких CSS фільтрів:

grayscale(значення)
Конвертує кольори зображення (img) у чорно-білі. Значення може задаватися як у відсотках від 0% до 100%, і у десяткових дробах від 0 до 1.

saturate(значення)
Задає насиченістю кольору. Значення може бути як у відсотках від 0% до 100%, так і в десяткових дробах від 0 до 1.

sepia(значення)
Робить ефект сепії. Значення визначається як у відсотках від 0% до 100%, так і в десяткових дробах від 0 до 1.

invert(значення)
Інвертує кольори зображення. Значення визначається як у відсотках від 0% до 100%, так і в десяткових дробах від 0 до 1.

opacity(значення)
Встановлює прозорість елемента. Значення визначається як у відсотках (0% - 100%), так і в десяткових дробах (0 - 1). Цей фільтр схожий на CSS властивість opacity. Відмінність лише у цьому, що фільтр підтримує апаратне прискорення, а властивість opacity - немає. Таким чином, застосування фільтра дає кращу продуктивність при виведенні об'єкта.

brightness(значення)
Зміна яскравості зображення. Значення визначається як у відсотках від 0% до 100%, так і в десяткових дробах від 0 до 1.

contrast(значення)
Зміна контрастності зображення. Значення визначається як у відсотках від 0% до 100%, так і в десяткових дробах від 0 до 1.

hue-rotate(кут)
Зміна кольору зображення залежить від заданого кута. Кут повороту визначає, як зміниться колір у колірному колі від червоного до фіолетового. Значення в градусах (0deg - 360deg).

blur(радиус)
Ефект розмитості зображення. Значення визначається в пікселях px.

drop-shadow(x, y, радіус, колір)
Формує тінь аналогічно CSS властивості box-shadow, але тільки фільтр має підтримку апаратного прискорення як і у випадку з opacity.

url(посилання на SVG фільтр)
Створення власних фільтрів за допомогою SVG-елемента filter. Кожен фільтр має власний ідентифікатор - id.

custom (coming soon)
Можливість створювати свої власні фільтри на CSS Shaders, але поки що ця опція доступна не на всіх браузерах.