Как использовать картинку в разном цвете?

Question

[65536]

Сорри за формулировку)

Допустим, есть вот такой вот спрайт i.imgur.com/6m2eQzd.png - одноцветные иконки на прозрачном фоне. В разных местах иконки нужны разного цвета. Любого из видимого спектра, поэтому красить предварительно не вариант, нужно чтобы можно было задавать просто кодом цвета в цссе.

Как вариант вижу только сделать инверсию, то есть сами иконки сделать дырками и накладывать их поверх фона нужного цвета. Но так возникнет та же самая проблема, только с фоном, цветом которого хотелось бы рулить так же.

Есть ли какие-то известные решения такой задачи? Желательно в рамках одного цсса, то есть без свг и тд.

Answer 1

[y0u]

SVG?
habrahabr.ru/post/167085

Comments

[65536]

была бы у него нормальная интеграция в браузеры. не хочется потерять кучу времени на все камни и грабли такого плана gyazo.com/88ea17492f4cd1a289914f687dcdfdda и следить за этим всем в новых версиях ие или какой-нибудь оперы.

вообще отсутствие нормального вектора в браузерах странное дело

[Александр Петров]

65536 Ну так и не используйте этот вариаант с фоном. Используйте решение с инлайн-свг. Поддерживается замечательно: caniuse.com/#feat=svg-html5. А красить иконку через одно свойство в стилях. И transition будет работать, чего с фонами не добится нормально.

[65536]

Александр Петров: работает)) cc.cc10238.tmweb.ru/svgtest правда ради одной такой иконки выходит много кода в каждом месте где она нужны, ну и придется их ввёрстывать в шаблоны, а не просто в цссе прописывать

[Александр Петров]

65536 Не нужно вписывать. Собирается один файл со всеми иконками и дальше вставляется через . Подробно: https://css-tricks.com/svg-sprites-use-better-icon... Но да, в любом случае один элемент остается. Но это не особо проблема, если верстать сразу учитывая это. Преимуществ куда больше.

[Александр Петров]

* дальше вставляется через тег use.

[65536]

Александр Петров: круто! спасибо, то что надо.

как я перестал бояться свг

Answer 2

[Евгений Перин]

А почему бы не взять иконочный шрифт?

Comments

[65536]

мне кажется много возни, я хочу иконки заказать. потом их в шрифт придется вделывать как-то, я не умею) и мало-ли еще будут добавляться. это каждый раз этим заниматься. и я тестил эту тему, в разных браузерах отображалось по разному, где-то вообще коряво. не вижу этот вариант надежным и удобным

[Сергей delphinpro]

65536: возни немного, если вы будете изначально заказывать иконки в svg формате. Потом загружаете свои векторы на тот же fontello.com и скачиваете оттуда готовые шрифты вместе с CSS кодом для подключения. Там же в архиве будет файл config.json? который можно загрузить впоследствии на сайт, добавить иконки и скачать обновленный шрифт.

[65536]

Сергей: вот как выглядит в мазилле gyazo.com/62187c176b3955a04ecbe1103eed153b сверху пимпочка, низ усеченный
во второй иконке вон ассиметрия какая-то gyazo.com/a57e6265459a557d980091b8abea5161

сглаживания похоже нет вообще

Answer 3

[Moskus]

Если вам смертельно нужно только CSS, то кроме фильтра hue-rotate для изменения цвета больше ничего нет.

Comments

[65536]

нет в ушастом

[Moskus]

65536: Так вы определитесь, что вам важнее, чтоб было в IE или чтоб было в CSS. Потому что о кросс-браузерности в вашем вопросе нет вообще ни слова, но есть про "желательно - CSS", при том про существование других технологий вы как-бы в курсе.

[65536]

Moskus: я спрашиваю с целью не упустил ли я чего или может быть не догадался как можно выкрутиться. сейчас редко бывает чтобы что-то получилось некроссбраузерно, иногда приходится от чего-то отказываться ради этого. но вот разукрашивать один спрайт на все случаи в жизни не хочется. про хью-ротейт не знал, кстати, буду знать)