Nov.15

É 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:

menu com duas areas

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:

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’.

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.

Agora vamos definir a largura do input (#input-pesquisa) em 100% para que ele acompanhe a largura do pai dele (#cx-pesquisa).

Pronto, se você fez isso tudo deve estar com esse código:

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:

Agora vamos criar os estilos. Lembrando que vamos definir a largura da #cx-pergunta como 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:

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:

E o resultado final com as duas situações no Browser:

COM O BOTAO DE PERGUNTA:

SEM O BOTAO DE PERGUNTA:

Tags:
Compartilhe isso:
  • facebook
  • twitter
  • gplus

Sobre R.Junior

Deixe um comentário