mix-blend-mode para Mesclagem de Camadas
Mescle as cores dos elementos com o conteúdo subjacente usando modos de mesclagem no CSS no estilo do Photoshop.
mix-blend-mode para Mesclagem de Camadas é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
O que é mix-blend-mode?
mix-blend-mode controla como os pixels de um elemento se mesclam com os pixels dos elementos subjacentes — de modo semelhante aos modos de mesclagem de camadas do Photoshop. Ele afeta o elemento inteiro, incluindo o plano de fundo.
Normal (padrão)
normal é o padrão — não há mesclagem. O elemento superior cobre tudo que está abaixo dele.
multiply
multiply escurece multiplicando os valores dos pixels. O branco se torna transparente; o preto continua preto. É ideal para colocar imagens em tons escuros sobre fundos coloridos.
<div class="blend-wrapper">
<div class="texture"></div>
</div>
screen
screen é o inverso de multiply — clareia. O preto se torna transparente; o branco continua branco. É adequado para efeitos de luz e brilhos.
<div class="blend-wrapper">
<div class="glow"></div>
</div>
overlay
overlay combina multiply e screen. As áreas escuras ficam mais escuras; as áreas claras ficam mais claras. Aumenta o contraste preservando os tons médios.
<div class="blend-wrapper">
<div class="texture"></div>
</div>
difference
difference subtrai as cores. Cores idênticas produzem preto; cores opostas produzem branco. Cria efeitos psicodélicos de alto contraste.
<div class="blend-wrapper"><span class="inverted-text">Invert Me</span></div>
Luz intensa e luz suave
hard-light aplica multiply ou screen dependendo da cor de origem. soft-light é uma versão mais suave, com menor aumento de contraste.
Modos de mesclagem de cores
Esses modos mesclam apenas determinadas propriedades de cor:
hue— usa a matiz da camada superior e a saturação/luminosidade da camada inferiorsaturation— usa a saturação da camada superiorcolor— usa a matiz e a saturação da camada superior e a luminosidade da camada inferiorluminosity— usa a luminosidade da camada superior
Modo de cor para duotônicos
Crie imagens duotônicas sobrepondo um elemento colorido com mix-blend-mode: color:
<div class="duotone"></div>
Efeito de texto invertido
Texto que aparece invertido sobre qualquer plano de fundo:
<div class="blend-wrapper"><span class="inverted-label">Adaptive Label</span></div>
Contextos de empilhamento e modo de mesclagem
mix-blend-mode faz a mesclagem com elementos no mesmo contexto de empilhamento. A propriedade isolation: isolate em um elemento pai cria um novo contexto de empilhamento, impedindo que os modos de mesclagem afetem elementos fora do grupo isolado.
Verificação rápida
Qual modo de mesclagem torna transparentes as partes brancas de um elemento e preserva as áreas coloridas ou escuras — como papel transparente?
Recapitulação
mix-blend-mode mescla os pixels do elemento com o conteúdo subjacente. Modos principais: multiply (escurece, branco → transparente), screen (clareia, preto → transparente), overlay (aumenta o contraste), difference (subtração) e color (recolore imagens). Use isolation: isolate no elemento pai para limitar o escopo da mesclagem.
Perguntas Frequentes
A aula “mix-blend-mode para Mesclagem de Camadas” é grátis?
Sim — o texto completo de “mix-blend-mode para Mesclagem de Camadas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “mix-blend-mode para Mesclagem de Camadas”?
Mescle as cores dos elementos com o conteúdo subjacente usando modos de mesclagem no CSS no estilo do Photoshop. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “mix-blend-mode para Mesclagem de Camadas”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- filter: blur brightness contrast grayscale
- backdrop-filter para Efeito de Vidro Fosco
- mix-blend-mode para Mesclagem de Camadas
- Propriedade isolation