This question already has answers here:
Color of stacked semi-transparent boxes depends on order?
(4 answers)
How do I give text or an image a transparent background using CSS?
(29 answers)
Closed 8 months ago.
The community reviewed whether to reopen this question 8 months ago and left it closed:
Original close reason(s) were not resolved
I have a site with a gradient background. That works fine. But, when I add a button to it, the colour changes to the one on the background. This is my CSS:
BTW, open the snippet on full-page, or it won't look clear
const leftSide = document.getElementById("playerLeft");
const rightSide = document.getElementById("playerRight");
const newGame = document.getElementById("newGame");
function setSelectedPlayer(position) {
switch (position) {
case 1:
rightSide.style.backgroundColor = "#ffffff80"
leftSide.style.backgroundColor = "#fff"
break;
case 2:
leftSide.style.backgroundColor = "#ffffff80"
rightSide.style.backgroundColor = "#fff"
break;
}
}
newGame.onpointerdown = function () {
newGame.style.top = "10px";
}
newGame.onpointerup = function () {
newGame.style.top = "-10px";
}
<!DOCTYPE html>
<html>
<head>
<title>Pig Game!</title>
<style>
body {
background-image: linear-gradient(90deg, hsla(217, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%);
align-items: center;
font-family: sans-serif;
}
#parent {
height: 70%;
width: 70%;
opacity: 30%;
position: absolute;
top: 20%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#title {
color: white;
position: absolute;
top: 10%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
font-size: 250%;
}
#playerLeft {
width: 50%;
height: 100%;
border-radius: 10px 0 0 10px;
float: left;
}
#playerRight {
width: 50%;
height: 100%;
border-radius: 0 10px 10px 0;
float: left;
}
.activePlayer {
background-color: rgba(255, 255, 255, 1);
}
.inActivePlayer {
background-color: rgba(255, 255, 255, 0.5);
}
.button {
border-radius: 40px;
border-color: white;
border-style: solid;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 20%;
height: 10%;
margin: auto;
background-color: white;
}
</style>
</head>
<body>
<h1 id="title">Pig Game!</h1>
<div id="parent">
<div class="activePlayer" id="playerLeft">
</div>
<div class="inActivePlayer" id="playerRight">
</div>
<button type="button" class="button buttonNewGame" id="newGame">Hi</button>
</div>
<script src="script.js"></script>
</body>
</html>
And the button with the text hi is not appearing white. Why is that so? And how can I make it white?
The opacity of #parent is 30% so it and everything inside it is translucent.
If you wanted to set the background of #parent to be translucent, then use a background-color with an alpha channel, don't use opacity.
Related
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 1 year ago.
I want to add after pseudo element for div. I did this in react. When I test it in codepen, it works in codepen. But in my local machine, it is not working. I applied z-index pseudo element only in codepen, But it works. In my project, Even I applied z-index for both parent div and pseudo element, it does not help. What mistake I did? Anyone, Please guide me. Thanks in Advance.
My code is:
HTML:
<div className='cards'>
<div className='card active'>Card</div>
<div className='card'>Card</div>
<div className='card'>Card</div>
</div>
CSS:
.card {
width: 300px;
height: 200px;
background-color: #fff;
border-radius: 5px;
&.active {
position: relative;
box-shadow: 10px 10px 60px rgba(0, 0, 0, 0.1);
z-index: 10;
&::after {
position: absolute;
content: "";
top: 0;
left: 0;
width: calc(100% + 5px);
height: calc(100% + 15px);
border-radius: 5px;
background-color: #923929;
z-index: -1000;
transform: rotateZ(-2deg);
transform-origin: top left;
}
}
}
.cards {
padding: 5rem;
display: flex;
gap: 20rem;
background-color: #92392920;
}
output is
without z-index for parent div output looks like this.
If you add z-index to parent you create new stacking context
Just remove z-index from parent element
UPD
Yes. also I need to add the background for section element
.what_we_do{
background-color: #fff6f6;
padding:5rem;
}
.card {
width: 300px;
height: 200px;
background-color: #fff;
border-radius: 5px
}
.card.active {
position: relative;
box-shadow: 10px 10px 60px rgba(0, 0, 0, 0.1);
}
.card.active::after {
position: absolute;
content: "";
top: 0;
left: 0;
width: calc(100% + 5px);
height: calc(100% + 15px);
border-radius: 5px;
background-color: #923929;
z-index: -1;
transform: rotateZ(-2deg);
transform-origin: top left;
}
.cards {
padding: 5rem;
display: flex;
gap: 20rem;
background-color: #92392920;;
position: relative;
z-index: 1;
}
<section class="what_we_do">
<div class="cards">
<div class="card active">Card</div>
<div class="card">Card</div>
<div class="card">Card</div>
</div>
</section>
UPD: from comment
I want to add effects for active card i.e. brown background for active card.
.card.active{
background-color:#923929;
}
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 2 years ago.
I am making an animated wave loading page, and I wanted to switch my current loader with a loading bar, but my loading bar seems to stick at the top I cant put it in the middle of the screen, where the current loader is, I have tried using the centered class that the current loader has and when I use that class the loading bar disapears, how could I do it?
<title>Loading...</title>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,400;1,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
</head>
<script>
var i = 0;
var txt = '...';
var speed = 250;
function letterbyletter() {
if (i < txt.length) {
document.getElementById("lbl").innerHTML += txt.charAt(i);
i++;
setTimeout(letterbyletter, speed);
}
}
var o = 0;
function move() {
if (o == 0) {
o = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
o = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
</script>
<body onload="letterbyletter(); move()">
<div class="waveWrapper waveAnimation">
<div id="myProgress">
<div id="myBar"></div>
</div>
<div class="centered"><div class="loader"></div></div>
<div class="centered" style="padding-top: 10%"><h4>A carregar as suas mensagens</h4><h4 id="lbl"></h4></div>
<div class="waveWrapperInner bgMiddle">
<div class="wave waveMiddle" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')"></div>
</div>
<div class="waveWrapperInner bgBottom">
<div class="wave waveBottom" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')"></div>
</div>
</div>
</body>
body{
background-color: #076585;
font-family: 'Lato', sans-serif !important;
}
.loader {
border: 8px solid #fff;
border-radius: 80%;
border-top: 8px solid #076585;
width: 60px;
height: 60px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#myProgress {
width: 100%;
background-color: #fff;
}
#myBar {
width: 1%;
height: 5px;
background-color: #000000;
}
h4{
position: relative;
display: inline-block;
font-weight: 2000;
font-size: 15px;
}
.centered{
position: fixed;
top: 50%;
left: 50%;
z-index: 20;
transform: translate(-50%, -50%);
}
.waveWrapper {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.waveWrapperInner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
background: linear-gradient(0deg, hsla(195, 90%, 27%, 1) 0%, hsla(0, 0%, 100%, 1) 100%, hsla(0, 0%, 100%, 1) 100%);
}
.bgMiddle {
z-index: 10;
opacity: 0.75;
}
.bgBottom {
z-index: 5;
}
.wave {
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
}
.waveMiddle {
background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
animation: move_wave 10s linear infinite;
}
.waveBottom {
background-size: 50% 100px;
}
.waveAnimation .waveBottom {
animation: move_wave 15s linear infinite;
}
Your class centered works for me. You can add it into your div #myProgress but you have to add margin auto to center your bar inside that div. This works when you need to center a display block element inside another display block element.
<div id="myProgress" class="centered">
<div id="myBar"></div>
</div>
#myBar {
width: 10%;
height: 5px;
background-color: #000000;
margin: 0 auto;
}
I want to invert text color based on the background of the text, like in this image: .
So I've tried the following code, but it didn't work:
#warp,
#text,
#tri {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
z-index: 1;
}
#warp {
background-color: orange;
}
#text {
text-align: center;
z-index: 3;
}
#text h1 {
margin: 0;
line-height: 150px;
mix-blend-mode: difference;
}
#tri {
background-color: black;
clip-path: polygon(0 0, 0 100%, 99.8% 150px);
-webkit-clip-path: polygon(0 0, 0 100%, 99.8% 150px);
z-index: 2;
}
<div id="warp">
<div id="text">
<h1>TEXT</h1>
</div>
<div id="tri"></div>
</div>
I found some results about background-image & inverted text, but I don't know how to do it with DIVs.
You can avoid clip-path by using linear-gradient as background and the mix-blend-mode will work perfectly:
#text {
width: 150px;
height: 150px;
z-index: 1;
}
#text {
text-align: center;
background: linear-gradient(to top right, black 50%, orange 51%);
}
#text h1 {
margin: 0;
line-height: 150px;
mix-blend-mode: difference;
color: #fff;
}
<div id="text">
<h1>TEXT</h1>
</div>
If you just add the same text to the tri layer, it works:
Edit: In order to allow selecting the text, I've added another transparent layer that wraps all the text as one unit. It does, however, makes updates more repetitive. As a solution, I've added the attached JavaScript code (which isn't necessary).
var text = "TEXT";
var textElements = document.getElementsByTagName("h1");
for (var i=0; i<textElements.length; i++) {
textElements[i].innerHTML = text;
}
#warp,
#text,
#tri,
#selectable {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
}
#warp {
background-color: orange;
}
#text {
text-align: center;
z-index: 1;
}
h1 {
margin: 0;
line-height: 150px;
mix-blend-mode: difference;
}
#tri {
background-color: black;
clip-path: polygon(0 0, 0 100%, 99.8% 150px);
-webkit-clip-path: polygon(0 0, 0 100%, 99.8% 150px);
z-index: 2;
color: blue;
text-align: center;
}
#selectable {
text-align: center;
z-index: 5;
color: transparent;
}
<div id="warp">
<div id="text">
<h1>TEXT</h1>
</div>
<div id="tri">
<h1>TEXT</h1>
</div>
<div id="selectable">
<h1>TEXT</h1>
</div>
</div>
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 3 years ago.
I've attached a picture to show the exact layout. The line in the photo is only there to show where the colors should change.
Here is some code I have tried but doesn't look how I want.
.block {
background-color: black;
left: -50;
height: 150px;
width: 100%;
transform: rotate(-40deg);
}
<body>
<div class="block">
</div>
</body>
You can use pseudo element with skew transformation :
body {
height: 100vh;
margin: 0;
background: yellow;
}
body:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 300px;
background: #000;
transform: skew(-30deg);
transform-origin:top;
}
To keep the same visual on resize, set a big fixed height for the pseudo element and center it:
html {
background: yellow;
}
html:before {
content: "";
position: fixed;
top: calc(50% - 1000px);
left: 0;
width: 500px;
height:2000px;
background: #000;
transform: skew(-15deg);
transform-origin:top;
}
Use a linear gradient at an angle
body {
margin:0;
}
div {
height: 100vh;
background: linear-gradient(105deg, black 25%, yellow 25%)
}
<div></div>
.left-sidebar {
position: absolute;
width: 20%;
background: #000;
transform: skewY(5px);
}
.content {
background: #fff;
}
The property that "curves" the div is this property in CSS transform: skew(X,Y).Try that, hope it helps.
But I suggest that you create 2 div side-by-side in order to get the desired effect.
I am trying to achieve something like this:
When I hover over an image, I would like to put on that image this dark color with some text and the icon.
I am stuck here. I found some tutorials but they didn't work out for this case.
Also, another issue -- every image has a different height. The width is always the same.
How can this effect be achieved?
You can achieve this with this simple CSS/HTML:
.image-container {
position: relative;
width: 200px;
height: 300px;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
HTML
<div class="image-container">
<img src="http://lorempixel.com/300/200" />
<div class="after">This is some content</div>
</div>
Demo: http://jsfiddle.net/6Mt3Q/
UPD: Here is one nice final demo with some extra stylings.
.image-container {
position: relative;
display: inline-block;
}
.image-container img {display: block;}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
.image-container .after .content {
position: absolute;
bottom: 0;
font-family: Arial;
text-align: center;
width: 100%;
box-sizing: border-box;
padding: 5px;
}
.image-container .after .zoom {
color: #DDD;
font-size: 48px;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -19px;
height: 50px;
width: 45px;
cursor: pointer;
}
.image-container .after .zoom:hover {
color: #FFF;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="image-container">
<img src="http://lorempixel.com/300/180" />
<div class="after">
<span class="content">This is some content. It can be long and span several lines.</span>
<span class="zoom">
<i class="fa fa-search"></i>
</span>
</div>
</div>
You could use a pseudo element for this, and have your image on a hover:
.image {
position: relative;
height: 300px;
width: 300px;
background: url(http://lorempixel.com/300/300);
}
.image:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: all 0.8s;
opacity: 0;
background: url(http://lorempixel.com/300/200);
background-size: 100% 100%;
}
.image:hover:before {
opacity: 0.8;
}
<div class="image"></div>
Putting this answer here as it is the top result in Google.
If you want a quick and simple way:
filter: brightness(0.2);
*Not compatible with IE
A bit late for this, but this thread comes up in Google as a top result when searching for an overlay method.
You could simply use a background-blend-mode
.foo {
background-image: url(images/image1.png), url(images/image2.png);
background-color: violet;
background-blend-mode: screen multiply;
}
What this does is it takes the second image, and it blends it with the background colour by using the multiply blend mode, and then it blends the first image with the second image and the background colour by using the screen blend mode. There are 16 different blend modes that you could use to achieve any overlay.
multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.
.bg-img{
text-align: center;
padding: 130px 0px;
width: 100% !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86)), url(your-img-path);
}