Добавляем в наш Каталог удобный и полезный онлайн-сервис, генерирующий CSS фильтры для изображений.
Используя возможность демонстрации изменения изображения при выборе того или иного CSS фильтра, вы довольно быстро подберете и реализуете эффект в Webkit, а может быть и несколько эффектов и добавите в файл стилей вашего сайта.
Используйте ползунок на сервисе и наблюдайте, как меняется изображение демонстрационной картинки. Затем скопируйте созданный и устраивающий вас фильтр.
Например, это может выглядеть так:
Исходная картинка
Изменяем оттенок поворота, насыщенность цвета, добавляем падающую тень:
.example {
-webkit-filter: hue-rotate(230deg) saturate(1.8) drop-shadow(1px 1px 10px grey);
}
Картинка меняется:
Вы можете выбрать и другие css фильтры ( размытие, оттенок серого, сепия, яркость, контраст, непрозрачность…)
