Как сделать RSS иконку любого цвета, используя одну картинку

[Nixer]

Спасибо большое!!!
Буду использовать!

[benderlio]

спасибо
но как по мне оправданно если предпологается использовать более 2-х цветов как у того же лебедева

[nps]

А что сразу Лебедев?)

[umnik]

>...как у того же лебедева
А кто это?

[nicothin]

самизнаемкто - Медведев, товарищ Иванов.
кстати, мы сейчас подъедем...
:)

[NetworK]

У Лебедева стоит скрипт... В принципе нечего сложного...
Посмотрите исходный код на странице студии и проанализируйте код. ;-)

[arestov]

оправдано всегда оптимизацией загрузки (меньше файлов-меньше запросов)

[TR4V15]

не забывайте что не все такие умные как вы ;)

[TR4V15]

не знаю как вы, но я не вижу нечего плохого в этом.

[arestov]

давайте просто игнорировать темы которые нас не интересуют

[vserg]

а мне просто лень писать в темы которые меня не интересуют :)

[msfs11]

колесо тоже просто сделать, но придумать его было сложно.

[BAHO]

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

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

[gvozd1989]

А не проще две картинки использовать? Тем более это для двухцветных картинок.

[NetworK]

Зачем использовать две картинки, если все определяется в css?
Тем более если речь пойдет не об иконке 32х32, а например логотипе или что-то более большого размера, нужно же иногда и пользователях думать и о их трафике.

[Flex]

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

[gvozd1989]

Да, я согласен с Вами - спрайты это наилучший выход, но на крайняк можно и прелоад сделать.

[kost]

background-image:#ff6600 url(rss32.png); /*иконка будет оранжевого цвета*/

Мне кажется, это несколько некорректно.

Надо background: #ff6600 url(rss32.png);

[habratchanka]

вы правы, ошибка. Спасибо.

[AlterEG0]

или даже background: #f60 url(rss32.png);

[asterian]

Странно, что в примере взята иконка RSS - она ж с градиентом, да и цвет у нее вроде бы стандартный. А для штамповки разноцветных иконок одной формы да, подходит - только я бы все равно использовал gif.

[gdX]

На автокадабре, вроде, машинки таким же образом реализовывались.

[elfiki]

Долго думал как получилось показать полупрозрачную область окрашенной шахматкой. Понял что туплю)

[fr0mus]

Я до сих пор не понял :).

[alias]

Да, ребята из турбомилк об этой технике уже писали. И, кажется, даже на хабре эта их статья уже мелькала.

[gentleman]

Раз уж на то пошло - предлагаю свой вариант.(Разумеется инлайн в проекте выносится в css файл)

[gentleman]

<img src="rss32.png" alt="" style="background-color: #f90; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='rss32.png', sizingMethod='scale'); _background-image: none;" />

[gentleman]

Спасибо. В следующий раз учту. А здесь совсем забыл про предпросмотр :)

[hlomzik]

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

[mobilz]

2003 год добрался до Рунета… Алилуя…
http://www.simplebits.com/notebook/2003/…

[ido]

Больше всего понравилась картинка к статье. Можно даже не читать топик (не в обиду автору, а скорее наоборот)...

[Kaberc]

Хорошая идея, жаль что не ваша. Часто придумаешь что нибудь, а это уже есть. Такое неоднократно бывало на хабре. Предлагаю сначала обыскивать все патентные хранилища. Уже смешно. Но хотя бы у гугла надо спросить.

[farafontov]

А как же ИЕ<7 он же не поддерживает прозрачный png Или вы как-то решили эту ошибку?

[moore]

Вообщето, она указала как. Там IE-шная фича с применением альфа-канала юзается.
Или там многабукав и ты не осилил весь текст ? ;)

[Andrrr]

А если сделать так:

<a class="rssicon32"><ins>RSS</ins></a>
a.rssicon32 ins {text-indent:-9999px}

будет еще красивее)

[megapixel_777]

Спасибо, юзабельно.
По-моему, не помешал бы тэг "CSS"

[sol1tude]

По этому посту можно определить дизайнер гик или нет. Цвет меняется путем HSL коректировки канала, и не нужно строчек кода бесконечного.

[Sabiko]

Хватит вам ругаться на ретро, если так рассуждать, то весь этот блог вторичен. Типсы для самых маленьких никто не отменял.

большой комплект буков об этом.

[habratchanka]

Думаю смысл описан в комментариях выше. Это еще одна альтернатива rollover эффекту.

[habratchanka]

по моему полезность налицо, достаточно взглянуть на картинку к статье. Комментарии - следствие. Немного логику надо напрячь ;)

[Dixon]

нужное. в избранное добавил. спасибо

[enibeniraba]

colorpicker.com

[angelZ]

Думается если представить гемор с альфаканалом в IE 6 и 7-й версий, и начать перебирать хаки и танцы с бубном для полноценной реализации PNG в этих браузерах то вся та прелесть и простота о которой говорится легко уйдёт в урну.

[habratchanka]

IE7 поодерживает png

[angelZ]

ой, разумеется 5-й и 6-й IE имелись в виду, которые до сих пор широко распространены среди офисных гиков

[habratchanka]

Родился оффтоп:
IE6 - это советское время, только с одной разницей, по IE6 не скучаешь

[kirilloid]

Очень порадовала картинка вне ката — все понятно )

[antongridz]

Спасибо )
Эта штука очень пригодилась ;)