I'm trying to get a smart looking modal popup by using a blur filter e.g. -webkit-filter: blur(10px);. This works great when I apply the blur to a specific element like this:
body.modal_open #main { -webkit-filter: blur(10px); }
However, if my modal popup is within #main, the filter is applied to that element too, as you'd expect.
My question is, would there be a way to tell the browser not to apply the filter to a specific element? I tried to add:
body.modal_open .modal_window { -webkit-filter: blur(0px); }
But that didn't work. Is there a way to do this based on the z-index of an element, or something similar? I can't find any CSS to select elements based on z-index, so I'm guessing that's not possible.
Is the only option to bring all the modal windows out of the #main container? Or are there any more ideas out there?
Many thanks in advance!
For anybody looking for an answer to this, I never found a way to use z-index or anything similar to apply the filter: blur to specific layers. However, by using backdrop filter:
-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
I managed to achieve the desired effect. Note that this method is only supported in Safari and Chrome at the moment, but hopefully more browsers will support this in the coming months and years, because it looks pretty great!
Related
I faced the issue with low fps while using backdrop-filter and transition on the same component.
.modal-background {
// some styles
backdrop-filter: blur(2px)
transition: all .15s linear
}
As simple as that. The animation is glitchy :( But if I comment out backdrop-filter line, things are getting better.
You can achieve a different but comparable effect by instead animating the backdrop-filter's opacity() like so:
.bg {
transition: backdrop-filter 0.2s;
backdrop-filter: blur(4px) opacity(0);
}
.bg.show {
backdrop-filter: blur(4px) opacity(1);
}
I have seen some minor graphical glitches when doing this in Chromium. But on the plus side, I've also found this approach to be much more performant than the alternative suggestion of animating a (non-backdrop) filter property's blur(). There's a trade-off to be made between responsiveness and graphical accuracy.
I believe, it's a very new property and can't be animated properly yet. You can always restructure something to make work this one instead: filter: blur(7px);
As Roman mentions
its a very new property. Until it got optimized, you have to look for alternatives. More specifically on "filter: blur(6px)":
<div id="root"/>
<div id="modal"/>
If you are trying to apply a backdrop on modal, don't. Go put some listeners on parent (#root) element checks if it has that child modal, apply filter on "#root" and enjoy.
I am looking to write image filter declarations in IE syntax and was wondering if anyone could recommend one of those css generators that also writes to IE in addition to web-kit and filter?
In any case, the following are the properties that I am looking to replicate in IE:
filter: grayscale(1) contrast(1) brightness(1);
mix-blend-mode: luminosity;
opacity:.5;
filter: invert(42%) sepia(39%) saturate(2795%) hue-rotate(350deg)
brightness(100%) contrast(90%);
Any help translating any of these properties or directing me to literature would be appreciated.
You can use this autoprefixer by ymatuhin for a quick and easy way to prefix your code.
There is also a good article by Prefixr on all of the vendor prefixes and why they are used.
grayscale don't work with IE
You can look this page
I think you can add, just for IE, a div in absolute position covering element with background with opacity.
How can I use the filter brightness - invert in internet explorer.
This works fine on chrome and firefox but not on interet explorer
.imgs {
-webkit-filter: brightness(0) invert(1);
filter : brightness(0) invert(1);
}
Internet explorer does not support css filter.
However, since you're not doing anything fancy with this filters, just making the images white (I'm guessing your're hiding them with js by adding that class?) you can use a different aproach, like using a container around those images with a white background and just set visibility: hidden on the images.
I'm currently redesigning one of my sites. I using the CSS blur filter:
.blur {
blur(5px);
-webkit-filter: blur(5px);
}
and some CSS animation
.animate-blur {
transition: 0.45s all ease-out;
}
to animate the turn on and off these blur styles.
The turning is done by this script:
jQuery(function(){
jQuery("article").hover(function(){
jQuery("article").not(this).addClass("blur");
},function(){
jQuery("article").removeClass("blur");
})
jQuery(".sitename").hover(function(){
jQuery("article").addClass("blur");
jQuery("#background-top,#background-bottom").removeClass("blur");
},function(){
jQuery("article").removeClass("blur");
jQuery("#background-top,#background-bottom").addClass("blur");
})
});
That worked all well until I upgraded to Mavericks and the new Safari. Now sometimes the articles completely disappear or there is a strange shadow behind the text.
So my question is. (Can you reproduce this? And...) Does anybody know if I can fix this?
As StopLogic mentioned, the will-change CSS property fixes this bug. Use will-change: filter on the blurred element.
In addition to the solutions proposed by the author, the css property "will-change" can help you. It allows you to attract additional system resources to play the animation.
I resolved my problem, although I'm not quite sure how I did. I made some changes to the mark up (I'm not sure which of these solved the problem):
no longer using the bootstrap grid, now no position style is applied to the parent div
added overflow: hidden; to the parent div
removed a clearfix out of the affected divs
floating the sidebar (even I don't think this is relevant)
...in the hope this will probably help somebody.
How can I achieve a responsive button that contains a background-image.
It is something like http://codecanyon.net/item/css3-responsive-pagination/full_screen_preview/4266559
However, in my case the "prev" and "next" button is a really long text and in the center is just "title" of the page.
Having a hard time scaling the background-image to make sure it fits into the scaled button and works on IE.
Has anyone ever done this before?
Is it even possible?
Thanks,
Tee
If your target browser support CSS3, simply use background-size
.button
{
background:url(img_flwr.gif);
background-size:contain contain;
background-repeat:no-repeat;
}
Edit:
As you need to support IE8 and below,
you might try:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../background.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../background.png', sizingMethod='scale')";
or dl ie-css3.htc and:
behavior: url(ie-css3.htc);