Menu
For example, how to accomplish
box-shadow: 2px 2px 4px rgba(0, 0, 0, .05), -2px -2px 4px rgba(0, 0, 0, .05);
in react native stylesheet?
931
Multiple shadows can be made using the same code that is used for making single shadow. To make these multiple shadows we just need to define multiple shadow value and seperate them with a comma. Then we'll position the shadows using different values for x-offset and y-offset values.
Box shadows can use commas to have multiple effects, just like with background images (in CSS3). While you can apply multiple shadows, applying inset shadows, I've found, is a special case.
To add more than one shadow to the text, you can add a comma-separated list of shadows.
In CSS, shadows on the boxes of elements are created using the box-shadow property (if you want to add a shadow to the text itself, you need text-shadow ). The box-shadow property takes a number of values: The offset on the x-axis. The offset on the y-axis.
I don't think you can, but the hack of wrapping your component with another just for another layer of shadow is the worst hack of the century either:
<div style={{ boxShadow: "2px 2px 4px rgba(0, 0, 0, .05)"}}>
<div style={{ boxShadow: "-2px -2px 4px rgba(0, 0, 0, .05)"}}>
{ content }
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
