0
Previous question: Convert Image to CSS
.counter{color:#fff;font-family:Tahoma;font-size:60px;font-weight:700;letter-spacing:12px;line-height:63px;padding:0 0 0 6px;height:70px;margin-top:-1px;position:relative;width:105px}
.cro_azul {
display: block;
width: 50px;
height: 67px;
background-color: #0000ff;
background-image: radial-gradient(circle at top left, blue 0%,rgba(255,255,255,0.5) 60%, blue 61%);
background-repeat: no-repeat;
background-size: 150% 90%;
background-position: top -15px left 0;
border-radius: 4px;
position: relative;
box-shadow: 0 0 10px rgba(0,0,0,0.50) inset;
}
.cro_azul::before {
content: "";
display: block;
width: 50px;
height: 67px;
background-color: #0000ff;
background-image: radial-gradient(circle at top left, blue 0%,rgba(255,255,255,0.5) 60%, blue 61%);
background-repeat: no-repeat;
background-size: 150% 90%;
background-position: top -15px left 0;
border-radius: 4px;
position: absolute;
left: 51px;
box-shadow: 0 0 10px rgba(0,0,0,0.50) inset;
}
.cro_vermelho {
display: block;
width: 50px;
height: 67px;
background-color: #e60000;
background-image: radial-gradient(circle at top left, #e60000 0%,rgba(255,255,255,0.5) 60%, #e60000 61%);
background-repeat: no-repeat;
background-size: 150% 90%;
background-position: top -15px left 0;
border-radius: 4px;
position: relative;
box-shadow: 0 0 10px rgba(0,0,0,0.15) inset;
}
.cro_vermelho::before {
content: "";
display: block;
width: 50px;
height: 67px;
background-color: #e60000;
background-image: radial-gradient(circle at top left, #e60000 0%,rgba(255,255,255,0.5) 60%, #e60000 61%);
background-repeat: no-repeat;
background-size: 150% 90%;
background-position: top -15px left 0;
border-radius: 4px;
position: absolute;
left: 51px;
box-shadow: 0 0 10px rgba(0,0,0,0.15) inset;
}
.cro_cinza {
display: block;
width: 50px;
height: 67px;
background-color: #bfbfbf;
background-image: radial-gradient(circle at top left, #bfbfbf 0%,rgba(255,255,255,0.5) 60%, #bfbfbf 61%);
background-repeat: no-repeat;
background-size: 150% 90%;
background-position: top -15px left 0;
border-radius: 4px;
position: relative;
box-shadow: 0 0 10px rgba(0,0,0,0.10) inset;
}
.cro_cinza::before {
content: "";
display: block;
width: 50px;
height: 67px;
background-color: #bfbfbf;
background-image: radial-gradient(circle at top left, #bfbfbf 0%,rgba(255,255,255,0.5) 60%, #bfbfbf 61%);
background-repeat: no-repeat;
background-size: 150% 90%;
background-position: top -15px left 0;
border-radius: 4px;
position: absolute;
left: 51px;
box-shadow: 0 0 10px rgba(0,0,0,0.10) inset;
} <div class="counter cro_azul">15</div><br>
<div class="counter cro_vermelho">15</div><br>
<div class="counter cro_cinza">15</div>It is a regressive stopwatch, so the numbers are always changed.
I have the following problem: it is not displaying the integer number in the two rectangles, actually this, but the second rectangle is superimposed on the number 5.
What alternative could I use to fix this problem?
It is necessary that the class be exactly with the word "counter", and the number cannot be separated as it appears integer inside the DIV. In case it would not be possible to display the number by the CSS.
Okay now I solved with z-index without needing tags involving the number. Look at the example to see how it turned out
– hugocsl
Strange, here it worked, but on the site with the z-index it did not appear the second rectangle, was invisible.
– Wendler
It must be because there is another element with CSS interfering with it. Or rather, with the "z-index: -1" it must have been under some other element, so you’re not seeing it. You can find which element is covering and put it with -2 for example. If you can’t put your entire code there....
– hugocsl
Everything has skype?
– Wendler
I’m on the job, young man. But take it easy, read the documentation of the Position and Z-index classes and look for some videos that you will get! https://developer.mozilla.org/en-US/docs/Web/CSS/position and here https://developer.mozilla.org/en-US/docs/Web/CSS/z-index in W3scholl also have some practical examples for you to see
– hugocsl
I managed to solve, I put a z-index:0 in the counter class. Very strange, why did this problem occur? There is no other z-index before.
– Wendler
All elements with some position are z-index 0 by default, but you can put positive or negative values if you need to as was the case here. If you solved the problem finish the question. It is not good to leave unanswered questions on the site. Tmj
– hugocsl