É possível usar condições no CSS?
Bem amigos, faz MUITO tempo que não escrevo aqui, mas hoje é feriado e nada melhor que abrir o Sublime para brincar com HTML e CSS não é mesmo?
O problema de hoje me foi apresentado pelo amigo Aldiran.
Ele precisava criar um menu com as seguintes condições:
- O menu tem duas áreas, uma para um botão de pergunta e outra para uma caixa de pesquisa.
- Essas duas áreas ficam uma do lado da outra.
- Quando o botão de pergunta existir na tela, a caixa de pesquisa deve ficar ao lado dela com o background cinza.
- Quando o botão de pergunta não existir na tela, a caixa de pesquisa deve ocupar 90% da largura da tela, ficar centralizada e receber uma borda vermelha.
Vamos ver isso melhor abaixo?
Esse é o menu completo, com as duas áreas:
Nesse caso, podemos usar algumas regras CSS que funcionam de forma parecida com um IF usado em programação.
Vamos lá.
Primeiro vamos criar uma área para o menu (#menu) e a área onde colocaremos a caixa de pesquisa (#cx-pesquisa).
O código deve ficar assim:
|
1 2 3 4 5 6 |
<div id="menu"> <div id="cx-pesquisa"> <input type="text" id="input-pesquisa"> <button id="pesquisa">PESQUISA</button> </div> </div> |
Feito isso, vamos criar alguns estilos básicos para organizar tudo. Eu vou usar somente o necessário para que os elementos fiquem em seus devidos lugares, não vou usar estilos para colorir ou ‘enfeitar’ o que veremos a seguir.
A primeira coisa é definir os estilos do #menu para que ele mantenha seus filhos #cx-pergunta e #cx-pesquisa lado a lado. Então vamos usar o ‘display: flex’.
|
1 2 3 4 5 |
#menu{ display: flex; border: 1px solid #ccc; padding: 5px; } |
Agora precisamos prestar atenção no que estamos fazendo. Primeiro vamos trabalhar os atributos padrão da nossa caixa de pesquisa, pois é ela que vai mudar quando a caixa de pergunta não existir. Portanto, vamos definir a largura dela como 90% e o margin como ‘margin:0 auto’, dessa forma, ela ficará centralizada naturalmente.
Uma coisa importante também, é definir o ‘display: flex’ do elemento #cx-pesquisa para que seus filhos, input de pesquisa (#input-pesquisa) e botão de pesquisa (#pesquisa), fiquem lado a lado.
|
1 2 3 4 5 6 |
#cx-pesquisa{ display: flex; width: 90%; margin: 0 auto; text-align: right; } |
Agora vamos definir a largura do input (#input-pesquisa) em 100% para que ele acompanhe a largura do pai dele (#cx-pesquisa).
|
1 2 3 |
#input-pesquisa{ width: 100%; } |
Pronto, se você fez isso tudo deve estar com esse código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<html> <head> <style> #menu{ display: flex; border: 1px solid #ccc; padding: 5px; } #cx-pesquisa{ display: flex; width: 90%; margin: 0 auto; text-align: right; } #input-pesquisa{ width: 100%; } </style> </head> <body> <div id="menu"> <div id="cx-pesquisa"> <input type="text" id="input-pesquisa"> <button id="pesquisa">PESQUISA</button> </div> </div> </body> </html> |
E seu resultado no Browser deve ser esse:
Se você chegou até aqui, tudo vai ficar mais fácil agora.
Nós precisamos criar um botão de perguntas dentro da área de perguntas (#cx-pergunta) e definir a largura da área de perguntas como 30%. Eu vou usar 30%, mas você pode usar a largura que achar melhor pro seu projeto.
Então, adicionando a área de perguntas (#cx-pergunta) com o botão de perguntas (#pergunta) o código fica assim:
|
1 2 3 4 5 6 7 8 9 |
<div id="menu"> <div id="cx-pergunta"> <button id="pergunta">PERGUNTA</button> </div> <div id="cx-pesquisa"> <input type="text" id="input-pesquisa"> <button id="pesquisa">PESQUISA</button> </div> </div> |
Agora vamos criar os estilos. Lembrando que vamos definir a largura da #cx-pergunta como 30%.
|
1 2 3 4 |
#cx-pergunta{ display: block; width: 30%; } |
E agora o macete, o IF no CSS.
Como nós definimos a largura da #cx-pergunta como 30% , vamos criar um IF para que a #cx-pesquisa tenha 70% toda vez que as duas estiverem juntas dentro do #menu e para que ela não tente ficar centralizada, nós vamos substituir o ‘margin: 0 auto’ por ‘margin: 0 0’ e vamos mudar a cor da borda também.
Nós faremos isso usando um sinal + entre os dois elementos no CSS.
Dessa forma, toda vez que #cx-pergunta for um elemento irmão de #cx-pesquisa as novas regras vão se aplicar à #cx-pesquisa.
O código é esse:
|
1 2 3 4 5 |
#cx-pergunta + #cx-pesquisa { width: 70%; margin: 0 0; border: 1px solid #f00; } |
Bem simples né?
Agora, quando você tiver a área de pergunta e a área de pesquisa dentro do menu, elas vão ficar lado a lado usando um IF no css.
O código final completo deve ser esse:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<html> <head> <style> #menu{ display: flex; border: 1px solid #ccc; padding: 5px; } #cx-pergunta{ display: block; width: 30%; } #cx-pesquisa{ display: flex; width: 90%; margin: 0 auto; text-align: right; } #input-pesquisa{ width: 100%; } #cx-pergunta + #cx-pesquisa { width: 70%; margin: 0 0; border: 1px solid #f00; } </style> </head> <body> <h3>COM O BOTAO DE PERGUNTA:</h3> <div id="menu"> <div id="cx-pergunta"> <button id="pergunta">PERGUNTA</button> </div> <div id="cx-pesquisa"> <input type="text" id="input-pesquisa"> <button id="pesquisa">PESQUISA</button> </div> </div> <h3>SEM O BOTAO DE PERGUNTA:</h3> <div id="menu"> <div id="cx-pesquisa"> <input type="text" id="input-pesquisa"> <button id="pesquisa">PESQUISA</button> </div> </div> </body> </html> |
