I'm working on a stylized <hr /> in a library that I'm writing.
This library has a root element/component that uses all: initial to populate things like font-size which is used to change the relative size of the component. However, I'm running into a problem where I want to use all: unset on all other components.
This seems to break (in production but not storybook?) the background-image that I have set on my <hr />.
Here is a self contained example:
export default function App() {
const [toggle, setToggle] = React.useState(true);
return (
<div style={{ all: 'initial' }}>
<h1>
Why is <code>background-image</code> not shoing here?
</h1>
<hr
style={{
...(toggle ? { all: 'unset' } : {}),
border: 'none',
backgroundRepeat: `no-repeat`,
backgroundSize: `100% 0.05em`,
backgroundPosition: `center`,
backgroundImage: `linear-gradient( 90deg, rgba(0,0,0,0) 0%, hsl(0, 200%, 90%) 10%, hsl(0, 200%, 90%) 48%, rgba(0,0,0,0) 48%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 52%, hsl(0, 200%, 90%) 52%, hsl(0, 200%, 90%) 90%, rgba(0,0,0,0) 100%)`,
color: `hsl(0, 0%, 20%)`,
textAlign: `center`,
height: `0.75em`,
}}
/>
<button
onClick={() => {
setToggle((t) => !t);
}}
>
{!toggle ? "Add 'all: unset'" : "Remove 'all unset'"}
</button>
</div>
);
}
Here is a StackBlitz of the problem as well.
What am I missing here? It has to be an unset property, right?
But I haven't been able to find the one that's causing this behavior.
This happens regardless of React/JSX/webpack.
Has 2 problems:
About all of CSS:
it sets all the properties of course including the base ones so you have to manually set them after unset:
<hr
style={{
...(toggle ? { all: 'unset' } : {}),
+ width: '100%',
+ display: 'block',
+ position: 'relative',
border: 'none',
backgroundRepeat: `no-repeat`,
backgroundSize: `100% 0.05em`,
backgroundPosition: `center`,
backgroundImage: `linear-gradient( 90deg, rgba(0,0,0,0) 0%, hsl(0, 200%, 90%) 10%, hsl(0, 200%, 90%) 48%, rgba(0,0,0,0) 48%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 52%, hsl(0, 200%, 90%) 52%, hsl(0, 200%, 90%) 90%, rgba(0,0,0,0) 100%)`,
color: `hsl(0, 0%, 20%)`,
textAlign: `center`,
height: `0.75em`,
}}
/>
About all of React:
about all instead of putting all: <value> in html react lists all unset attributes which causes other attributes to be removed the solution is to use class instead of object for style
if you only render once without turning all on and off then you don't need to worry about this problem
From chrome F12:
The display: inline property prevents height from having an effect.
Try setting display to something other than inline.
Related
I'd like to insert a picture to separate the 'limits' of the progress bar.
Hence the right side would be red, than I'd have my little picture, followed by a green side
Is it possible?
Client side it is all just html, css and javascript. A css linear gradient already works great (boundaries at 10 and 90 percent)
.ui-progressbar {
background: -moz-linear-gradient(left, rgba(0,255,0,1) 0%, rgba(0,255,0,0) 10%, rgba(255,0,0,0) 90%, rgba(255,0,0,1) 100%);
background: -webkit-linear-gradient(left, rgba(0,255,0,1) 0%,rgba(0,255,0,0) 10%,rgba(255,0,0,0) 90%,rgba(255,0,0,1) 100%);
background: linear-gradient(to right, rgba(0,255,0,1) 0%,rgba(0,255,0,0) 10%,rgba(255,0,0,0) 90%,rgba(255,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#ff0000',GradientType=1 );
}
And if you want to combine it with an image, see
How do I combine a background-image and CSS3 gradient on the same element?
I have a body tag that needs serious decorating. I want to refrain from downloading images and/or using libraries. I have tried using many different background-colors to decorate my body tag, but it is just not working.
Here's what I need:
Pure CSS striped pattern (no images)
Pure CSS spotted pattern (polkadot, no images)
Way to split my body tag into four quadrants, each with different background
Generate pure css combo of 1 & 2?
I have searched for the answers to these, but I could only find image generators. I know there is a way to make gradients, but is there a way to make other pure CSS patterns, or should I download images?
You can use CSS3 background property to design almost anything you like, there are also websites that can generate css codes like this one for example:
body {
background-color:#ccc;
background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}
I've got a gradient div, here it is:
<div class="gradient"></div>
And here is css:
.gradient {
width: 20px;
height: 20px;
background: linear-gradient(to right, rgba(0,0,0,0) 0%, #fff 100%)
}
Very simple.
In Chrome it's works fine, but in Firefox (34.0, Ubuntu 14.04) it's work not correctly:
I tried use rgba(0,0,0,0) instead transparent, tried -moz-linear-gradient prefix — no results.
dabblet link
Thanks!
If you want to avoid the grey in the middle you can use a gradient from transparent white (255, 255, 255, 0) to opaque white (255, 255, 255, 1),#fff.
.gradient {
width: 20px;
height: 20px;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 100%)
}
http://dabblet.com/gist/64dd43f37e8978d08749
In your code the gradient goes from transparent black to opaque white and because of that the grey part in the middle shows up in FF.
I guess chrome and other browser calculate the color steps in the gradient differently.
I'm using a gradient as a background. I was hoping that the gradient would start out darker and gradually lighten as it gets to the other end of the container that it is applied to. Instead, what I notice is that the darker part covers around 90% and only after this 90% does it start to get lighter. It would be nice if around 50% it was halfway between the start and end color. Is there any way of achieving this? Here is my css:
background: -moz-linear-gradient(center bottom , #f4f7fa 0pt, #FFFFFF 100%) repeat scroll 0 0 transparent;
background: linear-gradient(bottom, #f4f7fa 0, white 100%);
background: -webkit-linear-gradient(bottom, #d6d6d6 0, white 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f7fa', endColorstr='#FFFFFF', GradientType=0);
Try using this code
background: linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -o-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -moz-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -webkit-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -ms-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
Gradient property explanation:
linear-gradient(Gradient Starting Position,Color & Offset,Color & Offset);
So in your code the color #D6D6D6 started form 0% and moves upwards,
then color #FFFFFF stated form 100% as offset is set as 100%(and it ends there too).
So to get the consistent flow from one color to other you should set the offset of second color to 50%.
Check this link to better understand CSS Gradient property.
Regards
Shiva
I'm using a CSS code like the following one for creating a radial gradient background:
body
{
background-color: #0176A0;
background-image: -moz-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
background-image: -webkit-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
background-image: -o-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
background-image: -ms-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
background-image: radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#029CC9', endColorstr = '#005077', GradientType = 0);
}
but the result is not the intended one! My aim is having a radial gradient background which covers the entire viewport. I can use the background-size property which is a part of CSS3 specification to get a better result, but unfortunately this property does not work in IE?
Does anyone have an idea please?
Add this to your CSS:
html {
height: 100%
}
Even better:
html {
min-height: 100%;
}
This will make the gradient extend to your content height otherwise it will be limited to just the window height.