Есть ли возможность в css \ js наложить цвет по форме изображения?

Question

[Алексей Николаев]

Есть определенные иконки, довольно большие (40-50 пикселов), и при наведении на них они должны окрашиваться полупрозрачным красным цветом. Проблема в том, что окрашиваться должна не область, а само изображение по его границам (png). Наиболее разумным является использовать спрайты, но проблема в том, что иконки могут быть совершенно рандомными, и любой должен иметь возможность загрузить любую иконку. Разумеется, для нее при наведении тоже должен быть такой эффект.

Итак, есть возможность реализовать подобный эффект? Может быть, есть готовые решения...

Answer 1

[xmoonlight]

Вы почти ответили сами:

по его границам (png)

1. Задача - найти границы и сделать доп. изображение с обводкой. (на сервере)
2. Смените картинку на созданную сервером (с обводкой) при наведении "мышки" через onhover и поправкой центрирования (CSS).
PS: стандартного - пока ничего нет.
UPD: jsfiddle.net/0pnLL380/5

Answer 2

[ultrbi4]

Если иконки на белом фоне можно использовать filter: grayscale(), если нет, то нужно использовать canvas

Answer 3

[A K]

Можно поменять на любой цвет
fortawesome.github.io/Font-Awesome/icons
fontello.com
fontastic.me
weloveiconfonts.com

Или так:


Рабочий:
jsfiddle.net/Symphony/mocLtrrn/1

Comments

[Алексей Николаев]

Идея отличная, но там действительно картинки должны быть

[A K]

прикрепил ссылку на один из вариантов

Answer 4

[Юрий Лобанов]

Я так понимаю, проблема в том, что будет загружена картинка, например круг, а края будут прозрачны, так? И круг, скажем, зеленого цвета. А Вам при наведении надо окрашивать его в красный.
На мой взгляд тут два варианта:
1. Воспользоваться примером @Symphony, картинку с инвертированной прозрачностью создавать на сервере. Я не бэкэндщик, но уверен, что это не трудно сделать. А для подбора цвета картинки без наведения определять основной цвет картинки также на сервере.
2. Если загружаемая картинка имеет много цветов, то тогда уже использовать спрайт. На сервере создавать спрайт, в котором слева будет оригинал, а справа исправленная копия, где все не прозрачные пикселы будут иметь красный цвет.
Правда, боюсь, возникнут проблемы с антиалиасингом изображений.