Ao percorrer este guia, voc\u00ea adquirir\u00e1 habilidades valiosas para elevar seus projetos web al\u00e9m do comum. E, com sorte, tamb\u00e9m encontrar\u00e1 inspira\u00e7\u00e3o pelo caminho.<\/p>\n
Transi\u00e7\u00f5es avan\u00e7adas de CSS<\/h2>\n
As transi\u00e7\u00f5es avan\u00e7adas de CSS tornam os elementos da interface do usu\u00e1rio interativos, envolventes e agrad\u00e1veis aos olhos. Imagine que voc\u00ea tenha um bot\u00e3o em seu site. Normalmente, ele fica ali parado, mas com as transi\u00e7\u00f5es CSS, quando algu\u00e9m passa o mouse sobre ele, ele muda de cor suavemente ou talvez aumente um pouco de tamanho.<\/p>\n
O conceito gira em torno da ideia de interpola\u00e7\u00e3o – transi\u00e7\u00e3o suave entre diferentes estados de uma propriedade CSS.<\/p>\n
Para criar esses efeitos, h\u00e1 v\u00e1rias propriedades CSS com as quais voc\u00ea precisa se familiarizar:<\/p>\n
- \n
- Propriedades de transi\u00e7\u00e3o<\/strong>: Incluem os detalhes da propriedade que voc\u00ea deseja animar (como
background-color<\/code> ouopacity<\/code>), a defini\u00e7\u00e3o da dura\u00e7\u00e3o da transi\u00e7\u00e3o e a decis\u00e3o sobre otransition-timing-function<\/code> (comoease-in<\/code> oulinear<\/code>), que determina como a transi\u00e7\u00e3o progride ao longo de sua dura\u00e7\u00e3o.<\/li>\n- Fun\u00e7\u00f5es de tempo<\/strong>: S\u00e3o essenciais, pois controlam a acelera\u00e7\u00e3o e a desacelera\u00e7\u00e3o da transi\u00e7\u00e3o. Uma das op\u00e7\u00f5es mais vers\u00e1teis aqui \u00e9 a fun\u00e7\u00e3o
cubic-bezier<\/code>. Essa fun\u00e7\u00e3o permite a cria\u00e7\u00e3o de curvas de velocidade personalizadas, dando a voc\u00ea controle total sobre o ritmo da transi\u00e7\u00e3o. No in\u00edcio, pode ser um pouco complicado, mas ferramentas como o cubic-bezier<\/a> facilitam a visualiza\u00e7\u00e3o e a cria\u00e7\u00e3o dessas curvas.<\/li>\n<\/ul>\n![\"cubic-bezier\"](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/cubic-bezier.png\")
Um exemplo de cubic-bezier em a\u00e7\u00e3o.<\/figcaption><\/figure>\n Aqui est\u00e1 um exemplo simples para ilustrar como voc\u00ea pode usar isso em seu CSS:<\/p>\n
.my-element {\n\ntransition-property: opacity;\n\ntransition-duration: 0.5s;\n\ntransition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);\n\n}\n<\/code><\/pre>\nNesse trecho, o site
.my-element<\/code> alterar\u00e1 sua opacidade com uma curva de velocidade exclusiva definida pela fun\u00e7\u00e3ocubic-bezier<\/code>. Essa curva determina um tipo espec\u00edfico de movimento, como come\u00e7ar devagar, aumentar a velocidade e diminuir a velocidade no final.<\/p>\nAo aplicar o
transition-timing-function<\/code> com valores personalizados, \u00e9 poss\u00edvel criar movimentos dos elementos web de forma mais natural, din\u00e2mica ou at\u00e9 mesmo de maneira distinta do padr\u00e3o. Essa \u00e9 uma ferramenta excelente para adicionar personalidade e sofistica\u00e7\u00e3o \u00e0s suas anima\u00e7\u00f5es na web.<\/p>\nQuando se trata de t\u00e9cnicas avan\u00e7adas, aqui est\u00e3o algumas que voc\u00ea pode considerar:<\/p>\n
- \n
- Gerenciando m\u00faltiplas propriedades:<\/strong> Por que se limitar a animar apenas um elemento? O CSS permite que voc\u00ea alinhe diversas propriedades e as anime todas simultaneamente. Isso \u00e9 ideal para adicionar camadas \u00e0 sua anima\u00e7\u00e3o.<\/li>\n
- Anima\u00e7\u00f5es sincronizadas<\/strong>: Voc\u00ea tamb\u00e9m pode alinhar diferentes propriedades para que se movam no mesmo ritmo, criando um efeito mais coordenado.<\/li>\n
- Transi\u00e7\u00f5es aninhadas<\/strong>: Aplique transi\u00e7\u00f5es a elementos dentro de um cont\u00eainer. Dessa forma, quando voc\u00ea interage com o cont\u00eainer, os elementos filhos se comportam como voc\u00ea preferir.<\/li>\n<\/ol>\n
Certifique-se de que essas anima\u00e7\u00f5es n\u00e3o apenas tenham boa apar\u00eancia, mas tamb\u00e9m sejam executadas sem problemas, especialmente em dispositivos menos potentes. O uso de propriedades como
transform<\/code> eopacity<\/code> \u00e9 uma medida inteligente, pois \u00e9 mais f\u00e1cil para os navegadores e n\u00e3o deve afetar muito o desempenho.<\/p>\nAl\u00e9m disso, um aviso ao navegador com a propriedade
will-change<\/code> ajuda voc\u00ea a se preparar para a a\u00e7\u00e3o, garantindo que tudo seja executado sem problemas.<\/p>\nEsta \u00e9 apenas uma observa\u00e7\u00e3o final sobre como garantir que isso funcione em todos os lugares: os navegadores podem ser exigentes. O uso de prefixos de fornecedor ajuda a garantir que suas transi\u00e7\u00f5es legais funcionem em diferentes navegadores. \u00c9 um pouco trabalhoso, mas ferramentas como os autoprefixers<\/a> podem cuidar disso para voc\u00ea, mantendo tudo sem complica\u00e7\u00f5es.<\/p>\n
Transforma\u00e7\u00f5es em CSS<\/h2>\n
As transforma\u00e7\u00f5es em CSS s\u00e3o excelentes para enriquecer seus designs web. Elas n\u00e3o se limitam apenas a mover elementos, mas tamb\u00e9m podem transformar totalmente a percep\u00e7\u00e3o de uma p\u00e1gina. A propriedade
transform<\/code> \u00e9 o principal recurso para voc\u00ea, sendo vers\u00e1til e podendo deslocar elementos de um local para outro, como deslizar uma imagem pela tela ou alterar seu tamanho – pense em fazer com que algo pare\u00e7a mais pr\u00f3ximo ou mais distante, assim como aumentar ou diminuir o zoom em uma foto.<\/p>\nE, se voc\u00ea quiser ser um pouco mais sofisticado, poder\u00e1 at\u00e9 mesmo fazer com que os elementos girem.<\/p>\n
A parte realmente impressionante aqui \u00e9 quando voc\u00ea adiciona transforma\u00e7\u00f5es em 3D \u00e0 mistura. Com fun\u00e7\u00f5es como
translate3d<\/code>,scale3d<\/code> erotate3d<\/code>, os elementos podem saltar da tela, criando uma experi\u00eancia mais imersiva diretamente no navegador.<\/p>\nVeja, por exemplo, o efeito de cart\u00e3o girat\u00f3rio. \u00c9 um recurso interessante em que um lado de um cart\u00e3o mostra determinadas informa\u00e7\u00f5es e, quando ele \u00e9 virado, um novo conte\u00fado \u00e9 revelado no outro lado. Esse elemento interativo pode realmente chamar a aten\u00e7\u00e3o de seus visitantes.<\/p>\n
O segredo para conseguir esse efeito \u00e9 usar a propriedade
backface-visibility<\/code> de forma eficaz. Isso garante que o verso do cart\u00e3o permane\u00e7a oculto<\/a> at\u00e9 que voc\u00ea o veja.<\/p>\nMas por que parar por a\u00ed? Ao combinar essas transforma\u00e7\u00f5es com transi\u00e7\u00f5es e anima\u00e7\u00f5es, voc\u00ea pode obter muito mais do seu CSS. Voc\u00ea pode ter um bot\u00e3o que aumenta elegantemente de tamanho ao passar o mouse sobre ele ou um \u00edcone que se move de forma divertida pela tela. Essas altera\u00e7\u00f5es din\u00e2micas acrescentam uma qualidade fluida aos elementos da sua p\u00e1gina web, tornando a experi\u00eancia do usu\u00e1rio ainda mais envolvente.<\/p>\n
O Designmodo oferece v\u00e1rios belos exemplos disso em a\u00e7\u00e3o. Primeiro, voc\u00ea pode ver o CSS para transforma\u00e7\u00f5es em 3D<\/a> detalhado. Em seguida, voc\u00ea pode ver o c\u00f3digo em a\u00e7\u00e3o<\/a>:<\/p>\n
![\"O](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/designmodo-spinning-donut.png\")
O Designmodo oferece um \u00f3timo exemplo de transforma\u00e7\u00f5es em 3D que funcionam perfeitamente.<\/figcaption><\/figure>\n Consultas de cont\u00eaineres<\/h2>\n
As consultas de cont\u00eaineres s\u00e3o outro aspecto do CSS que vale a pena explorar. Elas permitem que voc\u00ea estilize elementos com base no tamanho do seu cont\u00eainer em vez de apenas no tamanho total da tela. Pense da seguinte forma: Voc\u00ea tem uma caixa e quer que o material dentro dela tenha uma boa apar\u00eancia, independentemente do tamanho da caixa. As consultas de cont\u00eaineres s\u00e3o perfeitas para isso.<\/p>\n
Elas s\u00e3o muito \u00fateis quando voc\u00ea quer que diferentes partes da sua p\u00e1gina web, como barras laterais ou cart\u00f5es, mudem de apar\u00eancia dependendo do espa\u00e7o que t\u00eam. Cada componente pode decidir seu pr\u00f3prio estilo<\/a>, independentemente do restante da p\u00e1gina.<\/p>\n
Aqui est\u00e1 um resumo r\u00e1pido de como voc\u00ea pode us\u00e1-los:<\/p>\n
- \n
- Configure o cont\u00eainer<\/strong>: Primeiro, informe ao CSS qual parte da sua p\u00e1gina \u00e9 um cont\u00eainer. Isso \u00e9 feito utilizando propriedades como
container-type<\/code> econtainer-name<\/code>.<\/li>\n- Escreva suas consultas<\/strong>: Da mesma forma que as consultas de m\u00eddia, mas para cont\u00eaineres. Voc\u00ea escreve uma regra que diz: “Ei, se meu cont\u00eainer tiver pelo menos essa largura, fa\u00e7a essas altera\u00e7\u00f5es de estilo”<\/li>\n<\/ul>\n
Este \u00e9 o c\u00f3digo b\u00e1sico para isso:<\/p>\n
@container (min-width: 300px) {\n\n.component {\n\n\/* styles *\/\n\n}\n\n}<\/code><\/pre>\nNeste exemplo, os estilos da classe
.component<\/code> ser\u00e3o aplicados quando seu cont\u00eainer atingir uma largura m\u00ednima de 300px.<\/p>\nAgora, as consultas de cont\u00eainer podem ser usadas em v\u00e1rios cen\u00e1rios, como:<\/p>\n
- \n
- Barras laterais e rodap\u00e9s responsivos<\/strong>: Ajustar a largura e o layout das barras laterais ou rodap\u00e9s com base no tamanho do cont\u00eainer.<\/li>\n
- Cart\u00f5es responsivos<\/strong>: Alterar o layout ou o estilo dos cart\u00f5es em um layout de grade, ou flexbox com base na largura do seu cont\u00eainer.<\/li>\n<\/ul>\n
Embora as consultas de cont\u00eainer sejam compat\u00edveis com os principais navegadores, incluindo Chrome, Firefox, Safari e Edge, ainda \u00e9 uma boa pr\u00e1tica us\u00e1-las como um aprimoramento progressivo. Comece com estilos b\u00e1sicos para navegadores que n\u00e3o oferecem suporte e aprimore para aqueles que suportam consultas de cont\u00eaineres.<\/p>\n
Uso do Flexbox para alinhamento vertical<\/h2>\n
O Flexbox<\/a> \u00e9 uma ferramenta incrivelmente \u00fatil no CSS, especialmente quando se trata de alinhamento vertical. Embora j\u00e1 exista h\u00e1 algum tempo, ainda \u00e9 muito relevante, especialmente para alinhar itens ao longo do eixo transversal (que, dependendo do layout, pode ser vertical).<\/p>\n
Usando align-items para alinhamento vertical<\/h3>\n
A propriedade
align-items<\/code> no Flexbox \u00e9 a op\u00e7\u00e3o ideal para voc\u00ea alinhar itens verticalmente em um cont\u00eainer. Ela funciona quando o cont\u00eainer flex\u00edvel tem umflex-direction<\/code> de linhas. Essa propriedade permite que voc\u00ea controle como todos os filhos de um cont\u00eainer flex\u00edvel s\u00e3o alinhados ao longo do eixo transversal.<\/p>\nPor exemplo, se voc\u00ea tiver v\u00e1rios itens em um cont\u00eainer flex\u00edvel e quiser que todos eles sejam centralizados verticalmente, use
align-items: center;<\/code>. Aqui est\u00e3o as principais op\u00e7\u00f5es que voc\u00ea tem comalign-items<\/code>:<\/p>\n- \n
flex-start<\/code>: Alinha os itens ao in\u00edcio do cont\u00eainer.<\/li>\nflex-end<\/code>: Alinha os itens ao final do cont\u00eainer.<\/li>\ncenter<\/code>: Centraliza os itens no cont\u00eainer.<\/li>\nbaseline<\/code>: Alinha os itens com base em sua linha de base.<\/li>\nstretch<\/code>: Estica os itens para preencher o cont\u00eainer (comportamento padr\u00e3o).<\/li>\n<\/ul>\nUso do align-self para controle individual<\/h3>\n
Embora o
align-items<\/code> seja \u00f3timo para alinhar todos os itens em um cont\u00eainer, \u00e0s vezes voc\u00ea deseja alinhar apenas um item de forma diferente. \u00c9 por isso quealign-self<\/code> \u00e9 t\u00e3o \u00fatil. Essa propriedade permite que voc\u00ea substitua o valoralign-items<\/code> para itens flex\u00edveis individuais. Ela aceita os mesmos valores quealign-items<\/code>.<\/p>\nPor exemplo, suponha que voc\u00ea tenha um cont\u00eainer flex\u00edvel com
align-items: center;<\/code>, mas h\u00e1 um item que voc\u00ea deseja alinhar ao in\u00edcio. Voc\u00ea pode aplicaralign-self: flex-start;<\/code> a esse item espec\u00edfico. Essa \u00e9 uma \u00f3tima maneira de ter controle preciso sobre o alinhamento de itens individuais.<\/p>\nNo entanto, pode ser muito \u00fatil ver isso em a\u00e7\u00e3o.<\/p>\n
Digamos que voc\u00ea esteja projetando uma barra de navega\u00e7\u00e3o com uma logo, alguns links e uma barra de pesquisa. Voc\u00ea deseja que os links sejam centralizados, que a logo seja alinhado na parte superior e que a barra de pesquisa, seja alinhada na parte inferior.<\/p>\n
Veja como voc\u00ea poderia fazer isso:<\/p>\n
.nav-container {\n\ndisplay: flex;\n\nflex-direction: row;\n\nalign-items: center;\n\n}\n\n.logo {\n\nalign-self: flex-start;\n\n}\n\n.search-bar {\n\nalign-self: flex-end;\n\n}<\/code><\/pre>\nNeste exemplo, o
.nav-container<\/code> \u00e9 um cont\u00eainer flex\u00edvel com seus itens geralmente centralizados. A logo e a barra de pesquisa, no entanto, fogem dessa regra geral, alinhando-se ao in\u00edcio e ao final do cont\u00eainer, respectivamente.<\/p>\nFun\u00e7\u00f5es de cores modernas em CSS<\/h2>\n
As fun\u00e7\u00f5es de cores modernas no CSS evolu\u00edram significativamente, oferecendo maneiras mais sofisticadas de definir e manipular cores no design da web. Vamos nos aprofundar em algumas dessas fun\u00e7\u00f5es:<\/p>\n
1. rgb() e rgba()<\/h3>\n
A fun\u00e7\u00e3o
rgb()<\/code> \u00e9 uma maneira tradicional de definir cores usando os canais vermelho, verde e azul. Cada canal pode ter um valor entre 0 e 255. A variantergba()<\/code> adiciona um canal alfa para opacidade, sendo que 1 \u00e9 totalmente opaco e 0 \u00e9 totalmente transparente.<\/p>\nVoc\u00ea deve ter uma apar\u00eancia semelhante a esta:<\/p>\n
.example {\n\ncolor: rgb(255, 0, 0); \/* Red *\/\n\nbackground-color: rgba(255, 0, 0, 0.5); \/* Semi-transparent red *\/\n\n}<\/code><\/pre>\n2. hsl() e hsla()<\/h3>\n
hsl()<\/code> representam as cores em termos de Matiz, Satura\u00e7\u00e3o e Luminosidade, tornando mais intuitiva a sele\u00e7\u00e3o de varia\u00e7\u00f5es de cores. Assim comorgba()<\/code>,hsla()<\/code> inclui um canal alfa para opacidade. Assim:<\/p>\n.example {\n\ncolor: hsl(120, 100%, 50%); \/* Green *\/\n\nbackground-color: hsla(120, 100%, 50%, 0.3); \/* Semi-transparent green *\/\n\n}<\/code><\/pre>\n3. oklch() e oklab()<\/h3>\n
oklch()<\/code><\/a> eoklab()<\/code> s\u00e3o adi\u00e7\u00f5es mais recentes \u00e0s fun\u00e7\u00f5es de cores do CSS. Elas s\u00e3o baseadas no espa\u00e7o de cores CIELAB<\/a>, que foi projetado para ser perceptualmente uniforme. Isso significa que as altera\u00e7\u00f5es nos valores das cores correspondem mais de perto \u00e0s altera\u00e7\u00f5es percebidas pelo olho humano.<\/p>\nAgora, especificamente:<\/p>\n
- \n
oklab()<\/code> \u00e9 usado para definir cores em um espa\u00e7o perceptualmente uniforme.<\/li>\noklch()<\/code> \u00e9 semelhante, mas usa coordenadas cil\u00edndricas (luminosidade, croma e matiz).<\/li>\n<\/ul>\nEssas fun\u00e7\u00f5es permitem uma manipula\u00e7\u00e3o de cores mais precisa e intuitiva, especialmente para tarefas como a cria\u00e7\u00e3o de gradientes de cores suaves. Aqui est\u00e1 o que voc\u00ea pode ver em forma de c\u00f3digo:<\/p>\n
.example {\n\ncolor: oklch(75%, 0.25, 250); \/* A color in oklch *\/\n\nbackground-color: oklab(0.623, 0.172, -0.079); \/* A color in oklab *\/\n\n}<\/code><\/pre>\nImplementa\u00e7\u00e3o de esquemas de cores avan\u00e7ados<\/h3>\n
Com essas fun\u00e7\u00f5es, especialmente as mais avan\u00e7adas
oklch()<\/code> eoklab()<\/code>, voc\u00ea pode implementar esquemas de cores complexos que sejam visualmente consistentes e atraentes. Elas oferecem mais controle sobre como as cores s\u00e3o renderizadas e percebidas, garantindo que seus designs sejam esteticamente agrad\u00e1veis e acess\u00edveis.<\/p>\nAo combinar essas fun\u00e7\u00f5es de cores com recursos de CSS, como propriedades personalizadas (vari\u00e1veis CSS) e c\u00e1lculos, voc\u00ea pode desenvolver sistemas de cores din\u00e2micos e flex\u00edveis que se adaptam a diferentes temas, estados e ambientes.<\/p>\n
\u00c0 medida que os padr\u00f5es da web evoluem e o suporte dos navegadores a essas fun\u00e7\u00f5es se expande, a utiliza\u00e7\u00e3o dessas fun\u00e7\u00f5es de cores modernas pode melhorar significativamente o design visual e a experi\u00eancia do usu\u00e1rio nos seus projetos web.<\/p>\n
Curvar o texto ao redor das imagens<\/h2>\n
A propriedade CSS
shape-outside<\/code> oferece uma maneira criativa de envolver texto ao redor de imagens<\/a>, contribuindo para layouts mais din\u00e2micos e visualmente interessantes, al\u00e9m de estilos de imagem<\/a> mais avan\u00e7ados.<\/p>\nEla permite que voc\u00ea defina uma forma em torno da qual o conte\u00fado embutido deve ser envolvido. Isso \u00e9 \u00fatil para envolver o texto em torno de imagens em uma forma n\u00e3o retangular, criando layouts mais org\u00e2nicos e visualmente mais atraentes do que o envolvimento de texto retangular padr\u00e3o.<\/p>\n
Como isso funciona?<\/h3>\n
Voc\u00ea pode definir v\u00e1rias formas, como c\u00edrculos, elipses e pol\u00edgonos, ou at\u00e9 mesmo usar o canal alfa de uma imagem para determinar a forma.<\/p>\n
A propriedade
shape-outside<\/code> normalmente se aplica a elementos flutuantes. E quando voc\u00ea faz uma imagem flutuar e aplica umshape-outside<\/code>, o texto se envolve ao redor dela de acordo com a forma definida.<\/p>\nAqui est\u00e1 um exemplo b\u00e1sico de uso de shape-outside com um c\u00edrculo:<\/p>\n
.image {\n\nfloat: left;\n\nshape-outside: circle(50%);\n\nwidth: 200px;\n\nheight: 200px;\n\nmargin-right: 15px;\n\n}<\/code><\/pre>\nNeste exemplo, a classe
.image<\/code> \u00e9 aplicada a um elemento de imagem. Ele \u00e9 alinhado \u00e0 esquerda e oshape-outside: circle(50%);<\/code> cria uma forma circular em torno da qual o texto ser\u00e1 envolvido. O uso eficaz doshape-outside<\/code> pode abrir novas possibilidades em seus designs, permitindo que o texto contorne formas complexas, o que possibilita criar layouts com estilo de revistas e p\u00e1ginas da web visualmente atrativas.<\/p>\nModos de mescla CSS<\/h2>\n
Os modos de mescla CSS oferecem uma maneira eficiente de misturar cores e imagens, criando efeitos visuais exclusivos que tamb\u00e9m podem aprimorar seus designs. Esses modos de mesclagem permitem que voc\u00ea crie efeitos de texto envolventes, sobreposi\u00e7\u00f5es de imagens e padr\u00f5es de fundo complexos. Para que voc\u00ea possa usar o
background-blend-mode<\/code>, primeiro vamos falar sobre o que ele faz. Essa propriedade \u00e9 usada para definir como as imagens e a cor de fundo de um elemento devem se misturar. Por exemplo, se voc\u00ea tiver uma imagem de fundo e uma cor de fundo, poder\u00e1 mescl\u00e1-las usando diferentes modos de mesclagem, como multiplicar, tela, sobreposi\u00e7\u00e3o, etc. \u00c9 assim que o c\u00f3digo pode se parecer:<\/p>\n.element {\n\nbackground-image: url('image.jpg');\n\nbackground-color: blue;\n\nbackground-blend-mode: multiply;\n\n}<\/code><\/pre>\nAgora, o
mix-blend-mode<\/code> funciona mesclando o conte\u00fado de um elemento (inclusive imagens e texto) com seu plano de fundo. Isso \u00e9 particularmente \u00fatil para efeitos de texto<\/a> ou para sobrepor uma imagem sobre outra. Assim:<\/p>\n<\n\n.element {\n\nmix-blend-mode: screen;\n\n}<\/code><\/pre>\nModos de mesclagem populares<\/h3>\n
Para sua refer\u00eancia, aqui est\u00e3o alguns dos modos de mesclagem mais populares que voc\u00ea precisa conhecer para usar esse efeito adequadamente:<\/p>\n
- \n
- Multiply<\/strong>: Multiplica as cores da camada de mesclagem e da camada de base, resultando em uma cor mais escura.<\/li>\n
- Screen<\/strong>: Torna as cores mais claras, o oposto de multiplicar. \u00c9 \u00fatil para criar efeitos de luz.<\/li>\n
- Overlay<\/strong>: Combina os modos de mesclagem, multiplica\u00e7\u00e3o e tela. As partes claras da imagem ficam mais claras e as partes escuras ficam mais escuras.<\/li>\n
- Darken and lighten<\/strong>: Seleciona a cor mais escura ou mais clara, respectivamente.<\/li>\n
- Color dodge and color burn<\/strong>: Clarear ou escurecer a cor de base para refletir a cor de mesclagem.<\/li>\n
- Difference and exclusion<\/strong>: Usado para criar efeitos de cores mais art\u00edsticos e invertidos.<\/li>\n<\/ul>\n
Adapta\u00e7\u00e3o \u00e0s prefer\u00eancias do usu\u00e1rio<\/h2>\n
- Screen<\/strong>: Torna as cores mais claras, o oposto de multiplicar. \u00c9 \u00fatil para criar efeitos de luz.<\/li>\n
- Cart\u00f5es responsivos<\/strong>: Alterar o layout ou o estilo dos cart\u00f5es em um layout de grade, ou flexbox com base na largura do seu cont\u00eainer.<\/li>\n<\/ul>\n
- Escreva suas consultas<\/strong>: Da mesma forma que as consultas de m\u00eddia, mas para cont\u00eaineres. Voc\u00ea escreve uma regra que diz: “Ei, se meu cont\u00eainer tiver pelo menos essa largura, fa\u00e7a essas altera\u00e7\u00f5es de estilo”<\/li>\n<\/ul>\n
- Anima\u00e7\u00f5es sincronizadas<\/strong>: Voc\u00ea tamb\u00e9m pode alinhar diferentes propriedades para que se movam no mesmo ritmo, criando um efeito mais coordenado.<\/li>\n
- Fun\u00e7\u00f5es de tempo<\/strong>: S\u00e3o essenciais, pois controlam a acelera\u00e7\u00e3o e a desacelera\u00e7\u00e3o da transi\u00e7\u00e3o. Uma das op\u00e7\u00f5es mais vers\u00e1teis aqui \u00e9 a fun\u00e7\u00e3o