I'm trying to create the blue background based on the picture: multiple css backgrounds with skewed part
So far I was able to do either the skew gradient part or the gradient itself.
background: linear-gradient(170deg, #031085 80%, #fff 80%); // skew
background: linear-gradient(90deg, #031085 10%, #0F69EF 80%); // linear
Do you know how to connect these together to achieve the result on the image?
Simply do like below:
html {
height:100%;
background:
linear-gradient(170deg, transparent 80%, #fff 80%),
linear-gradient(90deg, #031085 10%, #0F69EF 80%)
}
There is no multiple gradient background on css. If you want to you can add multi option on background
For Exaple:
background:
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}
For more detail you can check this source: https://css-tricks.com/css-basics-using-multiple-backgrounds/
Or
You can add two stacked div tag and you can assign individual backgrounds to them
<div class="background1"></div>
<div class="background2"></div>
Related
I need to create a gradient from left to right with three vertical colors and another gradient on an angle. Apologies for the poor image below. The black line would represent the angle gradient (if you could imagine it fading into black).
I have tried numerous ways, However, I seem to not be able to do this.
I would require this in CSS. Any help would be much appreciate, any further information required please ask.
Thanks for your time.
Roddest.
Something like this, you can adjust the values as you want:
background: linear-gradient(45deg, rgba(0, 0, 0, 255), rgba(0, 0, 0, 0), rgba(0, 0, 0, 255)) no-repeat border-box, linear-gradient(to right, #0ff 10%, #f00 50%, #0ff 90%) no-repeat border-box;
There are two gradients, one black and transparent in the middle and from top right to bottom left, and a second from left to right, cyan, red and cyan.
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 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>
i have been 'google'ing for a few days to find out if it is possible to overlay multiple images (i.e. roof.png , walls.png) and then dynamically apply overlay colors to them (depending on the user's click on colors).
I solved the first part to colorize the roof but it gets complicated (impossible?) when I add the second layer, the walls. The 'roof.png' is 'above' the 'walls.png' and the color effect is not visible.
What I want to achieve is a coloring scheme like here but not with separate images for all the colors (i.e. roof_blue.png , roof_red.png) but with css rules for the transparent roof.png.
Any suggestion is highly appreciated.
EDITED :
I will try to be more specific so you can concentrate on the solution (if there is one...)
Here is my HTML part :
<div class="row">
<div class="col-lg-12">
<div class="visualisation_area">
</div>
<div class="buttons_area">
</div>
</div>
</div>
And here is the CSS :
.visualisation_area {
width: 100%;
height: 600px;
background-image: linear-gradient(to right, rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0.5)),
url(../images/roof_blank.png),
linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5)),
url(../images/walls_blank.png);
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-position: right,
center,
right,
center;
}
The result can be seen HERE
What I'm curious about is if there is a way to apply the 'blue' and 'red' gradients SEPARATELY to the roof_blank.png and walls_blank.png respectively so the colors don't mix but the roof gets blue and the walls red for example?
I have tried several combinations with divs and images but without some guidelines I'm going nowhere from this point... Thank you in advance!
You can use CCS Sprites instead of multiple files
You can try to create divs with complex shapes
I need help to create the styling shown in the image above which is a graphic design of what I am needing to do. The bottom left hand corner shading for the panels shown in the image above is my real sticking point.
I have tried all sorts of generators but I just can't get close enough with radial gradients.
As you can see I have a number of panels (actually 5 in total) lined up next to each other, each panel is a different width potentially and will resize with borwser view port sizing so providing a background image is not really an option.
I have a repeating transparent background image that creates the texture effect that works fine so I am not concerned about the texture effect but I am totally unable to create the bottom left corner darker shading effect and I need to get as close as absolutely possible using css. I have been tearing my hair out over this for days.
The main green colour hex code is #3F4B0B
My css currently looks like this
#mixin forest-green-texture{
#include background-image(url("texture.png"), linear_gradient($dark-green, $light-green));
}
.footer-box{
#include banner-color;
#include forest-green-texture();
width:18%;
float:left;
}
The linear gradient just doesn't cut it! It was my last attempt and totally wrong
I am using SASS if that makes a difference
I got pretty close using this tool http://ie.microsoft.com/TESTDRIVE/Graphics/CSSGradientBackgroundMaker/Default.html
which gave me
/* IE10 Consumer Preview */ background-image:
-ms-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);
/* Mozilla Firefox */ background-image: -moz-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%,
#000000 100%);
/* Opera */ background-image: -o-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);
/* Webkit (Safari/Chrome 10) */ background-image:
-webkit-gradient(radial, right top, 0, right top, 970, color-stop(0, #3F4B0B), color-stop(0.7, #3F4B0B), color-stop(0.9, #3F4B0B), color-stop(1, #000000));
/* Webkit (Chrome 11+) */ background-image:
-webkit-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);
/* W3C Markup, IE10 Release Preview */ background-image: radial-gradient(circle farthest-side at right top, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);
I know the colours are slightly wrong, I'm not bothered about that I can adjust them but the above wasn't really much better than a linear gradient.
UPDATE
This is a screen shot of what I have managed to achieve so far
As you can see, the shading just isn't right.
The css I have for this is
background-image: url("texture.png"), linear-gradient(to right top, black 0%, rgb(70, 84, 12) 50%, rgb(82, 97, 14) 100%);
All help greatly appreciated
I would suggest putting the textured image on the background of the container div of the columns then for each column use that line shadow image with transparent background as the background property for each colum.
<style>
.container {
background: url(textureImg.png) repeat;
}
div[class^="col"] {
background: url(lineShadowImg.png) no-repeat;
}
</style>
<div class='container'>
<div class='colOne'>
//your content
</div>
<div class='colTwo'>
//your content
</div>
<div class='colThree'>
//your content
</div>
</div>
If you need to tweak the positioning of the line just use background-position. This will allow your columns to be as wide as they need to be without having to change your image for each.