7 Principais tendências de CSS para 2019 – Ed Rodrigues
7 Principais tendências de CSS para 2019
Com o passar do tempo, o web design está ficando mais inovador. Em vez de apenas exibir informações, os sites são obras de arte, com animações complexas , layouts exclusivos e microinterações. Muitas dessas coisas são possíveis através de CSS.
O CSS dá estilo a páginas normais e chatas e permite que tudo que faz com que os sites sejam agradáveis ​​para interagir. 2019 traz muitos novos horizontes para web design, e estas são as 7 tendências de CSS que definirão o ano.
Gerador de Grade CSS
O padrão predominante para layouts baseados em grade é o Flexbox. Na verdade, no auge de 2018, quase 83% dos carregamentos de página no Chrome usavam o Flexbox . Mas um novo concorrente entrou no ringue.
Esse novo concorrente é o Grid . Ainda jovem e usando apenas o uso em cerca de 2,25% dos carregamentos de página, ele ainda disparou em popularidade, representando apenas 0,25% dos carregamentos de página no início de 2018.
A grade está sendo considerada melhor do que o Flexbox. O Flexbox oferece controle de alinhamento vertical ou horizontal, mas não ambos ao mesmo tempo. Grid, por outro lado, faz.
Especialistas em CSS atribuem a falta de popularidade ao fato de que a maioria dos grandes sites não a está usando. Afinal, os dados acima são baseados em exibições de página, não no número bruto de páginas que usam o Grid. Foi apenas recentemente que os principais sites adotaram o Flexbox, então faz sentido que eles não queiram fazer a mudança ainda.
2019 definitivamente verá o crescimento do Grid, no entanto, porque ele libera um grau de liberdade criativa que outras opções não oferecem.
Nem todas as linguagens são escritas e lidas da esquerda para a direita. Para idiomas que vão em outras direções, você pode usar a propriedade CSS de modo de escrita .
Flua texto de cima para baixo ou da direita para a esquerda e ajuste os valores horizontal e vertical. Você pode até exibir texto lateralmente na vertical, girar o texto para determinados desenhos e misturar scripts.
Animações Móveis
Animações como ferramenta de engajamento são cada vez mais populares. Os sites começarão a usar mais e mais ícones de carregamento animados, carregamentos de página com design limitado, etc. para manter a atenção do usuário.
Um exemplo disso em um site popular é o YouTube. Abra o aplicativo do YouTube para celular e navegue pelos vídeos. Se você parar por um segundo, o vídeo será reproduzido automaticamente com o som desligado e exibirá as legendas.
As animações também são usadas como indicadores de uma ação ou tarefa. Botões e listas animados também estão se tornando comuns. Leia tudo sobre o uso de animações CSS aqui .
Estruturas populares (Bulma, Tailwind, Bootstrap 4, etc.)
Estruturas CSS já existem há algum tempo, mas elas vêm crescendo em popularidade nos últimos anos. Se você precisar de uma cartilha sobre o que é um framework
Awwwards define um framework como:
"Um framework é um conjunto padronizado de conceitos, práticas e critérios para lidar com um tipo comum de problema, que pode ser usado como uma referência para nos ajudar a abordar e resolver novos problemas de natureza semelhante."
Conforme nos movemos para uma Web mais móvel, os frameworks estão se ajustando para compensar. O estilo e o design estão mudando, as animações e as ações estão se tornando mais comuns, e o foco na simplicidade e na experiência do usuário final é mais importante do que nunca!
Em 2019, muitos frameworks bem desenhados estão assumindo a liderança e ajudando os desenvolvedores e projetistas a embarcar mais rápido do que nunca. Alguns dos frameworks mais notáveis ​​que estão sendo usados ​​na web em 2019 são:
Foundation – Framework responsivo, mobile-first e usado como solução corporativa;
Bootstrap 4 – Bootstrap é um dos maiores frameworks CSS usados ​​em todo o mundo, a versão 4 vem com novos recursos para esquemas de cores e classes de utilitários;
Materializar – Estrutura popular focada em estilos de design de materiais;
Páginas Únicas, Navegações Experimentais
Com os sites se tornando quase tão sinônimos quanto tendo seu próprio perfil nas redes sociais, mais usuários estão se voltando para soluções mais simples e opções de página única para enviar tráfego para outros locais.
Linktree – Página simples com links para suas redes sociais, produtos, etc .;
Carrd – Sites de uma página simples, gratuitos e totalmente responsivos para praticamente qualquer coisa;
About.me – Site de portfólio mais profissional, semelhante ao LinkedIn, mas com espaço para criatividade;
Instapage – Criador principal de landing pages para empresas e startups;
Esses sites de página única estão sendo levados adiante com o uso criativo de CSS e estilo para aprimorar a experiência. A Next Web destacou 'navegações grandes e experimentais' como uma das '10 tendências de design da web que você não pode esconder em 2019 '. Então, por que as pessoas estão mudando para esses layouts interessantes?
Por causa da ação. Com os grandes botões e navegação focados, os usuários clicam imediatamente no local desejado. Seja uma loja, uma página informativa com horas / detalhes ou apenas um novo vídeo / música.
Mais e mais sites são simplesmente configurados como pontos de direcionamento para empresas, indivíduos ou grupos para enviar tráfego e depois distribuir. Os músicos usam o Linktree e outros serviços para compartilhar suas novas músicas em todas as plataformas de streaming e, no meio tempo, recebem uma parte da receita da afiliada.
Destaque de Carrie Cousins ​​para o ' Top 17 Web Design e UI Trends para 2019 ' da Designmodo , fontes variáveis ​​são definidas como "uma coleção de estilos mestres, com um mestre 'padrão' central (geralmente o estilo de fonte Regular) e múltiplos" eixos "registrados que amarram o mestre central aos outros mestres. Por exemplo, o eixo Peso pode conectar um mestre do estilo Light ao estilo padrão e ao mestre em estilo Negrito. Os estilos individuais que podem ser localizados ao longo deste eixo são chamados de "instâncias".
O que isso significa é que as fontes são mais responsivas e perfeitas em dispositivos e plataformas. Você pode dimensionar a largura, o dimensionamento e outros aspectos da fonte com mais facilidade sem saltar do peso da fonte para o peso da fonte ou alternar completamente as fontes.
Veja um exemplo da variável tipo 'Amstelvar' no GitHub. Leia também a análise completa sobre fontes variáveis e como elas mudarão a web do Google .
Por último, mas não menos importante, o encaixe de rolagem é uma técnica relativamente nova usada para encaixar os usuários em determinados pontos de rolagem. Em vez de um movimento fluido pela página ou da esquerda para a direita, você pode fazer com que a página role em incrementos. Usos populares disso são para percorrer produtos ou detalhes em uma página, percorrer uma experiência de leitura / leitura e deslizar para baixo uma página com blocos incrementais de informações.
Truques de CSS apresenta um ótimo guia sobre Prático CSS Scroll Snapping .
O guia contém informações sobre o suporte ao navegador, as práticas recomendadas e as propriedades que você deve usar para garantir que o ajuste de rolagem funcione conforme pretendido.