css-filters

Firefox: How to Grayscale an Entire Page without breaking fixed-positioned elements?

由 泪湿孤枕 提交于 2020-07-09 17:13:22
问题 Why do CSS filters, (ones that seem to have nothing to do with size/positioning) break your ability to give descendant-elements a fixed position? In addition to answering this question, please suggest a solution that addresses the problem I showcase below. The CSS and HTML below simply produces a little red box in the center of the viewport: #box { background: red; color: white; display: inline-block; border: solid #333333 10px; padding: 5px; position: fixed; top: 50%; left: 50%; transform:

black and white text based on background image with css

由 偶尔善良 提交于 2020-06-12 04:13:20
问题 I am trying to achieve this effect of a black and white text on a bi-colored header which is always white on a side, and with a background image on the other side (of different colors). this is the css used for this example, which works only because the image has a solid black background: .text { position: relative; color: rgb(255, 255, 255); mix-blend-mode: difference; text-transform: uppercase; font-size: 60px; } this doesn't work if the background image doesn't have a solid black

black and white text based on background image with css

由 梦想与她 提交于 2020-06-12 04:12:23
问题 I am trying to achieve this effect of a black and white text on a bi-colored header which is always white on a side, and with a background image on the other side (of different colors). this is the css used for this example, which works only because the image has a solid black background: .text { position: relative; color: rgb(255, 255, 255); mix-blend-mode: difference; text-transform: uppercase; font-size: 60px; } this doesn't work if the background image doesn't have a solid black

CSS grayscale filter and background-blend-mode at same time?

由 心不动则不痛 提交于 2020-05-11 04:15:12
问题 I'm trying to treat an image the same way it is in a photoshop file - desaturating the image to grayscale, and then applying a color overlay with a multiply blend mode. To this end, I am styling a CSS background image with... .someclass { /* grayscale */ -webkit-filter: grayscale(1); filter: gray; filter: grayscale(1); filter: url(desaturate.svg#greyscale); /* multiply */ background-color: rgba(190, 50, 50, 0.65); background-blend-mode: multiply; } The problem with this is that the grayscale

Position Fixed not working when CSS Filters applied on same element in Microsoft Edge

由 自闭症网瘾萝莉.ら 提交于 2020-02-03 03:46:12
问题 I am testing this on Edge 20.10240.16384.0 I have an element whose position is fixed and has CSS Filters applied to it. This works great in all browsers except Microsoft Edge, where the position of the element doesn't remain fixed. This issue is directly related to CSS3 Filters as removing them makes the position fixed work correctly Here is a basic example of this. It works correctly (aka the fixed background remains fixed) on browsers other than Microsoft Edge. <!DOCTYPE html> <html> <head>

Why is my CSS filter transition applying early in Safari?

由 a 夏天 提交于 2020-02-02 12:51:07
问题 I am trying to use css transition for filter and am getting some weird results in Safari, but works as expected in chrome. My CSS where I set the initial filter and transition (working codepen link below): transform: translate3d(-50%,-50%,0) scale(1); filter: blur(0px) contrast(1.1) sepia(0) saturate(1); transition: transform 1s ease-in-out 1s, filter 1s ease-in-out 1s; Safari is applying the filter as soon as the class with different filter atributes is added, but then after the transition

Add Class on ready, remove class on hover

由 大城市里の小女人 提交于 2020-01-17 05:46:13
问题 I'm creating my portfolio website. I'm looking to add class on document ready, and remove/change that class to a different class on hover. I'm using lightgallery & CSS gram filters to my images on load and hover. $(document).ready(function() { $("#gallery li a").load(function(){ $($(this).find("img")[0]).addClass("inkwell"); }); $("#gallery li a").hover(function(){ $($(this).find("img")[0]).removeClass("inkwell").addClass("mayfair"); }); }); the jQuery code above didn't seem to work well.

Is it possible to make a blurred gradient shadow with CSS?

由 断了今生、忘了曾经 提交于 2020-01-13 06:38:23
问题 Here is a shadow: So I need this to be a shadow which appears on button hover. I know its css but I didn't manage to make any blur: background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%); border-radius: 100px; filter: blur(5px); So, two basic questions: Is it possible to make this blurred thing with CSS? If yes, is it possible to make it a button shadow? Or how else can I solve this? One thought was to just make a png with absolute positioning, which is hacky a bit

filter: blur not working on MS Edge

由 会有一股神秘感。 提交于 2019-12-29 07:32:10
问题 Microsoft Edge is not supporting filter: blur(); like it should. If I have an absolute positioned element with filter: blur(); , inputs that appear on top will go nuts, merging with the blur (fun to watch). Here's a Fiddle to show what happens. Works perfectly in Chrome and Firefox, but Edge turns into borderline epileptic. Just click the input and enjoy: https://jsfiddle.net/Cthulhu/3uz0Lpfz/2/ Here's a code example: <style> article { background: url(http://uzebox.org/wiki/images/1/19

How to apply filters on entire html without affecting fixed positioned elements in Firefox

由 两盒软妹~` 提交于 2019-12-24 18:47:41
问题 I am trying to apply a filter on the entire webpage for creating an inverted view of the page. The page has fixed-positioned elements (some buttons and block). So the easiest way is to invert the color of each element on the webpage, including fixed position buttons. To invert the colors I use the following css code: html { filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%); -webkit-filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%); } This works fine
订阅 css-filters