Как обесцветить часть изображения?

Question

[Максим Тимофеев]

Есть некие этапы, например:
вы заказали товар, вы оплатили заказ, товар летит на самолете, товар скинули в море и т.д.
Каждый из них изображен картинкой цветной когда выполнен и градации серого, когда нет.
Тут все пока понятно, как сделать. Далее:
Есть некоторые этапы, которые имеют % выполнения. Хотел это визуализировать, то есть картинка будет частично цветной, частично серой.
Помогите выбрать технологию. Возможно есть плагины?

Answer 1

[Atllantis]

Слишком сложно думаете :)
Всё намного проще:
Берёте две картинки (цветную и чёрно-белую), ставите одну поверх другой и изменяя видимый размер одной картинки получаем "прогрессбар".

Comments

[Максим Тимофеев]

Думал об этом, но не совсем вижу как изменить размер картинки в %, что бы не исказить ее.

[Atllantis]

Максим Тимофеев: вам уже написали ниже: overflow: hidden

[Максим Тимофеев]

Atllantis: да, спс, видел, это вариант

Answer 2

[hoarywolf]

положить бесцветную картинку на цветную, верхнюю бесцветную показывать частично, в зависимости от % выполнения, меняя ширину у DIVа с overflow: hidden?

Comments

[Максим Тимофеев]

вариант

Answer 3

[iBird Rose]

Зачем извращаться если есть
filter: grayscale(100%);
и не только такой есть. фильтров много https://habrahabr.ru/post/144852/

Comments

[Максим Тимофеев]

но только нет того, что делает это с половиной или 30% картинки

[iBird Rose]

Максим Тимофеев: а это уже тебе выше посоветовали наложить вторую картинку поверх первой и двигать ее абсолютом через left: 30%;

[trushka]

Можно менять насыщенность цвета, от серого grayscale(100%) до цветного grayscale(0%)
кстати, webkit-браузеры до сих пор понимают только -webkit-filter, а мелкомягкие поделки вообще фильтров не понимают, хотя когда-то они их как раз и придумали, хоть и с другим синтаксисом..

[Максим Тимофеев]

iBird Rose: Как обесцветить я знаю. Меня как раз интересовал вариант с тем как показать пол картинки, сразу не допер до overflow.

Answer 4

[Алексей Уколов]

Можно воспользоваться svg - будет меньше весить. Для иконок идеально подходит.

Comments

[Максим Тимофеев]

Не уверен, что будет просто менять ей заливку. Если есть путь - дайте ссылку на доки. Тоже склонялся к SVG, но знаю его частично.