CSS for Developers and Out of the Box!!

cp-trans

Estive ontem – 01/10/2012, segunda-feira – no #horaextra Salvador. Mais uma vez uma boa dose de conversas sobre TI, discussões sobre testes, TDD, BDD, agilidade, #startupdojoba, etc. São boas horas de engradecimento pessoal e profissional.

Durante as conversas surgiu aquele papo de que ninguém gosta de CSS. Cada vez mais descubro que estou sozinho! Funcionalidades de um site, portal, sistema fazem diferença, mas, cada vez mais, vejo que um bom design e usabilidade bem trabalhada prende as pessoas no site. São dois vetores que, quanto maior a influência, mais usuários. Funcionalidade… BOM!! Site bonito… BOOOM!!!! Usabilidade 10… MUUUUUITO BOOOOOOOM!!!!!!!

Por isso, estou começando uma série de posts com dicas, truques, tutoriais sobre CSS com foco para desenvolvedores que não gostam ou não sabem CSS. Vou mostrar coisas que aprendi trabalhando em projetos pessoais e profissionais. Não me considero designer, ainda não sei escolher tão bem uma palheta de cores, mas estou me saindo até bem em alguns trabalhos. Dá pra fazer muita coisa com CSS? SIM!!! Com ele, conseguimos pegar isso…

Sem CSS
Sem CSS

Nisso…

Com CSS
Com CSS

Vejam que conseguimos fazer MUITO com CSS!!!

Estou trabalhando no momento em um pequeno sistema de visualização de log – acima é a página de login do sistema – de um outro sistema de infra-estrutura interna da empresa. Como é um sistema pequeno, estou conseguindo aplicar várias “ideias fora da caixa” usando CSS! Estou usando MUITO CSS 3!!!

Uma das ideias que queria ver se funcionava era tentar fazer um formulário diferente, com campos um ao lado do outro e os labels no estilo de fieldsets, com os campos acima a esquerda (igual a figura 2). Só para exemplificar, se usarmos um fieldset como no código abaixo:

<fieldset>
    <legend>Legenda</legend>
</fieldset>

O código acima, resulta em algo assim:

Legenda

Porque não fazer algo com esse formato com os campos? “Sair da caixa” daquele esquema label ao lado ou acima do campo de texto!!

Como consegui fazer? Vamos lá! Usando o seguinte código:

<label for="login">Login</label>
<input id="login_user" type="text" name="login" />

Tenho um label e um campo de texto. Desse jeito que está, sem CSS, fica o label a frente do campo de texto – como na figura 1. A ideia é aplicar um CSS que faça o label se deslocar de onde está para o local onde quer que ele fique.

label {
    background-color: #FFFFFF; /* Linha 1*/
    position: relative;
        left: 90px;
        top: -25px;
    z-index: 1000;
}

Explicações sobre o código:

  1. Linha 1  – A cor de fundo precisa ser branca (ou da cor de fundo da página) para que não apareça a linha do campo de texto (input) cortando o label.
  2. Linha 2 – Modifico a posição para relativa. Assim, o espaço do label continua sendo ocupado e posso transportar ele de acordo com a posição onde ele deveria estar.
  3. Linha 3 e 4 – Modificação de posicionamento do label. Mude os valores para que o encaixe que procura fique bom.
  4. Linha 5 – Como o label foi escrito antes do que o input, o input ficaria por cima. Por isso, configurei um z-index (posicionamento no eixo Z – para “fora” ou “dentro” da tela) com um valor alto para garantir que o label fique por cima.

Isso já seria o suficiente, mas tem um problema: labels podem ter comprimentos diferentes. Se usar desta maneira, pode fazer com que em alguns casos fiquem em um local bom, mas outros fiquem fora do lugar onde gostaríamos que estivesse. Então mais alguns ajustes usando o seletor de tipo e valor:

label[for="login"] {
    background-color: #FFFFFF;
    position: relative;
        left: 90px;
        top: -25px;
    z-index: 1000;
}

Assim, consegue-se ajustar para cada label separadamente, bastando colocar um novo valor – for="senha", por exemplo. Para quem não conhecia, este seletor bem útil quando queremos selecionar algo específico, mas não queremos criar uma classe. Podemos selecionar pelo valor de um atributo HTML. Neste caso, pelo valor do atributo for do label.

Espero ter contribuído um “tiquinho” para os desenvolvedores que morrem de medo de CSS. Basta pensar um pouco fora da caixa, saber como usar o CSS e trabalhar um pouquinho que conseguimos fazer alguns pequenos milagres!

No próximo post, vou mostrar como crie