Is there a pseudo selector for this item? I am talking about the milky blue rect that appears on elements being inspected. It is too obtrusive and I would like to change it to just an inset box-shadow with an animated hue-rotation.
I suspect it lives in the shadow dom somewhere, what techniques could be employed to sniff it out minesweeper style?
The context is from a chrome extension.
Related
There appears to be a bug in the behavior of backdrop-filter: blur() on both Chrome and FireFox browsers (at least on Mac OS). This problem is not present on Safari.
Video of bug
I have created a CodePen demo of this problem:
https://codepen.io/beefchimi/pen/vYjmQKO
Scenario
ElementA is a <img />.
ElementB is a <div /> that overlaps ElementA (via grid, or position, etc... exact layout doesn't appear to matter).
ElementB applies a backdrop-filter: blur(10px).
The parent wrapper of these elements has an opacity value below 1.
Problem
The moment the shared parent of these elements drops its opacity, the backdrop-filter: blur() effect does not render correctly. It still applies a blur... but that blur appears to lose intensity the closer it gets to the edge of the underlying element. In other words, the edge of the underlying visuals appear crisp, while further from the edge becomes blurry.
This problem goes away the moment you apply a fully-opaque background style to the parent.
Requirements
In my specific use-case, I cannot apply a background style to the parent. The underlying page uses a background-image that I do not want to conceal.
Questions
Is there any clever trick to getting this blur effect to work as desired?
Have I got something obvious wrong in my CodePen demo?
Is this a legitimate bug in the implementation of backdrop-filter: blur(), and should it be reported to all affected browsers?
Thank you in advance for any assistance.
As shown in my jsfiddle demo, the button background-color without any styling looks consistent across all browsers - white.
However as soon as border is added, the background-color becomes inconsistent across browsers(I tested on macOS 10.12.6):
white in chrome 62.0.3202.94, which is expected
light grey in FF 57.0, which is slightly unexpected
dark grey in safari 11.0.1, which is highly unexpected
Can someone explain to me why? Is this a bug of safari?
That's because once border is specified, the native appearance of <button> element (the one with operating system's look & feel) is disabled, and a completely new default look & feel would be applied.
Unfortunately, different browsers have different interpretation on what this "new look & feel" should be -- Safari choose to define background of button as "dark grey" for this "new look & feel", it's not a bug.
According to an announcement of WebKit in 2005:
Specifying the background/border will result in the Aqua appearance being disabled and a more platform-neutral look being used.
Thus, border property can be used like a switch -- a switch that can convert button between 2 appearance modes: one is operating system level button which is stereoscopic but hard to customize. Another is platform-neutral, simple but easy to apply CSS.
Actually, this is what Bootstrap did to customize its button styles. In Bootstrap's _buttons.scss source code, the .btn button class has a border property as 1px solid transparent; -- an invisible border which will trigger the platform-neutral mode for further CSS rules.
In Chrome if you right click an element and select "Inspect Element" the developer tools will open and your element will be highlighted in a blue color. I'd like to reproduce that with my own CSS style. Here's an example:
Notice that it is actually making the foreground color of the element a transparent blue. Naively changing the background-color doesn't work nearly as well since you'd also have to change the font color and you wouldn't be able to highlight images.
At the moment the only way that I can figure out how to reproduce the foreground mask effect is by creating an absolute positioned element on top of the original with the exact same dimensions. This seems a bit clunky and I wonder if there's some way to do this purely in CSS?
I'm using CSS3 PIE to do border-radius, drop shadow and transparency effects to make the transparent area around the main of the page. I'm trying to make it look like this:
http://www.palosverdes.com/rpv/re-design/JANUARY-2012/C-10.html
Here's my current version:
http://www.palosverdes.com/rpv2012/indexforie7.cfm
This renders the effects I want in the modern browsers, but in IE7 the drop shadow seems to be filling the area that should be transparent. Here's a screenshot:
imgur.com/lD0JG (I still can only post two hyperlinks, sorry)
Any ideas what might be causing the problem?
It turns out that css3pie doesn't support drop-shadow on items that are not opaque (it shows through). Here's the relevant link: css3pie.com/documentation/supported-css3-features/#box-shadow As far as I can tell, this problem can only be resolved in ie7/8 by using a png-based drop shadow with some css or adding the drop-shadow as part of the background-image for the div.
For things like menubars and headers, a background color is nice.
But a background color that gracefully transitions from say Blue to White is even nicer.
I know this can be done by making a 1-pixel wide, X-pixel tall image file containing the desired fade and repeating it across the div, but does CSS have native support to just define colors and be done with it?
Can any other language handle this?
With CSS3, you can do that. However, CSS3 is not widely supported through browsers, so only the most recent of browsers (and not even all of them) will be able to display the gradient. Unless you're only interested in working with those browsers that can do it, you're going to have to stick with the 1px background image.
http://www.quirksmode.org/css/contents.html
http://www.w3.org/Style/CSS/current-work#CSS3
You mean a gradient?
Webkit browsers(Chrome and Safari), and apparently FF 3.6 now support CSS gradients:
see this link
According to the article, even IE has some proprietory CSS gradient support, I don't know how well that works though. You should always have a fallback to solid color though.