I want to create some flat-UI-like blocks but I need a little help. I got through some guides with linear-gradient(to left, rgba(255,255,255,0) ,rgba(255,255,255,1)); and so on, but I have't found what I actually need.
Is there any way, how to do any layer with linear opacity? I have quite huge database of images, (so I definitely can't photoshop them to have opacity by itself), and I am loading it into many "div" as a background-image. But I need to make the divs to start beeing transparent in about 75% of its width.
Is it somehow possible in CSS?
There is what I need to achieve:
You can set a linear gradient background with an extra stop to make an element transparent for 75% of its width, then linearly increase opacity.
For example:
background: linear-gradient(
to right,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 75%,
rgba(0,0,0,0) 100%
);
This makes an element have an opaque black (the three first rbga values) background for 75% of its width, then linearly transition to transparent in its rightmost 25%.
I'm afraid something like that is not possible using CSS. Since you have many images, and provided you don't show too many of them at once, you can consider using canvas to render the opacity to each image:
http://jsfiddle.net/u256zkha/
Using linear-gradient, partly from Jon's answer.
#parent{
position:relative;
width:fit-content;
}
#layer{
position:absolute;
width:100%;
height:100%;
background: linear-gradient(
to right,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0) 100%
);
}
<div id="parent">
<div id="layer"></div>
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=356&d=identicon&r=PG&f=1"/>
</div>
Related
I am new to web development. I am trying to put an app together. I don't know how i can achieve the background like in the image.
I already tried linear-gradient with some angles but that did not help.
If anyone want's to know what property i used than it would be the one mentioned below:
background-image: linear-gradient(90deg, red, blue);
Are you trying to get something like this?
body{
height: 400px;
width: 400px;
background: linear-gradient(to top right, #9999FF 0%, #9999FF 50%, white 50%, white 100%);
}
<body>
<h1>Some dumy text...</h1>
</body>
How it works
In your background you can use linear-gradient, in this you can tell what direction it goes. In this example I use "to top right", this makes it so the starting color starts in bottom-left and the end color goes to the top-right.
You could use all kind of directions like "to bottom right" or "to right".
Then you say what color you want it to start with, in this example its some blue color. Then you tell it when it should stop using this blue color, in this example 50%. Then if you want the white color on the other side you say "white 50%" and it will start using white till 100%.
You could also try some other cool things with it. You can say for example linear-gradient(to top right, blue 0%, blue 40%, white 60%, white 100%)
notice that the blue stops at 40% and the white begins at 60%. Now it will transition between it.
Although Jeremy answer is helped me to attain the effect but i had to change it a bit to look like the one in the image.
My Css file:
body{
height: 100vh;
background: linear-gradient(to bottom left,#fff 0%, #fff 50%, #8186D5 50%, #8186D5 100%);
}
My HTML file:
<body>
</body>
I'm trying to find how to build this pattern, with parallel squares (each square with about 3px) to put as background on a div using css (not using an image background and repeating the X axe). I can only find chess patterns, which is not the case. Could anyone help me with that challenge? thank you really much!
I did search for hours on google how to make this pattern here:
While your specific example is easier to make using a repeating image, more interesting effects can be realized using pure CSS so it's not a useless skill to have. As always when trying to learn something web-related, MDN is a good place to start and has a pretty good article about CSS gradients. Here's the short of it.
CSS gradients are functions which return images. The simplest one is linear-gradient. Picture a horizontal line in your head and place a series of points along this line to which you'll assign a color. The function will automatically make the color transition smoothly between these points.
body {
background-image: linear-gradient(to right, black 0%, black 50%, green 75%, yellow 100%);
}
As you can see, the gradient is pure black from the left until we get to the middle (50%) then it starts to fade to green and finally to yellow. This modern and verbose syntax is very intuitive. We can actually remove some of that to get the same effect.
body {
background-image: linear-gradient(to right, black 50%, green 75%, yellow);
}
This time, we got rid of the black 0% stop. If we don't have a stop at 0%, the color of the first stop is simply used to fill the empty space. We also didn't specify the position of the last stop (yellow), so it was automatically placed at 100%.
When we set two consecutive color stops at the same point, we get interesting results:
body {
background-image: linear-gradient(
to right,
black, black 50%,
green 50%, green 75%,
yellow 75%, yellow
);
}
Here we told the gradient function to be black from the start to 50%, then to be green from 50% to 75%, then to be yellow from 75% to the end. By leaving no room between color stops, we abuse gradients to produce solid colors. Of course we didn't need the first black and the last yellow.
Something I haven't mentioned yet is that the generated gradient isn't actually the size of the full element, and it is actually tiled across it like any background-image. If we change the angle of the gradient, it becomes quite apparent.
body {
background-image: linear-gradient(
45deg, black 50%, green 50%, green 75%, yellow 75%
);
background-size: 100% 40px;
}
As you can see, the gradient is now at a 45degree angle so it makes a triangular shape, but it is only 40px tall and tiled, which creates an interesting zig-zag.
Since the gradient function generates an image, we can actually tile said image to create a repeating pattern. I prefer using percentages when making gradients and then specifying the total size of the gradient using background-size, like this:
body {
background-image: linear-gradient(to right, #617ca2 50%, #28487d 50%);
background-size: 10px 10px;
}
This creates a gradient that is #617ca2 from 0 to 50% and then #28487d from 50 to 100%, and considering 100% as 10px.
The final trick is that we can have multiple layers of background and use transparent colors in our gradients.
body {
background-image: linear-gradient(to bottom, transparent 50%, #28487d 50%),
linear-gradient(to right, #617ca2 50%, #28487d 50%);
background-size: 10px 10px, 10px 10px;
}
You can also use repeating-linear-gradient directly instead, but you'll have to set the gradient in pixels and be a little more explicit when it comes to the first and last color stops. I'm less familiar with this method, and the result might be slightly different.
body {
background-image: repeating-linear-gradient(to bottom, transparent, transparent 5px, #28487d 5px, #28487d 10px),
repeating-linear-gradient(to right, #617ca2, #617ca2 5px, #28487d 5px, #28487d 10px);
}
With the support for conic-gradient now being pretty good you can achieve square patterns like these quite easily.
body {
background-size: 10px 10px;
background-image: conic-gradient(
#28487d 90deg,
#28487d 90deg 180deg,
#617ca2 180deg 270deg,
#28487d 270deg
);
}
The background-size constrains it to a square, and the conic-gradient divides that square up into four parts at right angles to be colored however you like.
This can be achieved using css grid. Here's the code snippet for it:
<html>
<head>
<style>
.container{
top:5%;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(10px,1fr));
grid-gap:3px;
grid-template-rows: repeat(100,10px);
}
.container div{
background-color:aqua;
}
</style>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<div class="container"></div>
<script>
for(let i=0; i<1000; i++){
$('.container').prepend($('<div></div>'));
}
</script>
</body>
</html>
I was reading about gradients and was wondering whether it is possible, for one given div, to mix solid and gradient colors as the CSS of its background.
I was thinking about this in the context of a bar which would represent the alternance of day and night: white for the day (50% of the div width), then a gradient from white to black (= dusk, 20% of the divwidth) and then black (30% of the div width). The percentages are just to set the context, the actual lengths would be calculated.
The documentation for gradients seems to imply that the mix is not possible, i.e. the possibility to set several stops is available, but each of them is faded into (so no solid colors).
You can use the following solution using the linear-gradient:
body {
background:grey;
}
div {
background: linear-gradient(to right,
white 0%, white 50%,
white 50%, black 70%,
black 70%, black 100%);
height:200px;
width:100%;
}
<div></div>
The answer is yes you can but there is a bit of calculation needed if you want to split multiple sections:
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(127,127,127,1) 70%,rgba(0,0,0,1) 100%); /*
If you want to split the second section 20/30, then you need to know the calculate the middle RGB value between black and white, which is easy enough. Other colours would be more difficult
I have a java plugin that sets a menu on my left and then the resulting dynamic data on the right. When you click a menu item the corresponding data on the right scrolls to the top. The data on the right is a long list, when you click on a menu item you dont just see that one (single) result alone it just brings that one to the top of the page and the rest are below it.
So what I would like to do is set a color to the top part to draw attention that it's the result you asked for; the best thing for me would be to have it recognize what you clicked and set a background color but I don't know how to do that, or write java so if I could get any help would be nice.
The div is what moves, so I set a color to a top percentage of the page with the linear-gradient in CSS3 but it moves away when you click another menu item, since the div shifts up. I have a CSS3 animation but, because IE unfortunately still exists, I need something for browser-compatibility and for older browsers. The only things I've found are CSS3 gradients which I dont want: I do not need a gradient, I need a block of color without making another div because, like I said, the data is dynamic and it's not always the same thing in that div.
The gradient is nice, because I can set a percentage which is what im looking for but it has a fade, which I don't want, and if there is a solution that isn't CSS3 I would like that. Even if there's a way to do this in CSS3 please let me know as long as it's not going to do a gradient fade. Otherwise if anyone has any nifty ideas on how else to call attention to that one section I'm open to all ideas.
Gradients DO NOT necessarily have a fade, that is a misconception, let's say that you want your div to be 70% red (solid) starting from the top, your CSS will be.
background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%)
Two Methods:
With Gradients:
div{
width:200px;
height:200px;
margin:50px auto;
border:4px solid rgb(50,50,50);
background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%);
background-image: -webkit-linear-gradient(top, red, red 70%, transparent 70%, transparent 100%)
}
Fiddle -> http://jsfiddle.net/QjqYt/
Without Gradients
div{
position:relative;
z-index:1;
width:200px;
height:200px;
margin:50px auto;
border:4px solid rgb(50,50,50);
}
div:before{
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:70%;
content:"";
background-color:red;
}
Fiddle -> http://jsfiddle.net/6cKZL/1/
As an update to the accepted answer:
.only-start{
background: linear-gradient(
to right,
red,
red 1rem,
transparent 1rem,
transparent 100%
);
}
Rodney - You can use Colorzilla to make your own custom gradient. You can make any kind of gradient with the online tool and it gives you the CSS code. It also has an option to make it IE compatible.
Note: If someone deems this 'comment-ish' - I can move it.
You can use gradient with color percentage.
#gradbox {
height: 200px;
background-color: green; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, rgba(0,0,0,0) 20%, orange 20%); /* Standard syntax (must be last) */
}
<div id="gradbox"></div>
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