Regras CSS que todo desenvolvedor web deve saber

0

Com a experiência que aprendemos na área de webdesign (front-end), normalmente aprendemos e memorizamos inúmeros tipos de códigos, snippets e hacks. Com as CSS, particularmente, há uma série de declarações e regras que podem ser muito úteis para transformar o seu website e aumentar bastante as possibilidades de formatação, quando comparamos isso às técnicas antigas.

ball-457334_960_720

Neste artigo reunimos algumas dicas úteis e fáceis que todo desenvolvedor web — webdesigner/ front-end — precisa saber.

 

@media

A regra @media nos permite confinar estilos para nossa webpage na tela. Hoje em dia esta regra tem funções mais avançadas com as “media queries“, que são associadas à criação de sites “responsivos” e “adaptativos”, o que significa que se ajustam ao tamanho da tela do dispositivo onde estão sendo acessados.

É possível criar uma media query utilizando propriedades como min-width para ajustar seu layout de acordo com o tamanho do “viewport” do dispositivo do usuário.

binary-1414319_960_720

background-size

Aí está uma propriedade CSS3 bastante útil que ganhou suporte total nos navegadores modernos. Antigamente, para fazer com que uma imagem, definida como background, ficasse ajustada 100% (full size), de acordo com o tamanho do elemento que faz parte, era preciso hacks, algumas linhas de código e até javascripts. Agora apenas precisamos de uma linha de código, ou melhor, apenas uma propriedade: background-size

 

@font-face

Mais uma propriedade CSS3 que tem ajudado muito nos últimos tempos. Alguns anos atrás, existiam algumas limitações relativamente às fontes que podíamos utilizar em nossos sites. Mas atualmente, com a @font-face, existe uma quantidade enorme de possibilidades para se usar. Usando essa propriedade podemos usar fontes diferentes em nossos sites, deixando de ter limitações.

Existe uma série de fontes grátis disponíveis para uso com @font-face. Dê uma olhada nos sites Google Fonts e Font Squirrel.

 

margin: 0 auto;

É inacreditável que até agora não exista uma propriedade especifica para centralizar elementos. Mas até que isso isso aconteça, nós podemos usar o recurso de margem automática. Ao adicionarmos margin: 0 auto; em um elemento de bloco, ele será centralizado.

 

overflow:hidden

Existe uma enorme quantidade de hacks e soluções para auxiliar a resolver o problema com os elementos flutuantes. Este problema acontece quando temos, dentro de um elemento de bloco, outro elemento com float. Esse elemento que “flutua” não força a altura do elemento container, ou seja, a altura do elemento container não assiste a altura do elemento com float. Isto ocorre pois o elemento que flutua não considera o elemento container como pai.

Um jeito muito simples de remover os elementos flutuantes é através de overflow: hidden; no elemento container. Isto é muito interessante, porque não precisamos mais adicionar mais coisas desnecessárias no nosso código html, como o tão famoso <br style=”clear:both” />.

 

.clearfix

Para situações em que o overflow: hidden; não funciona, a melhor solução é a técnica “clearfix”.

 

color: rgba();

Imagens PNG são usadas para gerar efeitos de transparência em webdesign, mas devido a outro avanço, agora é possível criar transparências com a ajuda do modo de cor RGBa. Se você usar o RGBa, ao invés de valores hexadecimais, vai conseguir selecionar qualquer cor usando seus canais Green, Red e Blue, tal como definir o nível de opacidade (alpha).

 

input[type=”text”]

Este seletor assim como outros seletores, vão levar suas habilidades com CSS do nível intermediário para o avançado. Seletores de atributos, particularmente, são muito úteis para aperfeiçoar elementos sem que precisemos criar classes extras.

Você poderá manipular não só campos do tipo texto, como também checkbox, rádio, submit, file, password, etc.

 

transform: rotate(30deg);

Aqui está outra novidade das CSS3 que nos dá a chance de transformar os elementos. A propriedade transform pode alterar a forma de um elemento, incliná-lo, rotacioná-lo, ou mudar sua posição.

 

a { outline: none; }

Algumas vezes quando clicamos em um elemento de ligação (link), uma estranha borda pontilhada surge ao redor do elemento.

Se você quiser apagar isso, pode usar a propriedadeoutline:none , mas lembre-se que esse efeito é essencial para acessibilidade, por isso, lembre-se de adicionar :focus em seus elementos de ligação.

A propriedade outline também é útil para elementos input, para apagar a borda que o navegador insere ao redor do elemento.

:first-child e :last-child

Essas pseudo-classes permitem a você alterar somente o primeiro ou o último filho do elemento pai. Na maioria das vezes são muito úteis para apagar bordas de itens de uma lista.

Por hoje é tudo. Coloque essas dicas em pratica e programe com mais facilidade e elegância.

Deixe uma resposta