Grayscale and opacity in firefox - css

I am using the following for grayscale in firefox:
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
However, when using this, setting Opacity doesn't work. How can I use both?

Use filter with multiple effects:
div{ filter: grayscale(75%) opacity(75%); /*opacity:0.75;*/ }
div:hover{ filter: none; }
<div style="width:64px;height:64px;background-color:#F0F;"></div>
It’s standard compliant (SVG) and has decent browser support. It runs smoothly in Firefox (as asked for). Chrome requires a -webkit-prefix, and Edge has only partial support.

Related

Validation errors W3C, Grayscale

I have checked my site with W3C validators (http://jigsaw.w3.org/css-validator/) and they found the following errors:
URI: /wp-content/plugins/wp-accessibility/toolbar/css/a11y.css?ver=4.0.1
Lines: 109 .desaturated Property filter doesn't exist: grayscale(100%)
115 .desaturated Property filter doesn't exist: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333
0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale")
116 .desaturated Property filter doesn't exist: gray
I am using WordPress & WP Accessibility plugin.
I need to have the grayscale converter to my site for Disabled Persons.
My site has to pass W3C validation.
I would appreciate any help. Thanks again.
Ever grateful

Hover effect in Firefox & IE

So, I have code for hover effect on picture. It works fine on Chrome, but problem is when I open site on Firefox. Here is code:
img.img-responsive {
/* for Webkit browsere, Chrome 19+, Safari 6+ ... */
-webkit-filter: grayscale(1);
/* this is for Firefox 3.5+, Firefox mobile */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>
<filter id=\'gs\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333
0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/>
</filter></svg>#gs");
/* for IE6+ */
filter: gray;
}
img.img-responsive:hover {
/* for Webkit browsere, Chrome 19+, Safari 6+ ... */
-webkit-filter: grayscale(0);
/* this is for Firefox 3.5+, Firefox mobile */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>
<filter id=\'gs\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333
0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/>
</filter></svg>#gs");
/* for IE6+ */
filter: gray;
}
So, what should I do that hover effect works on Firefox? Pictures are shown in black-white and when you hover them color should appear.
filter: grayscale(100%) /* Or lower */
should work in a latest version of Firefox. But then again, this is Firefox.
If it doesn't, try replacing your 'filter' url with this:
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
By the way, a simple Google search for "Firefox Grayscale" turned out a StackOverflow reply to your question. It was answered by defau1t a while ago:
CSS Filter not working in Firefox
thanks for help but this didn't solve my problem. Either your answers works for me. Now hover effect works only in one solution, picture is now in color and when I hover it it becomes black-white. I need opposite, picture has to be black-white and when I hover it, it has to be in color.
The filter effect you are using for Firefox seems to be very convoluted. All modern browsers should be able to use the CSS3 notation now, but specific selectors for slightly older browsers are available;
You might need to use the -moz selector for your version of Firefox.
The full list for all browsers is below;
img {
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);
}
img:hover {
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
}
Hope this helps.
try JS fix
It is using javascript to detect the browser and creates a canvas and then uses filter.
http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js/

Cross-Browser Image Grayscale with CSS

Grayscale Effect doesnot work well in firefox so for alternative i am using.
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
But After applying this css,firefox show me error could not load the image.
I am applying this effect in revolution slider where Any no of images can be there.
This is old but I had the same problem and found it on their developer site and it worked for me:
filter: grayscale(100%);
Here's a link to their site for reference: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

CSS3 Firefox filter grayscale without blur effect matrix

What i have now is the following code to grayscale my image (found here on stackoverflow). Problem is this also blurres the image. I would like a matrix that only adjusts the color to grayscale, and not changing the blurriness of my picture.
CSS Code:
filter: url(svg/filters.svg#grayscale);
filter: gray; /* IE6-9 */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
-webkit-filter: grayscale(100%); /* Google Chrome & Safari 6+ */
Try playing with the filterRes attribute, it defines the
width and height of the intermediate images in pixels
and can have an drastic impact on the image quality. See this example:
http://jsfiddle.net/Jxtjt/
<img src='http://upload.wikimedia.org/wikipedia/commons/7/70/Example.png'>
img {
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale' filterRes='600'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
}
img:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale' ><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
}
The original filter uses an filterRes setting of 600 pixels, which looks ok at least on my display, it may look different on other displays, maybe especially on HI-DPI ones. Hover over the image to see the filter being applied without the filterRes attribute being set.
Depending on your use case this might be a workaround for you.
To me this looks like a bug in Firefox (you may want to file a bug report). According to the specs, the user-agent is responsible for calculating values that look good on the output device in case they weren't set, so maybe that's where Firefox goes wrong, not sure.

CSS3 grayscale filter looks different on different images

I have 3 icons of FCB, twitter and RSS and I want them to be grayscale but on hover they should change to color version. It is working great but these 3 images looks a bit different in grayscale. Is there a way to make them looks the same?
This is my code for grayscale:
img.grayscale{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray;
-webkit-filter: grayscale(1);
}
RSS and twitter looks almost the same but FCB icon is a lot darker. I think that the only way is to play with grayscale percentage. Is there any other solution?
You can add a class of fb on the fb image and set
img.fb {
opacity: 0.7;
}
This will give the illusion of making the image more light.
Here is the jsfiddle

Resources