0

Pergunta anterior: Converter imagem para 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>

Trata-se de um cronômetro regressivo, então os números são alterados sempre.

Estou com o seguinte problema: ele não esta exibindo o número inteiro nos dois retângulos, na verdade esta, porém o segundo retângulo esta sobreposto ao número 5.

Que alternativa eu poderia utilizar para corrigir este problema?

É necessário que a classe seja exatamente com o palavra "counter", e o número não pode ser separado, pois ele aparece inteiro dentro da DIV. No caso não seria possível exibir o número pelo CSS.

7
  • Ok agora resolvi com z-index sem precisar de tags envolvendo o número. Olha lá o exemplo pra ver como ficou
    – hugocsl
    Commented 13/03/2018 às 19:52
  • Estranho, aqui ele funcionou, mas no site com o z-index ele não apareceu o segundo retângulo, ficou invisível.
    – Clebson
    Commented 13/03/2018 às 19:58
  • Deve ser porque tem outro elemento com CSS interferindo nele. Ou melhor, com o "z-index: -1" ele deve ter ficado por baixo de algum outro elemento, por isso vc não está vendo. Vc pode achar qual é esse elemento que está cobrindo e colocar ele com -2 por exemplo. Se não conseguir posta seu código inteiro ai....
    – hugocsl
    Commented 13/03/2018 às 20:06
  • Tudo tem skype?
    – Clebson
    Commented 13/03/2018 às 20:10
  • To no trampo jovem, aqui não da pra conversar. Mas vai com calma, da uma lida na documentação das classes Position e Z-index e procura uns vídeos que vc vai conseguir! developer.mozilla.org/pt-BR/docs/Web/CSS/position e aqui developer.mozilla.org/en-US/docs/Web/CSS/z-index no W3Scholl também tem uns exemplos práticos pra vc ver
    – hugocsl
    Commented 13/03/2018 às 20:12

1 Resposta 1

1

Você pode resolver isso com z-index: -1; no elemento ::after que está com position:absolute, assim o ::after fica por baixo de tudo e o número aparece inteiro!

Veja o exemplo.

.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;
    z-index: -1;
    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;
    z-index: -1;
    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;
    z-index: -1;
    left: 51px;
    box-shadow: 0 0 10px rgba(0,0,0,0.10) inset;
}
.counter > span {
    position: absolute;
    z-index: 1000;
}
<div class="counter cro_azul">15</div><br>
<div class="counter cro_vermelho">15</div><br>
<div class="counter cro_cinza">15</div>

1
  • Pois é, não pode ser dentro de um SPAM, ele gera só o número mesmo. :/
    – Clebson
    Commented 13/03/2018 às 19:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .