5 Dicas CSS ! Para quem quer melhorar o seu código HTML e CSS

5 Dicas CSS! Olá, primeiro quero que você saiba que estou escrevendo esse artigo a punho e realmente quero somar em sua carreira, quero que você melhore e evolua seu código css, por isso vou me atentar a passar as melhores dicas que posso passar atualmente.

1# Utilize o Inspetor sempre que puder

Inspecionar elemento é praticamente uma benção, lembro-me de quando não existia essa função e para testarmos era necessário sempre atualizar os arquivos do servidor e dar um refresh na página, hoje você consegue editar códigos de forma rápida no próprio navegador:

Ex: Google Crohme

Eu aprendi o Inspecionar Elemento com o pessoal da Provnet em 2011, se um dia vcs lerem isso, saibam que sou eternamente grato! 

O que você pode fazer com o Inspetor? Em resumo coisa pra porra… mas vou citar só algumas coisas:

• Adicionar ou Editar classes CSS em tempo real
• Adicionar qualquer tipo de comando CSS que o navegador suporte
• Testar o site em modo responsivo com diversos tipos de dispositivos
• Testar animações em tempo real

futuramente farei um post mais detalhado sobre esse assunto

2# Códigos curtos e simples

Digamos que você tem um menu <ul> com a classe “menu-topo” e você queira editar o <a> que estará dentro dele, em vez de criar uma classe para cada <a> você simplesmente pode utilizar a classe menu-topo como guia e definir que todos os <a> dentro dela devam seguir tal padrão:

<ul class=”menu-topo”>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Home</a></li>

</ul>

Agora para facilitar a sua vida, use o menor css possível para achar a classe do <a>

.menu-topo a{ color:#000; padding:15px; }

Olha que legal, com 1 linha de código eu consigo editar 4 tags <a> que nem classe tem!

3# Use transitions para efeitos elegantes

Transition é um código css que permite animação de início e fim, a partir do momento que você ativa, apenas um :hover já será animado, da para brincar bastante com padding, width, colors e margins. Experimente criar um <a href=”#” class=”botao”> Botão </a>

.botao {

transition: all linear 1s;

background: #666;

color:#000;

padding:10px;

}

.botao:hover{

background: #000;

color: #fff;

}

Olha que bacana o efeito de animação com cores! Utilize mais o transition e deixe seu projeto bem elegante!

#4 Utilize media querys

Media querys são um conjunto de definições de pré processador, ou seja ele verificará o tipo de media para definir qual será o código a ser lido pelas classes html/css.

@media screen and (min-width: 800px) {
  .content {width: 100%;}
}
@media screen and (min-width: 1024px) {
 .content {width: 1024px;} }

nesse caso verifique que o código de largura 100% será inserido na content apenas se a largura mínima da página for de 800px , e no código de baixo ele exibira caso a largura tenha pelo menos 1024px;

Utilize esses códigos para criar layouts responsivos e definir formas de resolver problemas apenas em cada layout!

Ideal para caçar breakpoints!

#5 Utilize o hexadecimal com alfa em cores para trabalhar com overlays

Overlay é uma técnica atual muito boa, consiste em você jogar uma camada de cor por cima de uma imagem, essa camada devera ter opacidade e uma cor que conversará em harmonia com o texto, eu uso essa técnica no meu site, e ela é usada em quase todos os projetos atuais. Muitos optam por fazer essa técnica diretamente na imagem via Adobe Photoshop, outros definem opacity, mas o que poucos sabem é que o canal HEXA COM ALFA, que é exatamente a opacidade singular de uma cor!

Eu pessoalmente prefiro utilizar canal alfa do que cor chapado, mesmo que eu já tenha decorado uma caralhada de códigos de cores

HEXA: ( #fff, #ff0, #335535, #666, #f4f4f4 … )

HEXA ALFA: (#f1f1f1a6, #7ed036a6, #2a5a49a6, #9ce4cba6 )