CSS3 фильтры для изображений
1. Grayscale - серый оттенок (черно-белый фильтр)
Для создания эффекта "черно-белого фильтра" используется параметр grayscale, которому применяется значение от 0 - 100%.
<img src="/foto.jpg" style="-webkit-filter: grayscale(100%);" alt="" />2. Sepia - светло-коричневый оттенок (сепия фильтр)
Для создания эффекта "светло-коричневого фильтра" используется параметр sepia, которому применяется значение от 0 - 100%.
<img src="/foto.jpg" style="-webkit-filter: sepia(100%);" alt="" />3. Brightness - фильтр яркости
Для создания эффекта "фильтра яркости" используется параметр brightness, которому применяется значение от 0 до больших показателей (в процентах).
Например, при 0% изображение будет черным, при 100% - будет использоваться исходная яркость изображения, при 200% - яркость увеличится в 2 раза.
<img src="/foto.jpg" style="-webkit-filter: brightness(200%);" alt="" />4. Contrast - фильтр контрастности
Фильтр контрастности регулирует разницу между темными и светлыми тонами изображения. Используется параметр contrast, применяется значение от 0 до больших показателей (в процентах).
При 0% изображение будет черным, при 100% - будет использоваться исходный контраст изображения, при 150% - контрастность увеличится в 1,5 раза.
<img src="/foto.jpg" style="-webkit-filter: contrast(150%);" alt="" />5. Saturate - фильтр насыщенности
Фильтр насыщенности придает изображению более сочный и насыщенный вид. Используется параметр saturate, применяется значение от 0 до больших показателей (в процентах).
При 0% изображение становится черно-белым (аналог фильтра grayscale), при 100% - будет использоваться исходная насыщенность изображения, при 200% - насыщенность увеличится в 2 раза.
<img src="/foto.jpg" style="-webkit-filter: saturate(200%);" alt="" />6. Invert - фильтр инверсии цветов
Инверсия цветов - изменения цветовой гаммы изображения на противоположный по спектру.За работу фильтра отвечает параметр invert, применяется значение от 0 до 100%.
<img src="/foto.jpg" style="-webkit-filter: invert(100%);" alt="" />7. Hue-rotate - фильтр оттенка
Данный фильтр меняет угол цвета, основываясь на "цветовом колесе", и смещает его на указанное значение в градусах.За работу фильтра отвечает параметр hue-rotate, применяется значение от 0 до 360 градусов (deg).
<img src="/foto.jpg" style="-webkit-filter: hue-rotate(300deg);" alt="" />8. Blur - фильтр размытия
Создает эффект размытия изображения. Суть работы фильтра заключается в определении количества пикселей в радиусе, которые будут сливаться друг с другом (чем больше параметр, тем больше размытие)За работу фильтра отвечает параметр blur, значение задается в пикселях (px).
<img src="/foto.jpg" style="-webkit-filter: blur(1px);" alt="" />9. Opacity - фильтр прозрачности
Фильтр регулирует уровень прозрачности изображения.За работу отвечает параметр opacity, значение задается от 0 - 100%. При значении в 10% изображение будет еле видно, при 100% - прозрачности не будет.
<img src="/foto.jpg" style="-webkit-filter: opacity(10%);" alt="" />