Todo sabemos que o CSS faz maravilhas, mas nem todos conhecem a fundo algumas coisas fantásticas que podem ser feitas utilizando simples linhas de código. Confira a seguir algumas dicas, extraídas do Inspect Element, que vão deixar seus trabalhos ainda mais bacanas.

1. Mude o cursor quando passar o mouse sobre botões HTML.

Não estamos falando de imagens como links, e sim dos botões normalmente usados em formulários: o cursor não se altera quando você rola o mouse sobre eles. Se você deseja fazer a “setinha” mudar para “mãozinha”, o código é:

 input.button { cursor: pointer; }

2. Remova as opções de formatação padrões dos navegadores.

Cada browser possui seus próprios estilos de formatação padrão, o que pode ser um problema para os desenvolvedores em algumas ocasiões. Felizmente, podemos resetar estas opções facilmente, usando o código abaixo criado pelo desenvolvedor Eric Meyer:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Importante: inclua o código antes de começar o seu no arquivo de estilos, ou ele ficará sobreposto à sua formatação.

3. Otimizando a propriedade focus em campos de formulário.

Otimize a experiência do usuário ao destacar campos de formulário ativos. O efeito é bacana e muito útil em termos de usabilidade.

O código exemplo, podendo ser adaptado às suas necessidades, é:

input.focus { border: 2px solid #972324; }

Veja dois exemplos: Autentic Jobs e Neutron Creations

4. Centralizar elementos horizontalmente.

Alguns designers sofrem com esta parte, mas a solução é simples. O código abaixo, por exemplo, posiciona a div #container e seu conteúdo no centro do browser, independente da resolução de tela do usuário.

#container { width: 960px; margin: 0 auto; }

A particularidade deste código é que um valor de width (largura) precisa ser definido, ou nada será alinhado.

5. Defina um estilo diferente para impressão da página.

Ao invés de criar uma nova página otimizada para a impressão, crie um estilo separado para ela! Adicione a linha de código abaixo ao HTML da página, lembrando de indicar o tipo de mídia (no caso, impressão):

<link rel="stylesheet" href="print.css" type="text/css" media="print">

Por hoje é só. Esperamos que tenham gostado das dicas!

Um grande abraço e até o próximo post!