hey i need to implement a switch component that is kind of difficult,
i write in React so i will be happy to receive full implementation but if you let me know how to make that
line with the different shades of gray on it, it will be enough.
thank you
the switch component
The easiest way to implement the color gradient of that block, is actually giving a background gradient. You have plenty of Gradient Generators out there, but here is a similar solution.
.progress {
width: 300px;
height: 10px;
background: rgb(237, 237, 237);
background: linear-gradient(90deg, rgba(237, 237, 237, 1) 60%, rgba(148, 148, 148, 1) 100%);
}
<div class="progress"></div>
Related
I started using CSS gradients, rather than actual images, for two reasons: first, the CSS gradient definitely loads faster than an image, and second, they aren't supposed to show banding, like so many raster graphics. I started testing my site on various screens recently, and on larger ones (24+ inches), the CSS linear gradient which constitutes my site's background shows very visible banding. As a provisional fix, I've overlaid the gradient with a small, repeating, transparent PNG image of noise, which helps a little. Is there any other way to fix this banding issue?
You can yield slightly better results by making your gradient go from the first colour to transparent, with a background-color underneath for your second colour. I'd also recommend playing around with background-size for large gradients that stretch across the screen, so the gradient doesn't actually fill the whole screen.
I know you won't like the sound of this, but the only real way right now to get a consistent cross-browser aesthetic in this case, is to use a repeating image.
If it's a simple linear gradient, then you only need it to be 1px wide and as high as the gradient, then make the background colour of the page as the final colour of the gradient so it runs smoothly. This will keep file size tiny.
If you want to reduce gradient bands in your image, use a PNG (not transparency) as I find these to be better suited than JPG's for this purpose.
In Adobe Fireworks, I would export this as a PNG-24.
Good luck.
http://codepen.io/anon/pen/JdEjWm
#gradient {
position: absolute;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
background: -webkit-linear-gradient(top, black, white);
background: -moz-linear-gradient(top, black, white);
background: -ms-linear-gradient(top, black, white);
background: -o-linear-gradient(top, black, white);
background: linear-gradient(top, black, white);
}
I made a "scatter.png" to put with my gradient. Like this:
Open gimp
100x100 image
Add alpha channel
Filters -> Noise -> Hurl... Accept defaults
Set opactity to 5%
Save and then add to gradient.
background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);
It's a subtle effect on a subtle effect.
For a pure CSS answer you can use a blur filter to add blur to the css gradient and alleviate the banding. It can mean some rebuilding of the hierarchy to not blur the content and you need to hide the overflow to get crisp edges. Works really good on an animating background where the banding issue can be especially dire.
.blur{
overflow:hidden;
filter: blur(8px);
}
I know this issue is long solved, but for others experiencing banding and looking for a solution, a very easy fix for me was just simplifying the colours I included in my gradient. For example:
This gradient produces banding:
background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%,
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);
This gradient does not, and looks much the same:
background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);
I know this is a bit very late, but I discovered a trick that works. For anyone having that rough edge at meet point of the colors. This removes it.
.gradient {
background: linear-gradient(
173deg,
rgba(0, 132, 255, 1) 50%,
rgba(255, 255, 255, 1) 50.5%
);
}
There's not really any method to remove the banding. CSS gradients are at the mercy of the various rendering engines of the browsers. Some browsers simply render better than others. The best you can do is short areas to cover and larger color ranges to increase the gradient steps.... Then wait for browser rending to improve.
Add a min-height.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
}
you can also set background-repeat to no-repeat but shouldn't be necessary.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
background-repeat: no-repeat;
}
this property seems to fix things
background-attachment: fixed;
got from this thread
I am trying to add a background image with a linear gradient.
If I add the image without the linear gradient, the image appears. As soon as I add the linear gradient, neither of them work and it defaults back to the original background color in the section.
In the CSS below I have tried to combine the background image into one CSS declaration and divide it by a comma.
.education {
background: linear-gradient(rgba(141, 153, 174, 0.8), (rgba(141, 153, 174, 0.5)), url("samuel-beckett-bridge.jpg") no-repeat fixed);
background-size: cover;
}
<!-- // Education -->
<section id="education" class="education">
<div class="content-wrap">
<h2>Education</h2>
<!-- School details: copy this whole block to add more schools. -->
<h3>School name 2017 - present</h3>
<p>Designation received</p>
<!-- Add as many paragraphs as you need. -->
<p>Summary.</p>
<!-- End of school details. -->
</div>
</section>
It is definitely :
.education {
background: linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5)), url("samuel-beckett-bridge.jpg") no-repeat fixed;
background-size: cover;
}
live solution : https://jsfiddle.net/v47dk902/
You have inserted an extra curly bracket in background css. Kindly replace your background css with the following
background: linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5)), url("samuel-beckett-bridge.jpg") no-repeat fixed);
Thanks
If you're working with transparent background images, you will need to switch the order so the gradient appears beneath the image. You will want to list the image, repeat, and positioning info first, followed by a comma, followed by the gradient info.
So, using the code used above as an example:
.education {
background: url("samuel-beckett-bridge.jpg") no-repeat fixed, linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5));
background-size: cover;
}
I want to create this background in CSS only.
I want to do it with CSS to avoid responsive issues.
You can make use of radial-gradient to produce the glow effect. You can change the colors to be inline with the image.
One thing you should note is the browser support for CSS gradients. IE < 10 do not support them. If you need support for older browsers then CSS gradients would not help.
body {
background-image: radial-gradient(circle, rgb(49, 144, 228) 0%, rgb(29, 84, 166) 100%);
height: 100vh;
}
<!-- prefix free library included only to avoid vendor prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
I can't see any extra steps in between but if you are looking for several steps of varying percentages then have a look at the below snippet:
body {
background-image: radial-gradient(circle, rgb(49, 144, 228) 0%, rgb(41, 122, 204) 30%, rgb(29, 84, 166) 70%);
height: 100vh;
}
<!-- prefix free library included only to avoid vendor prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
I am making a small web based tool, but running into a problem, both background and hr tags break when the page is larger in width then the initial viewable area. In other words, once I scroll sideways!
EDIT: This needs to work for chrome. (Or possibly firefox if not possible in chrome)
Also, thanks to Celts response I can possibly solve the hr issue, background is still not repeating as it should!
However in my real app I don't know the width of the page, as its content and layout are dynamic. (This I could work around with javascript if needed)
Html code for replicating the problem:
And apparently I cant post pictures here yet. So links to the 2 pictures:
Initial view: http://imgur.com/HdHedgk
Scrolled View: http://imgur.com/hh2wgE4
body {
background: repeating-linear-gradient(
90deg,
rgba(96, 109, 188, 0.31),
rgba(96, 109, 188, 0.30) 100px,
rgba(70, 82, 152, 0.31) 100px,
rgba(70, 82, 152, 0.31) 200px
)
}
<div style="width: 100%; margin-top: 60px">
<hr>
</div>
<div style="position: absolute; width: 4000px">
Text goes here
</div>
Because you are setting the div's width to 100% this means it will only ever be as big as the initial screen size that your page loads on. The hr tag inside the 100% width div it is getting cut off for this reason. To prevent this from happening set your 100% width div to the same size as the one below it.
This code works fine in chrome:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
body {
background: repeating-linear-gradient(
90deg,
rgba(96, 109, 188, 0.31),
rgba(96, 109, 188, 0.30) 350px,
rgba(70, 82, 152, 0.31) 350px,
rgba(70, 82, 152, 0.31) 700px
)
}
</style>
</head>
<body>
<div style="width: 4000px; margin-top: 60px">
<hr>
</div>
<div style="position: absolute; width: 4000px">
Text goes here
</div>
</body>
</html>
You should really build your styles into a separate style sheet. It is good practice and will make future maintenance of the web page much easier.
UPDATE:
To solve your repeating background problem you can change your background style to use percentages instead of pixels:
<style>
body {
background: repeating-linear-gradient(
90deg,
rgba(96, 109, 188, 0.31),
rgba(96, 109, 188, 0.30) 10%,
rgba(70, 82, 152, 0.31) 10%,
rgba(70, 82, 152, 0.31) 20%
)
}
</style>
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.