Здесь вы узнаете как добавить визуальные эффекты для изображений при помощи CSS.
Попробовать самому »
CSS фильтры
CSS свойство filter
добавляет визуальные эффекты (такие как размытие и контрастность) для элемента.
Примечание: Свойство filter не поддерживается в Internet Explorer, Edge 12 или Safari 5.1 и более ранних версиях.
Пример черно-белого фильтра
Изменяем цвет всех изображений на черно-белый (100% серого):
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
![Ананас](http://msiter.ru/sites/default/files/msiter_files/pineapple.jpg)
Исходное изображение
![Ананас](http://msiter.ru/sites/default/files/msiter_files/pineapple.jpg)
grayscale(100%)
Пример фильтра размытия
Применяем эффект размытия для всех изображений:
img {
-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);
}
![Ананас](http://msiter.ru/sites/default/files/msiter_files/pineapple.jpg)
Исходное изображение
![Ананас](http://msiter.ru/sites/default/files/msiter_files/pineapple.jpg)
blur(5px)