IE11 css filter brightness - css

Internet Explorer does not respect the css property filter: brightness(100);. Following this tutorial I have also tried using ms-filter: brightness(1); but that did not work either. Is there a work-around?
Not sure if this makes a difference, but I am applying the filter onto a background image svg.
https://codepen.io/anon/pen/Ovoxqg (Works in Chrome, breaks in IE11. You should see a gray heart and white heart.)
<div class="icon"></div>
<br><br><br>
<div class="icon brightness"></div>
body {
background-color: aqua;
}
.icon {
width: 25px;
height: 25px;
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M12%2021.638h-.014C9.403%2021.59%201.95%2014.856%201.95%208.478c0-3.064%202.525-5.754%205.403-5.754%202.29%200%203.83%201.58%204.646%202.73.813-1.148%202.353-2.73%204.644-2.73%202.88%200%205.404%202.69%205.404%205.755%200%206.375-7.454%2013.11-10.037%2013.156H12zM7.354%204.225c-2.08%200-3.903%201.988-3.903%204.255%200%205.74%207.035%2011.596%208.55%2011.658%201.52-.062%208.55-5.917%208.55-11.658%200-2.267-1.822-4.255-3.902-4.255-2.528%200-3.94%202.936-3.952%202.965-.23.562-1.156.562-1.387%200-.015-.03-1.426-2.965-3.955-2.965z%22%2F%3E%3C%2Fsvg%3E);
}
.brightness {
filter: brightness(100);
-ms-filter: brightness(1);
}

Related

How to improve the contrast between background image and the text on it with css? [duplicate]

I want to decrease image brightness in CSS. I searched a lot but all I've got is about how to change the opacity, but that makes the image more bright.
can anyone help me ?
The feature you're looking for is filter. It is capable of doing a range of image effects, including brightness:
#myimage {
filter: brightness(50%);
}
You can find a helpful article about it here: http://www.html5rocks.com/en/tutorials/filters/understanding-css/
An another: http://davidwalsh.name/css-filters
And most importantly, the W3C specs: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
Note this is something that's only very recently coming into CSS as a feature. It is available, but a large number of browsers out there won't support it yet, and those that do support it will require a vendor prefix (ie -webkit-filter:, -moz-filter, etc).
It is also possible to do filter effects like this using SVG. SVG support for these effects is well established and widely supported (the CSS filter specs have been taken from the existing SVG specs)
Also note that this is not to be confused with the proprietary filter style available in old versions of IE (although I can predict a problem with the namespace clash when the new style drops its vendor prefix).
If none of that works for you, you could still use the existing opacity feature, but not the way you're thinking: simply create a new element with a solid dark colour, place it on top of your image, and fade it out using opacity. The effect will be of the image behind being darkened.
Finally you can check the browser support of filter here.
OP wants to decrease brightness, not increase it. Opacity makes the image look brighter, not darker.
You can do this by overlaying a black div over the image and setting the opacity of that div.
<style>
#container {
position: relative;
}
div.overlay {
opacity: .9;
background-color: black;
position: absolute;
left: 0; top: 0; height: 256px; width: 256px;
}
</style>
Normal:<br />
<img src="http://i.imgur.com/G8eyr.png">
<br />
Decreased brightness:<br />
<div id="container">
<div class="overlay"></div>
<img src="http://i.imgur.com/G8eyr.png">
</div>
DEMO
In short, place black behind the image, and lower the opactiy. You can do this by wrapping the image within a div, and then lowering the opacity of the image.
For example:
<!DOCTYPE html>
<style>
.img-wrap {
background: black;
display: inline-block;
line-height: 0;
}
.img-wrap > img {
opacity: 0.8;
}
</style>
<div class="img-wrap">
<img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" />
</div>
Here is a JSFiddle.
You could use:
filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
With CSS3 we can easily adjust an image. But remember this does not change the image. It only displays the adjusted image.
See the following code for more details.
To make an image gray:
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
}
To give a sepia look:
img {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
}
To adjust brightness:
img {
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
}
To adjust contrast:
img {
-webkit-filter: contrast(200%);
-moz-filter: contrast(200%);
}
To Blur an image:
img {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
}
I found this today. It really helped me. http://www.propra.nl/playground/css_filters/
All you need is to add this to your css style.:
div {-webkit-filter: brightness(57%)}
If you have a background-image, you can do this : Set a rgba() gradient on the background-image.
.img_container {
float: left;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
border : 1px solid #fff;
}
.image_original {
background: url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}
.image_brighness {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* the gradient on top, adjust color and opacity to your taste */
url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}
.img_container p {
color: #fff;
font-size: 28px;
}
<div class="img_container image_original">
<p>normal</p>
</div>
<div class="img_container image_brighness ">
<p>less brightness</p>
</div>
It's obvious that all you need to do is this
<img src="https://rb.gy/njdqof" class="IMG">
CSS follows
/*if you go lower than 100% the lighting goes dark and above 100% your lighting is brighter*/
.IMG {
filter: brightness(20%);
}
You can use css filters, below and example for web-kit. please look at this example: http://jsfiddle.net/m9sjdbx6/4/
img { -webkit-filter: brightness(0.2);}
-webkit-filter: brightness(0.50);
I've got this cool solution:
https://jsfiddle.net/yLcd5z0h/
try this if you need to convert black image into white:
.classname{
filter: brightness(0) invert(1);
}
Like
.classname
{
opacity: 0.5;
}

Is it possible to skew the edge of a div without using CSS transform?

Let's say I want to make a skewed-edge div like this one,
As this JS Bin or this question demonstrate, it shouldn't be difficult. However, those two use CSS transform to do the trick. Is it possible to skew the edge without CSS transform? It would be useful to support IE8 without using polyfills, for example.
IE8 is suppose to be able to use matrix filter , so transform with a fallback for IE should do :
.skew {
display:table;
margin:auto;
transform:skew(0,5deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0.08748866352592415, M22=1, SizingMethod='auto expand')";
overflow:hidden;
}
.skew div {
margin-bottom:-40px;
margin-top:30px;
transform:skew(0,-5deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-0.08748866352592455, M22=1, SizingMethod='auto expand')";
}
img {
display:block;
}
<div class="skew">
<div>
<img src="http://lorempixel.com/600/400" />
</div>
</div>
Note, -ms-filter is to be tested in a real IE8 to make test efficient. Load this page into a genuine IE8 to test and run snippet or dowload the zip file from : http://codepen.io/gc-nomade/share/zip/LZpwwy/
a generator that can be helpfull : http://www.useragentman.com/IETransformsTranslator/
You can achieve this by creating a triangle using borders if you create an element with a very wide bottom border:
HTML
<div id="container">
<div id="mask">
</div>
</div>
CSS
#container {
position: relative;
width: 100%;
height: 25em;
overflow: hidden;
...
}
#mask {
/* position the element on top */
position: absolute;
width: 0;
height: 0;
bottom: 0;
left: 0;
z-index: 1;
/* create a triangle using borders */
border-style: solid;
border-color: YOUR_BACKGROUND_COLOUR transparent;
/* A fallback for browsers that don't support vw */
border-width: 0 2560px 5em 0;
/* make the border take the full width of the screen: http://caniuse.com/#feat=viewport-units */
border-width: 0 100vw 10em 0;
}
DEMO
http://codepen.io/Godwin/pen/PzPMBQ?editors=1100
However, like #kthornbloom said, unless you absolutely need to show a skew, it would be best practice to just let IE8 show a rectangle instead. You'll have more success making the page dependably responsive if you use transforms.

background-size in IE not working

hi i have looked to some questions here which have same subject
as here but didnt understand how he fixed it with html as he said.
and here
but didnt understand how to implement it to work ,
anyway i have tried mine to test it but it doesnt seem to work.
<style>
.foo {
font-size : 14px ;
background-size: 832px 578px;
background-image: url("al0-2.png");
background-repeat: no-repeat;
width: 831px;
height: 590px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="al0-2.png",
sizingMethod="scale");
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='al0-2.png',
sizingMethod='scale')";
}
</style>
any help to fix this .
im wanting to let background-size works good in all IE also as FF do
EDIT>
my html code
<div class="foo" ></div>
I made this fiddle for you to experiment.
It works nicely in ie7/ff.
Although, note that in IE7, there will be 2 backgrounds : 1 from the background and 1 from the filter. You should remove the background one in someway (exemple : conditionnal comments).
In your code, if no image are displayed, maybe your image links are broken.
fiddle css :
#foo {
border:2px solid red;
font-size : 14px ;
background-size: 832px 578px;
background-image: url('/img/logo.png');
background-repeat: no-repeat;
width: 831px;
height: 590px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='/img/logo.png',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='/img/logo.png',
sizingMethod='scale')";
}

How to Decrease Image Brightness in CSS

I want to decrease image brightness in CSS. I searched a lot but all I've got is about how to change the opacity, but that makes the image more bright.
can anyone help me ?
The feature you're looking for is filter. It is capable of doing a range of image effects, including brightness:
#myimage {
filter: brightness(50%);
}
You can find a helpful article about it here: http://www.html5rocks.com/en/tutorials/filters/understanding-css/
An another: http://davidwalsh.name/css-filters
And most importantly, the W3C specs: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
Note this is something that's only very recently coming into CSS as a feature. It is available, but a large number of browsers out there won't support it yet, and those that do support it will require a vendor prefix (ie -webkit-filter:, -moz-filter, etc).
It is also possible to do filter effects like this using SVG. SVG support for these effects is well established and widely supported (the CSS filter specs have been taken from the existing SVG specs)
Also note that this is not to be confused with the proprietary filter style available in old versions of IE (although I can predict a problem with the namespace clash when the new style drops its vendor prefix).
If none of that works for you, you could still use the existing opacity feature, but not the way you're thinking: simply create a new element with a solid dark colour, place it on top of your image, and fade it out using opacity. The effect will be of the image behind being darkened.
Finally you can check the browser support of filter here.
OP wants to decrease brightness, not increase it. Opacity makes the image look brighter, not darker.
You can do this by overlaying a black div over the image and setting the opacity of that div.
<style>
#container {
position: relative;
}
div.overlay {
opacity: .9;
background-color: black;
position: absolute;
left: 0; top: 0; height: 256px; width: 256px;
}
</style>
Normal:<br />
<img src="http://i.imgur.com/G8eyr.png">
<br />
Decreased brightness:<br />
<div id="container">
<div class="overlay"></div>
<img src="http://i.imgur.com/G8eyr.png">
</div>
DEMO
In short, place black behind the image, and lower the opactiy. You can do this by wrapping the image within a div, and then lowering the opacity of the image.
For example:
<!DOCTYPE html>
<style>
.img-wrap {
background: black;
display: inline-block;
line-height: 0;
}
.img-wrap > img {
opacity: 0.8;
}
</style>
<div class="img-wrap">
<img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" />
</div>
Here is a JSFiddle.
You could use:
filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
With CSS3 we can easily adjust an image. But remember this does not change the image. It only displays the adjusted image.
See the following code for more details.
To make an image gray:
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
}
To give a sepia look:
img {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
}
To adjust brightness:
img {
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
}
To adjust contrast:
img {
-webkit-filter: contrast(200%);
-moz-filter: contrast(200%);
}
To Blur an image:
img {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
}
I found this today. It really helped me. http://www.propra.nl/playground/css_filters/
All you need is to add this to your css style.:
div {-webkit-filter: brightness(57%)}
If you have a background-image, you can do this : Set a rgba() gradient on the background-image.
.img_container {
float: left;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
border : 1px solid #fff;
}
.image_original {
background: url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}
.image_brighness {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* the gradient on top, adjust color and opacity to your taste */
url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}
.img_container p {
color: #fff;
font-size: 28px;
}
<div class="img_container image_original">
<p>normal</p>
</div>
<div class="img_container image_brighness ">
<p>less brightness</p>
</div>
It's obvious that all you need to do is this
<img src="https://rb.gy/njdqof" class="IMG">
CSS follows
/*if you go lower than 100% the lighting goes dark and above 100% your lighting is brighter*/
.IMG {
filter: brightness(20%);
}
You can use css filters, below and example for web-kit. please look at this example: http://jsfiddle.net/m9sjdbx6/4/
img { -webkit-filter: brightness(0.2);}
-webkit-filter: brightness(0.50);
I've got this cool solution:
https://jsfiddle.net/yLcd5z0h/
try this if you need to convert black image into white:
.classname{
filter: brightness(0) invert(1);
}
Like
.classname
{
opacity: 0.5;
}

CSS: Styling visited images cross browser way / cross browser opacity

I want to use the CSS visited functionality in the browser to style a clicked image:
CSS:
.gridview a.plusminus:visited img
{
/* from http://my.opera.com/BleedingHeart/blog/2007/04/29/highlighting-visited-images-using-css */
background: transparent !important;
opacity: 0.2 !important;
}
HTML:
<a class="plusminus" href="#12345" onclick="/* code to exand a panel*/" onfocus="this.blur();">
<img title="Expandera" src="img/grid_plus.gif" width="14" height="14"/>
</a>
This works fine in Firefox 3.5.
But for i.e. Explorer the opacity/transparent trick don't work. Is there a way that I can do this cross-browser?
Also explorer seems not to remember "#12345" type of hrefs for visited links when reloading pages. Any way to fix that?
for opacity:
.gridview a.plusminus:visited img {
-moz-opacity: 0.2; filter:alpha(opacity=20); opacity: 0.2;
}
sorry don't know about remembering of anchor refs (but as I know they should work)
.gridview a.plusminus:visited img {
opacity: 0.2;
-ms-filter: "alpha(opacity=20)"; /* IE 8 */
filter: alpha(opacity=20); /* IE 4-7 */
}

Resources