I am trying to achieve this layout but I'm having problems with setting a background, which should be 50% of the screen size. I thought of setting up an image as background, but there are different colors that should be different on each page.
Is it possible to achieve it using only background-color?
This is how I set the HTML, TS & CSS so far:
<div [class]="getBackground(title)">
<div class="background-header">
<img [src]="'assets/assess/Custom.png'" alt="">
{{title}}
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" *ngFor="let theme of pillar.data; let i = index">
<button rh-btn-theme full-btn [ngClass]="{'ripple': true}" [issue]="theme" (click)="presentModal($event, theme);"></button>
</div>
</div>
</div>
</div>
TS
getBackground(pillar) {
switch (pillar) {
case "People":
return "background-people";
case "Land":
return "background-land";
case "Crop":
return "background-crop";
case "Business":
return "background-business";
default:
return "background-custom";
}
}
CSS
.background-header {
width: 100%;
height: 80%;
display: block;
position: relative;
img {
display: inherit;
background-color: #000;
}
}
.background-people {
background-color: #335F6E;
}
.background-land {
background-color: #006533;
}
.background-crop {
background-color: #7F4020;
}
.background-business {
background-color: #F8DC0B;
}
.background-custom {
background-color: map-get($colors, primary);
}
Yes you can do it by background gradient:
.content {
width: 100%;
height: 300px;
border: solid 2px #123;
background: linear-gradient( red, red 50%, white 50%, white);
}
<div class='content'></div>
Dont forget genarte cross-browser css. See about background gradient here
Related
This is the html part:
.bild{
height:100px;
width: 100px;
}
<div class = "wrapper">
<img class = "bild" src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" alt="the google logo" >
</div>
They do not seem to "understand" each other, as the image does not change.
The example with the picture you gave works. It could be that you have not noticed any difference. Here is another example where I colour a text with a class:
.color {
color: red;
}
.colorHeader {
color: red;
}
<p class="color">This text is red!</p>
<h1 class="colorHeader">This header is red!</h1>
you could also change this:
.color {
color: red;
}
.colorHeader {
color: red;
}
to this:
.color, .colorHeader {
color: red;
}
You have some extra spaces in your HTML, but the output still works as defined in your CSS. I recommend specifying the desired width or height and using auto on the other in this case.
.bild {
height: auto;
width: 200px;
}
<div class="wrapper">
<img class="bild" src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" alt="the google logo">
</div>
I am looking to create a basic chart using divs and spans and want to apply conditional formatting to each column in the chart depending on the value setting its height. The trick which I haven't been able to crack is that I want to have it function a bit like Excel conditional formatting in the example here:
Where the colours are in a range (light to dark).
Is there a simple way of doing this? I can see how I could apply static values to static colours but was hoping I could do something with colour ranges like this excel example.
So, the below screenshot shows a column chart where each column has a different shade of orange determined by the value of the column:
The closer to 25 the column is, the darker the colour.. Like-wise, the lower the value, the lighter the shade of orange is.
It sounds like your goal is to color a bar somewhere between two colors depending on a value. If that's the case, you can use css animations to simulate the color gradient.
The idea is this:
Set up an animation setting the background to be one of two colors. This effectively calculates a gradient between the two colors. You do this with #keyframes and animation.
Pause the animation, since we don't want it to actually play. This is done with animation-play-state.
Select a specific frame in the animation to get the correct in-between color. This can be done with a negative animation-delay.
.bars {
display: flex;
justify-content: space-evenly;
}
.bar {
animation: color-gradient 25s linear 1;
animation-fill-mode: forwards;
animation-play-state: paused;
width: 3em;
}
#keyframes color-gradient {
from { background: red; }
to { background: blue; }
}
<div class="bars">
<div class="bar" style="height: 5em; animation-delay: -5s;"></div>
<div class="bar" style="height: 10em; animation-delay: -10s;"></div>
<div class="bar" style="height: 15em; animation-delay: -15s;"></div>
<div class="bar" style="height: 20em; animation-delay: -20s;"></div>
<div class="bar" style="height: 25em; animation-delay: -25s;"></div>
</div>
The granularity can be adjusted by making the animation duration longer than 25 seconds if need be.
I am going to provide two options and maybe you can provide some more details based on these on exactly what you need.
This first one may not be what you want as it sets a specific gradient based on a specific height. Only going to provide a Codepen for this one. https://codepen.io/jfirestorm44/pen/yLMNPPM?editors=1100
This next one is more of what I think you want. If you know the max height of the bar graph you can use that to set the gradient breaks on your linear-gradient.
UPDATED:
HTML
<div id="container">
<div id="first" class="bar"></div>
<div id="second" class="bar"></div>
<div id="third" class="bar"></div>
<div id="fourth" class="bar"></div>
<div id="fifth" class="bar"></div>
</div>
SCSS
.bar {
#for $i from 1 through 5 {
$height: 20px * $i;
$light: 75% + $i * -5;
&:nth-child(#{$i}) {
position: absolute;
bottom: 50%;
left: 20% + ($i * 10%);
width: 20px;
height: $height;
font-size: 25px;
transform: translate(-80%, 0);
background: hsl(35, 100%, $light);
}
}
}
Updated Codepen: https://codepen.io/jfirestorm44/pen/jOBPopj?editors=1100
ADDING a JS Option:
let inputNum = document.getElementById("number");
let button1 = document.getElementById("button1");
let border = document.getElementById("border");
let dropDown = document.getElementById("cars");
function color() {
if (inputNum.value > 0) {
let bar = document.createElement("div");
bar.classList.add("bar");
border.appendChild(bar);
let bars = document.getElementsByClassName("bar");
let carName = document.createElement("p");
carName.classList.add("carType");
carName.textContent = cars.options[cars.selectedIndex].text;
border.appendChild(carName);
let names = document.getElementsByClassName("carType");
let height = inputNum.value * 26;
for (let i = 0; i < bars.length; i++) {
names[names.length - 1].style.top = "275px";
names[names.length - 1].style.left = -5 + i * 30 + "px";
bars[bars.length - 1].style.height = height + "px";
bars[bars.length - 1].style.backgroundColor =
"hsl(35, 100%," + (75 - height / 5.2) + "%)";
bars[bars.length - 1].style.left = 10 + i * 30 + "px";
}
}
}
#container {
position: absolute;
top: 40px;
left: 0;
width: 400px;
height: 300px;
}
#border {
position: relative;
left: 100%;
top: 0;
width: 90%;
height: 90%;
border-left: 2px solid grey;
border-bottom: 2px solid grey;
transform: translate(-100%, 0);
}
#numberContainer {
position: relative;
left: -5%;
}
.num {
line-height: 10px;
}
.num:before {
content: "";
position: absolute;
left: 18px;
width: 100%;
height: 10px;
border-bottom: 1px lightgrey solid;
}
.bar {
position: absolute;
bottom: 0;
width: 20px;
}
#button1 {
position: relative;
top: 0;
width: 60px;
height: 20px;
}
.car {
position: absolute;
top: 10px;
}
.carType {
position: absolute;
bottom: -85px;
writing-mode: vertical-rl;
text-orientation: upright;
}
<div id="container">
<div id="border">
<div id="numberContainer">
<p class="num">10</p>
<p class="num">9</p>
<p class="num">8</p>
<p class="num">7</p>
<p class="num">6</p>
<p class="num">5</p>
<p class="num">4</p>
<p class="num">3</p>
<p class="num">2</p>
<p class="num">1</p>
<p class="num">0</p>
</div>
</div>
</div>
<input type="number" min="0" max="10" value="0" id="number"/>
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<button type="button" onclick="color()" id="button1">Submit</button>
[edit] This answer only colors the bars from left to right, having the lightest color to the left.
I would let the container have a white background and the bars to be black, and then add a gradient over everything, with help of a pseudo-element that have set mixed-blend-mode: lighten to only colorize the black bars.
As a bonus, I added another pseudo-element with a repeating linear gradient consisting of a really light grey to create the horizontal lines. I then added mixed-blend-mode: darken to this element to make them appear "under" the bars.
I also randomized the height of the bars, by randomizing a CSS property for each bar.
This solution scales, so it doesn't matter how many bars you got, you still get a gradient over all the of bars without having to change the CSS code.
let bars = document.querySelectorAll('.bar');
function randomize(max, min) {
min = min || 0;
return Math.floor(Math.random() * (max - min) + min);
}
for (const bar of bars) {
bar.style.setProperty('--bar-height', `${randomize(10, 2)}rem`);
}
.container {
position: relative;
display: inline-flex;
margin-left: 4.5rem;
align-items: flex-end;
background-color: #fff;
padding: 0px 1rem;
}
.container::before,
.container::after {
content: '';
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.container::before {
background: linear-gradient(to right, #fbe5d6, #843c0c);
mix-blend-mode: lighten;
}
.container::after {
background: repeating-linear-gradient(to top, #f4f1f1, #f4f1f1 1px, transparent 1px, transparent 1rem);
z-index: 10;
mix-blend-mode: darken;
}
.bar {
width: 1.5rem;
height: var(--bar-height);
background-color: #000;
}
.bar + .bar {
margin-left: 3rem;
}
<div class="container">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
Using a combination of my and Justin's answers, but for vanilla CSS.
This answer is using HSL and CSS variables to set the color and the height.
Randomized values
let bars = document.querySelectorAll('.bar');
function randomize(max, min) {
min = min || 0;
return Math.floor(Math.random() * (max - min) + min);
}
for (const bar of bars) {
let maxValue = 25;
let randomValue = randomize(maxValue, 2);
let height = randomValue/2;
let hue = '24deg';
let saturation = '82%';
let maxHue = 90;
let minHue = 30;
let hueRange = maxHue - minHue;
let lightness = `${maxHue - hueRange * (randomValue/maxValue)}%`;
bar.style.setProperty('--bar-height', `${height}rem`);
bar.style.setProperty('--color-background-bar', `hsl(${hue}, ${saturation}, ${lightness})`);
}
.container {
display: inline-flex;
margin-left: 4.5rem;
align-items: flex-end;
padding: 0px 1rem;
background: repeating-linear-gradient(to top, #eee, #eee 1px, transparent 1px, transparent 1rem);
}
.bar {
width: 1.5rem;
height: var(--bar-height);
background-color: var(--color-background-bar);
}
.bar + .bar {
margin-left: 3rem;
}
<div class="container">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
Increasing values
Static values ranging from 5 to 25, as seen in the OP's pic.
let bars = document.querySelectorAll('.bar');
bars.forEach((bar, index) => {
let maxValue = 25;
let customValue = 5 + index * 5;
let height = customValue/2;
let hue = '24deg';
let saturation = '82%';
let maxHue = 90;
let minHue = 30;
let hueRange = maxHue - minHue;
let lightness = `${maxHue - hueRange * (customValue/maxValue)}%`;
bar.style.setProperty('--bar-height', `${height}rem`);
bar.style.setProperty('--color-background-bar', `hsl(${hue}, ${saturation}, ${lightness})`);
});
.container {
display: inline-flex;
margin-left: 4.5rem;
align-items: flex-end;
padding: 0px 1rem;
background: repeating-linear-gradient(to top, #eee, #eee 1px, transparent 1px, transparent 1rem);
}
.bar {
width: 1.5rem;
height: var(--bar-height);
background-color: var(--color-background-bar);
}
.bar + .bar {
margin-left: 3rem;
}
<div class="container">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
Is it possible in CSS to change img src when div element is hovered?
<a class="template-image" href="/template-1978944/editor">
<div class="green"></div>
<div class="red"></div>
<div class="orange"></div>
<img src="/1978944/cover_small.jpg">
</a>
I tried
a.template-image[href^="/template-1978944"] div.green:hover ~ img {
content: url(/1978943/cover_small.jpg);"
}
a.template-image[href^="/template-1978944"] div.red:hover ~ img {
content: url(/1978942/cover_small.jpg);"
}
You can try some workaround by using url of background-image:
.orange {
height:50px;
background:orange;
}
.img {
width:400px;
height:200px;
}
.orange:hover + .img {
background-image:url(https://lorempixel.com/400/300/)!important;
}
<div class="orange">Hover me!</div>
<div class="img" style="background-image:url(https://lorempixel.com/400/200/)"></div>
You can also create the illusion of changing the srcby using pseudo-element with no need of markup change (you simply need to adjust the CSS used to correctly position the new image depending on your code)
.container > div {
display: inline-block;
height: 50px;
width: 50px;
}
.container {
position: relative;
}
.orange {
background: orange;
}
.red {
background: red;
}
.green {
background: green;
}
.orange:hover~img,
.red:hover~img,
.green:hover~img {
visibility: hidden;
}
.orange:hover::after {
content: url(https://lorempixel.com/400/200/);
position: absolute;
top: 50px;
left: 0;
}
.red:hover::after {
content: url(https://lorempixel.com/400/220/);
position: absolute;
top: 50px;
left: 0;
}
.green:hover::after {
content: url(https://lorempixel.com/400/300/);
position: absolute;
top: 50px;
left: 0;
}
<div class="container">
<div class="green"></div>
<div class="red"></div>
<div class="orange"></div>
<br>
<img src="https://lorempixel.com/400/200/">
</div>
You almost have it. Change 'content' to 'background' and use a transparent image for the image src
a.template-image[href^="/template-1978944"] div.green:hover ~ img {
content: url(http://lorempixel.com/100/100/sports/);"
}
a.template-image[href^="/template-1978944"] div.orange:hover ~ img {
content: url(http://lorempixel.com/100/100/cats/);"
}
a.template-image[href^="/template-1978944"] div.red:hover ~ img {
content: url(http://lorempixel.com/100/100/nature/);"
}
<a class="template-image" href="/template-1978944/editor">
<div class="green">GREEN</div>
<div class="red">RED</div>
<div class="orange">ORANGE</div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
</a>
UPDATE: if you need the original image, use it image as the default background.
It is not possible to change an image src attribute on hover an an element using only CSS.
However, it is possible to change the background-image property of an element on hover of another element in CSS. If you're willing to use a <div> element with a background instead of an <img> element, this will give you the same effect.
This can be done with the general sibling combinator (~), as is seen in the following:
.image {
height: 100px;
width: 100px;
background-image: url('http://via.placeholder.com/100');
}
.green:hover ~ .image {
background-image: url('http://via.placeholder.com/100/00ff00');
}
.red:hover ~ .image {
background-image: url('http://via.placeholder.com/100/ff0000');
}
.orange:hover ~ .image {
background-image: url('http://via.placeholder.com/100/ffa500');
}
<a class="template-image" href="/template-1978944/editor">
<div class="green">Green</div>
<div class="red">Red</div>
<div class="orange">Orange</div>
<div class="image"></div>
</a>
If you cannot update the HTML, you'll be forced to rely on a JavaScript solution. This can be done by first selecting the image with getElementsByTagName(), and then adding a function that updates the .src of the image during the .onmouseover of the other elements.
This can be seen in the following:
let image = document.getElementsByTagName('img')[0];
document.getElementsByClassName('green')[0].onmouseover = function() {
image.src = 'http://via.placeholder.com/100/00ff00';
};
document.getElementsByClassName('red')[0].onmouseover = function() {
image.src = 'http://via.placeholder.com/100/ff0000';
};
document.getElementsByClassName('orange')[0].onmouseover = function() {
image.src = 'http://via.placeholder.com/100/ffa500';
};
<a class="template-image" href="/template-1978944/editor">
<div class="green">Green</div>
<div class="red">Red</div>
<div class="orange">Orange</div>
<img src="http://via.placeholder.com/100">
</a>
I am wondering if there is a more nice way to set 4 different background colours in CSS. I have to make the following setup:
Is there a more clean and nice code I can make beside this i made, or is this the only way to do it? The code is just looking really ugly after my opinion.
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
<div class="bg4"></div>
.bg1 {
background-color: blue;
}
.bg2 {
background-color: red;
}
.bg3 {
background-color: green;
}
bg4 {
background-color: purple;
}
Personnaly, I would do that:
<div class="square square-blue"></div>
<div class="square square-red"></div>
<div class="square square-green"></div>
<div class="square square-purple"></div>
and in CSS:
.square{
border: 1px solid black; // and all params
}
.square-blue {
background-color: blue;
}
.square-green {
background-color: green;
}
.square-purple {
background-color: purple;
}
.square-red {
background-color: red;
}
for more readability (a small usage of BEM - http://getbem.com/introduction/ ).
You can make use of nth-child/nth-of-type here.
Check the following code snippet.
.container div:nth-child(1) {
background: blue;
}
div:nth-of-type(2) {
background: red;
}
div:nth-of-type(3) {
background: green;
}
div:nth-of-type(4) {
background: purple;
}
.container {
display: flex;
flex-wrap: wrap;
}
.container div {
width: 100vw;
height: 50px;
}
<div class="container">
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
<div class="bg4"></div>
</div>
you could add style='background-color: #123456' to each div, if you really had to because of some restriction of a templating engine (I can't imagine such a circumstance), but what you've got is fine in the context.
EDIT: What I mean by that is if you wanted to have, say a rainbow effect. In Perl/TemplateToolkit, I could see something like:
[% for ($code = 0; $code < $whatever_max_hex_is'; $code++) { %]
<div style='background-color: [%$code%]'></div>
[%END%]
Something like that. Totally untested, but I'm sure you get the drift.
I use AngularJS.
I need to make next things:
When I click 'Fade in' - the hidden element should appear (slide out) from left side. But it should slide behind 'MAIN BASE' element and it should look like DRAGGER drags it out from left to right. How to implement it? any ideas?
.base {
height: 50px;
width: 300px;
border: 1px solid blue;
}
.faded {
border: 1px solid greenyellow;
width: 200px;
}
.dragger {
height: 50px;
width: 100%;
border: 1px solid green;
}
.fade.ng-enter {
transition: 0.9s linear all;
width: 0;
}
.fade.ng-enter.ng-enter-active {
width: 100%;
}
<div layout="row">
<div class="base">MAIN BASE</div>
<div ng-if="bool" class=" faded fade"> Hidden element </div>
<div class="dragger">DRAGGER</div>
</div>
<button ng-click="bool=true">Fade In!</button>
<button ng-click="bool=false">Fade Out!</button>
Solved. used:
.animation('.slide', ['$animateCss', function($animateCss) {
return {
enter: function(element) {
return $animateCss(element, {
event: 'enter',
structural: true,
from: { 'margin-left': -300},
to: { 'margin-left': 0},
duration: 0.3
});
}
}
}])
<div layout="row">
<div class="base">MAIN BASE</div>
<div ng-if="bool" class=" faded slide"> Hidden element </div>
<div class="dragger">DRAGGER</div>
</div>
<button ng-click="bool=true">Fade In!</button>
<button ng-click="bool=false">Fade Out!</button>