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>
Related
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
I recently added the following code to one of my text elements to add a cool underline to it:
border-bottom: 2px solid transparent!important;
border-image: linear-gradient(0.25turn, rgb(0, 0, 0), rgb(255, 0, 0), rgb(255, 204, 0));
border-image-slice: 1;
width: fit-content!important;
It looks like this on chrome and Android:
live picture here
However, on iOS devices the border completely surrounds the whole text and looks like this:
iOS live picture here
I tried some -webkit and -moz-fit-content type of things but since I am not actively in programming I did not get it to work.
I hope someone can help with this problem and I appreciate your solutions!
Best regards!
In your border-image-slice, give it precision and it will be ok :)
I've tested it and it works on Safari v 13.1.2
Aurélie
p {
border-bottom: 2px solid transparent!important;
border-image: linear-gradient(0.25turn, rgb(0, 0, 0), rgb(255, 0, 0), rgb(255, 204, 0));
border-image-slice: 0 0 1 0;
width: fit-content!important;
}
<p>Biscuit cake sweet roll. Carrot cake caramels</p>
I need to create gradient that will be in the bootom of element and look like this
I have tried like this
.div-with-shadow {
padding-bottom: 1.4285714286rem;
border-bottom: solid 0.0714285714rem rgba(0, 0, 143, 0.05);
box-shadow: inset 0 -3.5714285714rem 3.5714285714rem -3.5714285714rem #e9e9fd;
}
<div class="div-with-shadow"></div>
But it does not look the same, this has to be some kind of gradient and not border, anyone can help me, thanks
I'm working on a website, where I use image sprites on a button. In every other browser I've tried, except for IE11, the text on my sprite is crisp as it should be, but in IE11, the text gets blurry (See images).
The blurry one being IE11 ofc. The width of the sprite is 189px and the height is 378px. I use the following CSS:
button {
width:189px;
height:189px;
background-image:url('../images/kontakt-os.png');
background-position: top;
cursor:pointer;
border-radius: 100px;
}
button:hover {
background-position: bottom;
-webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
-moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0);
}
So is this just an IE flaw, or can I actually do something about it ?
Thanks in advance.
EDIT:
I might just add, that if I just insert the same image as <img src="lala.png"> the text is NOT blurry. It only applies to backgrounds :/
It is a normal IE bug.
http://www.infoworld.com/t/microsoft-windows/blurry-fonts-bug-kb-2670838-persists-ie11-and-windows-7-231035
i Haven't found any solutions to this subject yet.
I'd recommend not having that button as a sprite at all for the following reasons-
It is not accessible or SEO efficient - neither screen readers nor search engine crawlers can read the text in the image.
It requires an additional HTTP request to download the sprite image, which will make your site load more slowly - especially on mobile devices
Unless you make the button much larger than it needs to be rendered on the page and scale down, then you will have issues of blurring when scaling up on high density devices, such as newer full size iPads and premium Android tablets, recent Macs and premium windows laptops. Clearly making the image larger than it needs to be means it is larger and exacerbates the speed penalty from point two.
If you want to change the colour scheme at any point in the future, you only need to change your CSS color properties, not re-generate new images.
It is trivial to make this button appear like your screenshot in CSS.
If you use markup something like this-
<button class="text-button" type="button">Send Besked</button>
And CSS like this-
.text-button {
background: #b32e01;
border: none;
border-radius: 8px 8px 8px 0;
color: #ffffff;
cursor: pointer;
height: 3em;
outline: none;
padding: 1em 0;
text-transform: uppercase;
width: 12.5em;
}
.text-button:hover {
-webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
-moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0);
}
It ends up looking like this (see JSFiddle for source)-
Although only a rough mockup (you may want to change proportions, add a gradient or change the background on hover - I can't see the original sprite to know the transformations you make in the hover state sprite) it already looks much like the original, and with all the advantages above - in particular that it should solve the text problem you originally posted.
I've just come across this issue.
I just placed the background image inside a span to keep the border radius and background image on different elements, seems to have done the trick.
.item {
border-radius: 8px 8px 8px 0;
}
.item span {
background-image:url('imagepath.png');
}
I found success in eliminating the blur effect by using :not(:hover). It seems to force the background-image into not blurring.
Try adding
button:not(:hover) {
width:189px;
height:189px;
background-image:url('../images/kontakt-os.png');
background-position: top;
cursor:pointer;
border-radius: 100px;
}
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.