/    Sign up×
Community /Pin to ProfileBookmark

image desaturation

Copy linkTweet thisAlerts:
Feb 07.2007

I’ve just touched the “holy” trying to find any solution for image desaturation using css/js. So, for the don’t-know-which-time :p : is there any “multiagent” solution to this problem besides using another grayscaled image or making the whole World use the worst browser ever which got the famous “filter” attribute?

Considering pour js api I really doubt it would be of much help here without IE libraries. But I’ve seen some interesting hacks recently, so actually I’m interested in that part. Maybe there is a way to extend image css/html control for Opera and GRE browsers after all… (limit color pallete, redefine renderers, etc.)

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelFeb 07.2007 — Not sure what you are after here, -do you mean opacity that works on all browsers?[code=html]img {
opacity: 0.6;
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
filter: alpha(opacity=60);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}[/code] or are you working with a *jpg and it isn't cooperating? As you know, *JPGs are a lossy format. Every time you 'edit & save', you lose some quality unless the software can 'bump up' the quality before saving. I have noted that when saving using "Web Safe Colors", "Optimized Octree", etc option, if you include the option "include Windows colors", the quality of the image is almost always never as good...
Copy linkTweet thisAlerts:
@XeelauthorFeb 07.2007 — mmm, tanks, but I've got no problems with opacity, normally I accomplish that task exactly as you've shown in your example. I was speaking about desaturation/grayscale convertion of images; JPEG, GIF, PNG, doesn't matter. What I do not want is to use pares of images because it's a very slow operation to change them onhover.

IMHO you don't need to provide double filter attribute, "filter:alpha(opacity=XXX)" alone works just fine with IEv6/7.

(Gentoo forever! ? )
Copy linkTweet thisAlerts:
@CentauriFeb 08.2007 — What I do not want is to use pares of images because it's a very slow operation to change them onhover.[/QUOTE]

I prefer to have the two images combined into one, and shift background position on hover - works much quicker.

Cheers

Graeme
Copy linkTweet thisAlerts:
@XeelauthorFeb 08.2007 — very good idea [B]Centauri[/B] ? , I didn't think about that possibility. tnx
Copy linkTweet thisAlerts:
@WebJoelFeb 09.2007 — ....IMHO you don't need to provide double filter attribute, "filter:alpha(opacity=XXX)" alone works just fine with IEv6/7.[/QUOTE] Possibly right. I was thinking that purpose of the second filter was to target *png, -which IE does a poor job of due to it's mishandling of the alpha-channel. But anyway, -yes,- a css-image positioning a.k.a. "css sprites". -Nice technique, -super fast image roll-over without javascript.
Copy linkTweet thisAlerts:
@XeelauthorFeb 09.2007 — tnaks a lot, all worked perfectly. =)
×

Success!

Help @Xeel spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...