I have a very (relatively) complex style requirement for a component. Part of the complexity comes from the CSS box-shadow property. As we know, React Native does not offer this property. Instead, one has to make use of the four style properties shadowOffset, shadowRadius, shadowColor and shadowOpacity. For this component, I have four actual shadows, two of which have inset -- which, React Native does not support insets.
Here's the CSS snippet I'm aiming to implement:
background: #FFFFFF;
box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.07),
0px 8px 16px rgba(0, 0, 0, 0.07),
inset 0px 2px 4px #FFFFFF,
inset 0px -2px 4px rgba(0, 0, 0, 0.25);
border-radius: 16px;
I'm at a total loss. I've tried more than a few things. I've tried using the out-of-the-box shadow* properties with React Native, and trying to recreate an inset like this fella did. I've tried using styled components. I even tried to hack together using SVG (this requirement is coming from Figma which offers an SVG).
Any ideas on how I can get this to work?
I'm thinking maybe my only option is to bridge to a native iOS component, but I've never bridged that gap and it seems intimidating.
<LinearGradient
style={styles.gradientButton}
colors={['#040406', '#040406', '#040406', '#444446']}
start={{ x: 0.48, y: 0.1 }}
end={{ x: 0.5, y: 0.6 }}
>
with background #777 works good
Related
I know this is a basic question and have asked several times. I read most of the questions and answers related to inline styling in Reactjs. But couldn't find what I was searching for or I couldn't understand what they have said as I am new to Reactjs.
I know inline styling can be implemented as an object like below.
<div className="card" style={{ width: 250, height: 50 }}>My card</div>
I am just curious how can I add a box-shadow with various values using the inline styling like above.
example
boxShadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
I know I can use a separate CSS file, but I just want to add only this box-shadow to a pre-defined bootstrap card.
I searched but couldn't find a proper answer. Just want to know if this is possible and if so a method to do this.
Thank you.
Just quote them.
<div style={{
boxShadow: "rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px"
}} >My card</div>
My same css is used normally in a vuecli project, and the error report in a custom webpack project has no effect. What should I do?
It looks like your CSS loader doesn't support the space-separated syntax of rgb() (introduced in CSS Colors Level 4).
As a workaround, switch to the classic comma-separated syntax:
box-shadow: 0 2px 12px 0 rgb(0, 0, 0, 10%);
h1 {
box-shadow: 0 2px 12px 0 rgb(0, 0, 0, 10%);
}
<h1>Hello world</h1>
Adding Multiple box-shadows works partially. While the shadows appear on both the left and right sides of the box in all the browsers, it doesn't appear on the left side in MSEdge.
I have tried adding border-collapse: seperate, display: block and inline-block, background-color: rgba(255,255,255,1) but none of these seem to work. Any help is appreciated.
{
width: auto;
border: none;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
border-radius: 2px;
}
Shadows should appear on the left-side as well in MSEdge.
The issue here is with the pixel density in any testing environment (VirtualBox, browserstack, sauce labs etc.). The shadow is still present everywhere but it just doesn't appear in testing environments. Testing in an actual browser gives the desired output. Not sure about what is causing this but it is an issue with the image on any virtual machine.
I was trying to draw a small triangle (as the tail of a rectangular chat-bubble) in CSS. I managed to do that, but then I wanted to apply a box-shadow to the tail and the box. So, I have the following CSS for the tail:
#bubble::after {
content: "";
display: block;
position: absolute;
bottom: -22px;
left: 10px;
border-width: 22px 0 0 20px;
border-style: solid;
border-color: #fff transparent;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .6);
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .6);
}
Which renders this (Sorry; background is a bit blurry because of the zoom):
Notice how the box-shadow doesn't render alongside the diagonal part of the bubble's tail.
The desired effect I would like to achieve is:
This is a screenshot from inside Photoshop, so it might looks a bit different than the partial screenshot of the browser's portview (the shadow is supposed to be larger, I forgot to update the layer style after scaling the path).
How would I achieve that?
Thanks!
P.S: I am open to the thought of using a raster image or a SVG, although I'd prefer if I didn't have to.
I think that what you're trying to do is relevant to this previous post on SA: CSS Drop Shadow for CSS drawn arrow
I'm afraid that's not possible with CSS only. box-shadow applies to the element's box, with an image that's still a rectangle :)
See http://lineandpixel.com/blog/png-shadow for a write-up from another frustrated user.
You'll have to bite the bullet and use a raster image or SVG.
i've been reading and experimenting with conditional css to display the following css for IE 8.
box-shadow: 0 1px 1px inset, 0 0 40px rgba(0, 0, 0, 0.5) inset, 0 16px 0 rgba(255, 255, 255, 0.4) inset, 0 4px 5px rgba(0, 0, 0, 0.6);
I have been fiddling with gradient and offset but i can not find anything about inset without having to create additional elements.
is is possible to 3 insets and use rgba, as using the gradient start and end for ie was a standard gradient. If not i will happily use basic styling and drop the css3 styling, thanks
Nope, it is not supported; http://dimox.net/cross-browser-css3-box-shadow/... However, take in consideration your analytics data and see how many visitors are really using ie8, maybe it's only a small percentage, and it's not that much of a mis;)