Jump to content
FabianoSouza

CSS condicional

Recommended Posts

Tenho uma situação em que preciso colorir o texto dentro de um elemento.

Caso seu valor seja 0, pinte de uma cor, caso seja maior do que 0 (zero) pinte de outra cor.

 

Como faço isso com CSS puro.

Estou pesquisando e tem a possibilidade de criar condições no CSS....alguém ajuda?

 

Valew!

Share this post


Link to post
Share on other sites

Para tal você precisa de pré processadores de css (veja esse por exemplo: sass).

Existe uma desvantagem grande nisso, tempo de carregamento e processamento lento.

 

A melhor forma de executar tal afim é por meio de javascript alterando características do html pós carregado, ou por linguagem de servidor já entregado com html definido ao cliente.

Em ambos dois casos é infinitamente melhor que usar um pré processador.

Share this post


Link to post
Share on other sites

Fabiano,

O projeto que está desenvolvendo é em PHP? Ou HTML e CSS puro?

Se for em PHP ou qualquer outra linguagem processada, acredito que o mais viável seria você faz as condicionais na programação e entregar uma classe pra pintar com CSS.

 

Exemplo em PHP:

<?php
$valor = 10;
switch ($valor) {
	case 1: $cor = 'laranja'; break;
	case 2: $cor = 'verde'; break;
	case 3: $cor = 'azul'; break;
	default: $cor = 'rosa'; break;
}
?>
<div class="cor-<?= $cor; ?>">
  Aqui vem o conteúdo da DIV.
</div>

 

No caso acima, você vai ter o retorno em classes, exemplo:

cor-laranja

cor-verde

cor-azul

cor-rosa

 

Aí é só você criar as classes no CSS e trabalhar como quiser.

 

Um abraço!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Blasius
      Olá pessoal.
       
      Estou treinando códigos em js e quero fazer uma calculadora;  a ideia é a seguinte: 
       
      o usuário coloca os números no input, e escolhe qual operação ele quer em um select.
      Porém o js sempre me retorna o valor 0, ja revisei o código muitas vezes e não encontro o erro.
       
       ---------------------------------- HTML---------------------------------------------------
       
      <body>
          <h1> Calculadora </h1> 
       
          <p> Digite um número: <input type="number" id="valor1" name="nValor1"> </p>
          
              <select id="operador">
                      <option value="vezes" id="multiplicacao">  vezes * </option>
              </select>
       
          <p>Digite um número: <input type="number" id="valor2" name="nValor2"> </p>
          <input type="submit" value="calcular" onclick="calcular()">    // obs** com o type="button" também não funcionou

          <div id="divRes"> Aqui vai o resultado! </div>   
       
      <script src="calculadora.js">
          
      </script>
      </body>
       
      -----------------------------------------------------------------  JAVASCRIPT  ------------------------------------------------------------------
       
      let v1 = document.getElementById('valor1');
      let valor1 = Number(v1.value)
       
      let v2  = document.getElementById('valor2');
      let valor2 = Number(v2.value)
       
      let operador = document.getElementById('operador').selectedIndex;
      let divRes = document.getElementById('divRes')
       
       
      function calcular(){
          let resultado = " "

          if (document.getElementById("multiplicacao").selected = true ) {
              
              resultado = (valor1 * valor2) 
              divRes.innerHTML= `${resultado}`
              console.log(typeof valor1, typeof valor2, typeof resultado) // todos retornam number
        
         } else {
              alert ('teste')
          }
      }
       
    • By LucasRochaPL
      Olá a todos, estou construindo um pequeno site para a empresa que eu trabalho atualmente, porém como ainda sou iniciante estou tendo algumas dificuldades, e uma delas é que eu não consigo colocar as divs lado a lado, tentei varias coisas como usar o inline e float, mas fica tudo bem bagunçado, se vocês puderem por favor dar alguma dica ou me dizer oque estou fazendo de errado.
      <style> * {box-sizing: border-box;}   .container {   position: relative;   width: 50%;   max-width: 300px; }   .image {   display: block;   width: 100%;   height: auto; }   .overlay {   position: absolute;    bottom: 0;    background: rgb(0, 0, 0);   background: rgba(0, 0, 0, 0.5); /* Black see-through */   color: #f1f1f1;    width: 100%;   transition: .5s ease;   opacity:0;   color: white;   font-size: 20px;   padding: 20px;   text-align: center; }   .container:hover .overlay {   opacity: 1; } .container::after {   content: "";   clear: both;   display: table; } </style>   <div class="titulo">Produtos</div> <p>A Gap conta com uma grande variedade de      rádios e equipamentos, para atender melhor      a necessidade de nossos clientes, trabalhamos com rádios moveis,      portáteis e equipamentos para videomonitoramento. </p>   <div class="titulo">Portáteis</div> <div class="container">     <img src="products/images/dep450.jpg" alt="rádio motorola DEP450" class="image">     <div class="overlay">Motorola DEP450</div> </div> <div class="container">     <img src="products/images/ep450.jpg" alt="rádio motorola EP450" class="image">     <div class="overlay">Motorola EP450</div> </div> <div class="container">     <img src="products/images/dgp8050.jpg" alt="rádio motorola DGP8050" class="image">     <div class="overlay">Motorola DGP8050</div> </div>   <div class="titulo">Móveis</div>   <div class="container">     <img src="products/images/dem300.jpg" alt="rádio motorola DGM5000" class="image">     <div class="overlay">Motorola DEM300</div> </div>   <div class="titulo">Videomonitoramento</div>   <div class="container">     <img src="products/images/intelbrass3330.jpg" alt="camera " class="image">     <div class="overlay">Câmera Intelbras S3330</div> </div>   
    • By ThosuZ
      Olá, pessoal! Estou tentando criar um menu que, quando rola o scroll, ele muda (diminui o height e adiciona um background). Porém, aparentemente, nenhum código js tá funcionando... já tentei bastante coisa. Um dos tutoriais que usei: https://www.anicasagrande.com.br/menu-fixo-no-topo-que-muda-cor-com-rolagem/
       
      Como fiz:
       
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript"> (function () { var menu = document.getElementById('menuone'); // colocar em cache window.addEventListener('scroll', function () { if (window.scrollY > 50) menu.classList.add('menutwo'); // > 0 ou outro valor desejado else menu.classList.remove('menutwo'); }); })(); </script> <div class="menuone"> <nav class="menufixo"> <div class="menucenter"> <ul class="menu"> <li class="logomenu"><img class="iconmenu" src="images/logotipo-amarelo.png" width="105px" height="100%"/></li> <li class="menulinks"><a class="botoesmenu" href="#">Home</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Serviços</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Portfólio</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Quem somos</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Contato</a></li> </ul> </div> </nav> </div> <div class="menutwo"> <nav class="menususpenso"> <div class="menucentertwo"> <ul class="menut"> <li class="logomenut"><img class="iconmenut" src="images/Isotipo-amarelo.png" width="38px" height="100%"/></li> <li class="menulinkst"><a class="botoesmenut" href="#">Home</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Serviços</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Portfólio</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Quem somos</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Contato</a></li> </ul> </div> </nav> </div> /* Menu settings before scrolling */ .menuone { display: block; } .menufixo { padding: 1px; margin: 10px -8px -8px -8px; position: fixed; top: 5; left: 2; width: 100%; } .menucenter { width: 1200px; margin: 0 auto; } .menu { text-transform: uppercase; list-style: none; } .logomenu { margin-right: 500px; display: inline-block; } .iconmenu { margin: -15px; } .botoesmenu { color: #f7c620; font-family: 'Bahnschrift Light', sans-serif; text-decoration: none; transition: color 1s; padding: 10px; } .botoesmenu:hover { color: #fff; } .menulinks { color: #fff; display: inline-block; margin: 8px; } /* Menu settings after scrolling */ .menutwo { display: block; } .menususpenso { padding: 1px; margin: 0px -8px; position: fixed; top: 5; left: 2; width: 100%; background: #8c05bd; } .menucentertwo { width: 1200px; margin: 0 auto; } .menut { text-transform: uppercase; list-style: none; } .logomenut { margin-right: 500px; display: inline-block; } .iconmenut { margin: -13px; } .botoesmenut { color: #f7c620; font-family: 'Bahnschrift Light', sans-serif; text-decoration: none; transition: color 1s; padding: 10px; } .botoesmenut:hover { color: #fff; } .menulinkst { color: #fff; display: inline-block; margin: 0 8px; } Perdão pelos códigos grandes.
      Gostaria muito de uma orientação pra conseguir fazer, mas queria muito manter a atual estilização do menu.
    • By henriquers
      Bom Dia a todos,
       
      Estou com um problema implementei o Plugin do Bootstrap DatePicker mas estou tendo problema para ajustar o tamanho, ele esta saindo da borda dele.

       
      Ele esta com esse problema, alguem sabe o que posso fazer para arrumar. 
      script -> 
       
      $('.datepicker').datepicker({     startDate: '-10y',     format: "dd/mm/yyyy",     todayBtn: "linked",     forceParse: false,     autoclose: true,     todayHighlight: true,     language: 'pt-BR',   });
    • By ThosuZ
      Boa tarde, pessoal! Minha dúvida é simples. Gostaria de saber apenas o nome da animação desse site: https://www.think-mario.com/
      Quero o nome pra pesquisar sobre e aprender. A animação é quando vamos abaixando o scroll, as coisas vão surgindo, e eu acredito que seja com js.
       
      Abraços!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.