when I add box-shadow to my code something strange happens (only in Chrome browser). This bug disappears after a while, but whenever I do something on site it appears randomly again:
.glass{
background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border: 1px solid rgba( 255, 255, 255, 0.18 );
So I've tried to remove the box-shadow and replace it with filter: drop-shadow like that:
background: rgba( 255, 255, 255, 0.25 );
filter: drop-shadow(0 8px 12px rgba(31, 38, 135, 0.37));
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border: 1px solid rgba( 255, 255, 255, 0.18 );
But visually it looks worse for my design, because the glass panel is getting a lot darker.
is it possible to somehow fix box-shadow to work properly in chrome or make it look similar to the box-shadow version with drop-shadow? I'm out of ideas how to make it.
Related
Is there a way to convert a given css box-shadow with inset to svg shadow?
For example, I have this box-shadow:
box-shadow: inset -1px -2px 0px rgba(255, 255, 255, 0.50),
inset 1px 1px 4px rgba(255, 22, 64, 0.16);
}
I understand that to set the shadow of svg you would have to use drop-shadow:
filter: drop-shadow(-1px -2px 0px rgba(255, 255, 255, 0.50));
This of course doesn't look the same because it's missing the inset (and the second inset)
Is there a way to convert that box shadow, without creating a new one from scratch?
I wrote CSS to show grid patterns like this:
background-image {
repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.43) 0px 1px, transparent 1px 20px ),
repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.43) 0px 1px, transparent 1px 20px )
}
But after production build on Next.js, this was replaced with:
background-image {
repeating-linear-gradient(0deg,hsla(0,0%,100%,.43) 1px,transparent 1px 20px),
repeating-linear-gradient(90deg,hsla(0,0%,100%,.43) 1px,transparent 1px 20px)
}
And the grid pattern doesn't show on the page.
Is there any solution to disable this convert?
Solved to change deg to to of gradient syntax. Still use hsla but the results are same.
background-image: repeating-linear-gradient(
to bottom,
rgba(255, 255, 255, 0.43) 0px 1px,
transparent 1px 20px
),
repeating-linear-gradient(
to left,
rgba(255, 255, 255, 0.43) 0px 1px,
transparent 1px 20px
);
Is it possible to generate a gradient similar to this style of color picker? Where the full saturated, 50% brightness values are on the outside, and towards the inside it goes to 100% brightness.
https://i.imgur.com/UlssX5h.jpg
Here you go.
html, body {margin:0; width:100%; height:100%; background: black}
.colorpicker {
width:100vmin; height:100vmin; margin:0 auto;
border-radius:100%;
background:
linear-gradient(0deg, #00F, rgba(255, 255,255,0), rgba(255, 255,255,0))
, linear-gradient(60deg, #0FF, rgba(255, 255,255,0), rgba(255, 255,255,0))
, linear-gradient(120deg, #0F0, rgba(255, 255,255,0), rgba(255, 255,255,0))
, linear-gradient(180deg, #FF0, rgba(255, 255,255,0), rgba(255, 255,255,0))
, linear-gradient(240deg, #F00, rgba(255, 255,255,0), rgba(255, 255,255,0))
, #FFF linear-gradient(300deg, #F0F, rgba(255, 255,255,0), rgba(255, 255,255,0))
}
<div class="colorpicker"></div>
The Menu for my site is acting odd in IE now, where it was fine before. I moved the files for the site to a company network share and now it will not display the CSS properly. The CSS should add border radius/rounded edges, it z-indexes so it goes on top other divs, etc, and after the move it does not do this anymore. If I hit f12 in IE and select IE10 - not IE10 compatibility - it does load fine.
Is there something I need to fix in my CSS?
height:41px;
background: #fff;
background-color: #000000;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
IE10 compatibility mode emulates IE7, which supports almost none of the used css3 properties. Unless you start using IE hacks like this one for border-radius, they will not render. (Both box-shadow and border-radius are IE9+)
This is why your site should follow the ideals of graceful-degradation. You should debug so positioning and stacking (z-index) work as they are designed, but minor eye candy may go out the window.
As expected this code doesn't work in IE 8
background-color: rgba(255, 255, 255, 1);
Is there any fix for IE.Please let me know.
Many thanks,
R
Try setting a fallback background-color property like so:
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 1);
or
background-color: #fff;
background-color: rgba(255, 255, 255, 1);
Try
background-color: rgba(255, 255, 255, 1);
*background-color: #FFF;
Also, you are using opacity 1, do you really need to use rgba here?
Some help:
http://caniuse.com/#search=rgba
For IE, if you want equivalent of background-color:rgba(....)
use this :
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);
This is black color with opacity (the two first digits)
Here one generator for that:
http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/