11 truques CSS para aprender mais

0

Chega um ponto em qualquer tecnologia onde você acha que tudo pode ser feito, já está inventado. Quando o CSS apareceu pela primeira vez, era revolucionária, e ao longo do tempo evoluiu para permitir que os designers criassem atraentes e flexíveis trabalhos em detalhe. Mas ultimamente existem rumores de que o CSS estagnou. Hoje vamos mostrar que ainda há muito movimento no mundo da CSS, seja com novas propriedades ainda não exploradas, ou aspectos de CSS que não tenham conhecido anteriormente.

Aqui apresentamos alguns truques de CSS:

code-583073_960_720

  1. Ajuste as imagens para a paleta de cores do seu site.

Imagine uma conferência web com a sua própria paleta de cores e com muitos participantes, cada um com a sua imagem de perfil. Aplicar filtros em Photoshop para dimensionar tudo pode ser complexo, além de que obriga você a ter acesso a ações específicas do Photoshop. Uma solução é usar .png em tons de tons de cinza usando CSS e aplicando filtros. Isso permite ajustar qualquer imagem de perfil para a paleta de cores, e também pode reutilizar imagens de vários tipos. Você só precisa de uma nova CSS para cada regra.

  1. Compartilhe o espaço uniformemente sobre a última linha de uma grade.

Se você não sabe o número de objetos que são exibidos em uma grade, você pode usar Flexbox para distribuir igualmente a última linha. Assim, um único objecto vai ocupar toda a linha, se houver dois a ocupar a metade.

  1. Criar partículas de animações com box-shadow.

Misturando box-shadow com matemática e Sass, você pode criar curvas 2D graficamente imitando o movimento e criando animações em 3D que todos vão confundir com canvas.

  1. Transformar poliedros.

Você provavelmente já viu polígonos feitos com CSS, mas podemos transformar tudo em ferramenta muito mais poderosa. Aplicar transformações em elementos aninhados pode criar polígonos complexos com fundos ou fronteiras com um interior transparente. Usando as transformações 3D, podemos combinar formas 2D para fazer poliedros e torná-los em sólido, desfazer, refazer-los explodir e simulando WebGL.

computer-767776_960_720

  1. CALC () para a posição.

A propriedade calc () é útil para alterar margens, preenchimentos ou dimensões, e pode salvar quando você usá-lo para posicionar ou redimensionar fundos dentro, e combinar não só com as antigas unidades, mas também com a nova janela de exibição.

  1. Limpar modelo de caixa com a caixa-sizing.

Use a caixa-sizing para manter sua sanidade. Sem ele, um elemento com 250 pixels de largura e 25px de preenchimento, fica com uma largura de 300 pixels, e deixa a mistura de pixels com percentuais difíceis. Com a caixa-sizing: bordas border-box e padding são colocados na largura definida.

  1. Centro verticalmente com CSS.

Sempre foi difícil focar verticalmente algo com CSS, por exemplo, se você tem uma imagem com texto adjacente e quer centrá-la na vertical. Agora você pode usar Flexbox.

  1. Selecione um grupo de objetos relacionados.

Minimiza o tamanho de linhas de seletores CSS, utilizando nomes de classe, selecionando grupos de objetos relacionados.

  1. Controles de scripts.

Traços não valorizados na impressão, e alguns desenvolvedores usam o on-line hypens, mas poucos estão cientes dos benefícios que proporciona controlar essa propriedade. A regra geral é não usar mais de 2 linhas, você pode controlá-lo usando hifenize-limite de linhas. hyphenate-limit-chars também permite que você especifique o tamanho mínimo de uma palavra para adicionar um script, além do mínimo de caracteres antes e depois de uma quebra de linha no script.

  1. Use gradientes de maneiras incomuns.

Gradientes de fundo podem ser muito bem combinado com bordas ou listas. Com um pré-processador pode ser chamado de uma mistura de ambos código de reutilização, mas não o repeta manualmente. Não abuse porque gradientes podem ser um processo tedioso.

  1. Aproveite modos de escrita.

Modos de escrita permitem definir a direção na qual o texto flui. Algum texto na Ásia Oriental é escrito verticalmente, as linhas da direita para a esquerda, usando a escrita-mode: Vertica-rl (tb-rl no IE). O texto vertical não é usado em qualquer sistema europeu de escrita, mas pode ser útil para o cabeçalho de uma tabela onde você tem espaço horizontal limitado.

 

Espero que esses truques CSS ajudem você a renovar os seus pontos de vista sobre as possibilidades CSS no desenvolvimento e web design. Não se esqueça de experimentar estas técnicas em vários navegadores (muitos não são compatíveis com todos) antes de usá-los em seu site.

 

 

 

 

Deixe uma resposta