{"id":260647,"date":"2022-12-20T14:02:00","date_gmt":"2022-12-20T11:02:00","guid":{"rendered":"https:\/\/inform.click\/7-tecnicas-impressionantes-de-css3-que-voce-deveria-experimentar\/"},"modified":"2022-12-20T14:07:00","modified_gmt":"2022-12-20T11:07:00","slug":"7-tecnicas-impressionantes-de-css3-que-voce-deveria-experimentar","status":"publish","type":"post","link":"https:\/\/inform.click\/pt-pt\/7-tecnicas-impressionantes-de-css3-que-voce-deveria-experimentar\/","title":{"rendered":"7 t\u00e9cnicas impressionantes de CSS3 que voc\u00ea deveria experimentar"},"content":{"rendered":"

\n A evolu\u00e7\u00e3o do CSS (Cascading Style Sheets) com o HTML tem sido incr\u00edvel. Existem muitos recursos como Flexbox, CSS Grid e propriedades personalizadas CSS introduzidas recentemente.\n<\/p>\n

\n Seu avan\u00e7o cont\u00ednuo e enorme potencial s\u00e3o o que cativam os desenvolvedores a experimentar novas t\u00e9cnicas de CSS e ultrapassar os limites do que ele pode fazer. A combina\u00e7\u00e3o das tecnologias HTML 5 e CSS3 \u00e9, sem d\u00favida, um matador de flash.\n<\/p>\n

\n N\u00e3o \u00e9 \u00e0 toa que um plano de CSS bem executado pode controlar quase qualquer faceta do design e levar a uma melhor experi\u00eancia do usu\u00e1rio, o que \u00e9 absolutamente necess\u00e1rio. Afinal, os visitantes carregam certas expectativas quando visualizam seu site por meio de um laptop, desktop, tablet ou qualquer outro meio.\n<\/p>\n

\n Mas quais s\u00e3o as t\u00e9cnicas de CSS em alta? N\u00e3o \u00e9 uma pergunta \u00f3bvia que passa pela cabe\u00e7a quando falamos em criar um site atraente e f\u00e1cil de usar.\n<\/p>\n

\n \u00c9 por isso que criamos algumas das novas t\u00e9cnicas e dicas de CSS para dominar suas habilidades de web design. Cada um inclui algumas explica\u00e7\u00f5es e trechos de c\u00f3digo de exemplo.\n<\/p>\n

\n Ent\u00e3o vamos direto ao assunto!\n<\/p>\n

\n 1 Alinhar verticalmente com Flexbox
\n<\/h5>\n

\n Os desenvolvedores anteriores costumavam enfrentar muitas dificuldades para alinhar um texto ou qualquer outro elemento verticalmente centralizado. Mas agora, ap\u00f3s a introdu\u00e7\u00e3o da nova especifica\u00e7\u00e3o CSS3 Flexbox<\/strong>, as coisas ficaram muito mais f\u00e1ceis.\n<\/p>\n

\n A propriedade, display: flex<\/strong> fornece uma maneira f\u00e1cil para os usu\u00e1rios alinharem qualquer texto ou elemento no centro. Aqui est\u00e1 o c\u00f3digo de exemplo!\n<\/p>\n

\n HTML:<\/strong>\n<\/p>\n

\n Vertically centered!<\/code>\n<\/div>\n
 <\/pre>\n
\n  <strong>CSS:<\/strong><\/code>\n<\/p>\n
<code>.align-vertically {\n  background: #FFA500;\n  color: #hhh;\n  display: flex;\n  align-items: center;\n  height: 200px;\n}<\/code><\/code><\/pre>\n
\n  No c\u00f3digo CSS acima, display: flex descreve o layout Flexbox para o elemento, enquanto align-items: center; \u00e9 respons\u00e1vel pela centraliza\u00e7\u00e3o vertical do texto.\n<\/p>\n
\n  RESULTADO:<\/strong>\n<\/p>\n
\n  2 grade CSS responsiva
\n<\/h5>\n
\n  N\u00e3o torne sua grade uma exce\u00e7\u00e3o, torne-a responsiva tamb\u00e9m, como tudo em seu design.\n<\/p>\n
\n  Existem muitas maneiras pelas quais voc\u00ea pode tornar sua grade responsiva com o CSS Grid. E a melhor parte de us\u00e1-lo \u00e9 que voc\u00ea poder\u00e1 criar uma grade mais flex\u00edvel que lhe dar\u00e1 a apar\u00eancia desejada, independentemente do tamanho do dispositivo.\n<\/p>\n
\n  Al\u00e9m disso, a grade CSS tamb\u00e9m permite trabalhar com tamanhos de coluna desiguais e iguais. \u00c9 uma grande pe\u00e7a de tecnologia repleta de op\u00e7\u00f5es que d\u00e3o liberdade aos usu\u00e1rios para ter controle sobre seus projetos.\n<\/p>\n
\n  Voc\u00ea pode usar v\u00e1rios pontos de interrup\u00e7\u00e3o, a altura de v\u00e1rias dimens\u00f5es e fazer outros posicionamentos, conforme mostrado no exemplo abaixo.\n<\/p>\n
\n  HTML:<\/strong>\n<\/p>\n
\n  \u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n<\/div>\n
\n  <strong>CSS:<\/strong><\/code>\n<\/p>\n
<code>.grid\n {\n  display: grid;\n  grid-template-rows: repeat(5, 1fr);\n  grid-auto-columns: calc((100vh - 3em) \/ 4);\n  grid-auto-flow: column;\n  grid-gap: 1em;\n  height: 100vh;\n}\n.grid-item:nth-child(3n)\n {\n  background-color: purple;\n}\n.grid-item:nth-child(3n + 2)\n{\n  background-color: pink;\n}<\/code><\/code><\/pre>\n
\n  A unidade de fra\u00e7\u00e3o (fr) usada no c\u00f3digo CSS acima \u00e9 a unidade flex\u00edvel que separa o espa\u00e7o aberto de acordo com suas diretrizes. Cada declara\u00e7\u00e3o fr \u00e9 para a coluna, ent\u00e3o voc\u00ea pode somar as lacunas e deixar a grade pronta.\n<\/p>\n
\n  RESULTADO:<\/strong>\n<\/p>\n
\"\"<\/a><\/p>\n
\n  3 anima\u00e7\u00f5es de texto
\n<\/h5>\n
\n  Voc\u00ea pode ter criado anima\u00e7\u00f5es de plano de fundo com CSS, mas agora tamb\u00e9m influencia como os usu\u00e1rios interagem e se envolvem com os elementos de texto de um site. Desde ajustes de foco at\u00e9 fazer as palavras flutuarem no ar, o CCS3 tornou tudo isso poss\u00edvel.\n<\/p>\n
\n  Sites que n\u00e3o possuem muitos elementos atraentes para envolver seus usu\u00e1rios podem tirar o melhor proveito dessa caracter\u00edstica. Aqui est\u00e1 um pequeno exemplo disso.\n<\/p>\n
\n  HTML:<\/strong>\n<\/p>\n
\n