Um dos recursos mais valiosos do Photoshop - sem dúvida, o recurso que o impulsionou para a concorrência - são os modos de mesclagem. Os modos de mesclagem levam dois pixels sobrepostos uns aos outros e os combinam de maneiras diferentes; por exemplo, o modo de mistura de cores mais escuras simplesmente renderiza o mais escuro dos dois pixels. Quando expandido em uma imagem inteira, os modos de mesclagem podem produzir alguns efeitos impressionantes.
Embora o Photoshop da Adobe não tenha inventado os modos de mesclagem, sua implementação é certamente a mais emulada. Mas agora, você não precisa do Photoshop para estilizar suas imagens dessa maneira, porque podemos fazer tudo dinamicamente com CSS3.
Como está, suporte ao navegador para CSS, a propriedade background-blend-mode está melhorando. Versões anteriores de navegadores exigiam prefixos de fornecedores e / ou a ativação de recursos experimentais, mas caniuse.com reporta suporte nas versões atuais do Chrome, Firefox e Opera, com o Safari seguindo em breve.
Ainda não há sinal de suporte ao IE, mas como os modos de mesclagem são um aprimoramento progressivo, podemos começar a considerar usá-los agora.
Há várias opções de modo de mesclagem nas recomendações de candidatos a CSS3, mas a mais útil para nossos propósitos é o modo de mesclagem de plano de fundo . Essa propriedade nos permite mesclar duas imagens, uma imagem e uma cor de fundo.
Aqui está o código que precisamos:
E aqui está nosso CSS básico:
.blend{width:782px;height:540px;background:#3db6b8 url("lighthouse.jpg") no-repeat center center;}Agora estamos prontos para adicionar os modos de mesclagem.
Para fazer isso, vamos adicionar outra classe ao nosso div, por exemplo, "multiplicar":
E então vamos criar uma segunda regra de estilo:
.blend.multiply{background-blend-mode: multiply;}Se você quiser dar uma olhada no código que você pode baixe os arquivos de origem aqui.
Multiplicar , como o nome sugere, multiplica o pixel de base pela cor de mesclagem, resultando em uma cor mais escura. Multiplicar o preto resulta em preto e a multiplicação do branco deixa a imagem inalterada.
background-blend-mode: multiply;Overlay é um modo de mistura complexo. A multiplicação depende da cor base: as cores claras ficam mais claras, as cores escuras ficam mais escuras.
background-blend-mode: overlay;O oposto polar de escurecer , clarear ilumina uma imagem comparando os dois pixels sobrepostos e escolhendo o mais claro dos dois.
background-blend-mode: lighten;A queima de cor é o oposto da cor esquivar , escurece a cor base, resultando em um aumento no contraste.
background-blend-mode: color-burn;A luz suave é semelhante à luz forte , mas em vez de Multiplicar ou filtrar as cores, os usos de luz suave esquivam-se e queimam-se para um efeito mais sutil.
background-blend-mode: soft-light;A exclusão é semelhante à diferença , mas produz menos contraste, portanto é um pouco mais utilizável.
background-blend-mode: exclusion;Saturação , como matiz , mescla dois dos valores da cor base com uma propriedade da cor da mesclagem, nesse caso a saturação.
background-blend-mode: saturation;A luminosidade é o oposto da cor , combina o matiz e a saturação da cor base e a luminosidade da cor da mescla.
background-blend-mode: luminosity;