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
Related
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>
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.
This question already has answers here:
Semi-transparent color layer over background-image?
(19 answers)
Closed 3 years ago.
I am certainly new to Web design.
As seen in this picture, most of the websites I see have this kind of mask over images, and then text over that mask.
So how do I achieve that if I don't edit the picture that way, and want to add the mask over it.
I am using a Bootstrap Jumbotron for the header part of website, with container-fluid property and it's height set at 100vh.
I use an image as background image to the jumbotron. It's really a common thing and can be seen in many websites. For example:
So how do I add a mask or an overlay to the background image, certainly a black tint, so that I can make white text visible.
P.S.
I am very new to css, and I came to know about these mask and overlay properties today itself.
You could nest two blocks together, one with the background image, and the other with the overlay :
.background{
width: 500px;
height: 500px;
background: url('https://static1.squarespace.com/static/56be46d2a3360cae707270a0/t/5772ef9b20099e38818859b0/1467150245253/');
background-size: cover;
}
.overlay{
width: 500px;
height: 500px;
background-color: rgba(0, 0, 0, 0.5);
}
<div class="background">
<div class="overlay">
<!-- Content here -->
</div>
</div>
The opacity of the overlay can be modified with the last argument of the rgba() function.
Try to use linear gradient:
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../some-image.jpg");
For more info check this link: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
I have the following CSS code:
background: rgba(0, 0, 0, 0.5) url(bg1.png) top left/auto 50em repeat, url(bg2.png) top left/50% 100% no-repeat;
I think it's syntactically right according to this w3schools reference.
However, neither Chrome nor Firefox shows any background for the div it is applied to. What can be the issue?
According to Mozilla MDN:
With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.
selector {
background: url(bg1.png) top left/auto 50em repeat,
rgba(0, 0, 0, 0.5) url(bg2.png) top left/50% 100% no-repeat;
}
try with
background: rgba(0, 0, 0, 0.5) url('bg1.png') top left 50em repeat, url('bg2.png')
I'm looking for suggestions on the best way to achieve a diagonal slash across a page which will sit behind the main content area.
I'd like to achieve this without images or additional markup and be able to control the angle of the slash which would be retained if the browser width changed.
I was originally thinking the :after pseudo selector could be used for this, though perhaps SVG would be a better option?
Rough design of slash in light gray:
You can try using some borders in css3 here's a good example: http://www.cssportal.com/css3-shapes/.
See "Triangle Bottom Left".
check out this JSFiddle:
http://jsfiddle.net/anzhA/
Or you some other example:
http://jsfiddle.net/anzhA/1/
The trick is with css borders and width/height set to 0:
border-width: 0 500px 500px 0;
border-color: transparent white transparent transparent;
border-style: solid;
height:0;
width:0;
background:rgba(0,0,0,0.2);
This will show just the bottom-right shape of the border structure. It is triangle.
EXAMPLE
First, normal CSS border 2 colors.
Second, if you replace the second color to transparent and set width/height of the element to 0, and remove bottom and left border, you will get result
Try this:
background: -webkit-linear-gradient(
rgba(232, 232, 232, 1),
rgba(135, 60, 255, 0) 0%
),
-webkit-linear-gradient(-45deg, rgba(231, 229, 229, 0.9) 55%, rgba(229,230,216,1)
0%);