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?
Related
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.
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
);
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.
I'm trying to get a similar effect to the one here (in this case on focus in a form field). However I want it around a small image, and to occur on hover. Obviously I can create two sprites, and in CSS replace the image with the glow image on hover, but this would not include the animation. So currently I have:
img.glow {
-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
}
img.glow:hover {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
This works, but the problem is that my image has rounded corners and the glow effect occurs around the the image as a whole (i.e. it treats the image as a square, and leaves small white corners within the glow, whereas I want the glow to hug the edges of the image). The image is a transparent PNG. Is what I want to do possible?
Just add a border-radius property, so that your img element has nice round corners. The shadows will follow the shape of the element.
I'm using Twitter Bootstrap 2.0 and I was wondering how to change the select boxes so they have the same awesome blue glow that text boxes and other form elements do.
Right now all of the form elements I have is blue when focus is put on them, except the select boxes. I noticed that even on http://twitter.github.com/bootstrap/base-css.html#forms when I put my focus on the select boxes they glow orange, so maybe it's not built in yet. Has anyone else had to deal with this, or know how to fix it? Thank you!
1) Add following lines to bootstrap.css file
.shadow_select {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.shadow_select:focus {
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
}
2) Then apply shadow_select class for select tags
<select class="input-small shadow_select">
<option>AAAAA</option>
<option>BBBBB</option>
<option>CCCCC</option>
</select>
This works on all other browsers except webkit. for webkit wrap select using div. Then use jquery to detect focus event on select and apply CSS shadow class to that div. (Because focus event can't be applied to a div
Building on Sachindra's this jsfiddle illustrates how to do this in webkit (Chrome, Safari) browsers.
Incidentally Sachindra's class attribute in point 2 is spelled incorrectly, which threw me for a bit (shadow_slect -> shadow_select)
If you're using Compass you can grab the these mixins https://gist.github.com/2919841
and then use them as like so:
#import "compass-bootstrap-box-shadow"
shadow_select
#include bs-box-shadow
&:focus, &:hover
#include bs-box-shadow-focus
I'm brand new to Sass and Compass, so if you have any improvements please don't hesitate to let me know.
If you are using Sachindra's answer above, it might not work correctly in webkit or other modern browsers.
For that you just need to include these two tags in the " .shadow-select:focus " element. This worked for me.
border-style: solid;
border-width: 1px;