Criado por Alex Lende
A partir do WordPress 5.8, você pode colorir sua imagem e cobrir blocos com filtros duotônicos! Duotone pode adicionar um toque de cor aos seus designs e estilizar suas imagens para se integrar bem aos seus temas.
Filtros? Gosta no Instagram?
O Duotone não funciona exatamente da mesma maneira que os filtros do Instagram. Enquanto os filtros do Instagram fazem ajustes de cores (níveis/curvas de cores e às vezes uma vinheta para os editores de fotos entre nós), os novos filtros duotônicos substituem inteiramente as cores de suas imagens.
Você pode pensar no efeito duotônico como um filtro preto e branco, mas em vez de as sombras serem pretas e os realces serem brancos, você escolhe suas próprias cores para as sombras e realces.
Por exemplo, um filtro de tons de cinza pode ser criado selecionando preto e branco como cores de sombra/realce e um filtro sépia escolhendo marrom e castanho.
Cores análogas podem adicionar um efeito sutil e funcionar bem para fundos de capa em que o texto sobreposto ainda precisa se destacar.
Efeitos muito mais vibrantes e interessantes podem ser feitos com cores complementares.
Como adiciono filtro duotônico?
O efeito duotônico funciona melhor em imagens de alto contraste, portanto, comece com uma imagem com muitas áreas grandes escuras e claras. Na barra de ferramentas do bloco, use o botão de filtro e escolha uma predefinição:
Você também pode escolher cores da paleta do seu tema ou uma cor personalizada de sua preferência.
Além do bloco de imagem, o tom duplo pode ser aplicado a imagens e vídeo no bloco de capa.
Duotônico
Isso substituirá as imagens na minha biblioteca de mídia?
Imagens e vídeos em sua biblioteca de mídia permanecerão inalterados. O efeito duotônico funciona usando filtros SVG e os propriedade do filtro CSS , para que a imagem ou vídeo nunca seja modificado em sua biblioteca. Por um lado, isso significa que você pode aplicar um filtro a uma imagem vinculada que não existe em sua biblioteca de mídia. Por outro lado, isso significa que o filtro não aparecerá em feeds RSS ou locais que usam o URL da imagem diretamente.
Posso adicionar cores duotônicas a blocos ou temas que eu desenvolvo?
A API para adicionar cores duotônicas aos blocos é experimental no Gutenberg v10.6. Ainda assim, a documentação para usá-lo em seus próprios blocos pode ser encontrada e será atualizada em Suporta Cor no Manual do Editor de Bloco. Os temas podem adicionar predefinições duotônicas com theme.json. Mais informações podem ser encontradas em Configurações globais e predefinições de estilo no Manual do Editor de Bloco.
Experimente agora usando o plugin Gutenberg
O recurso duotônico foi lançado na versão 10.6 do plugin Gutenberg, então você pode experimentá-lo agora, antes do lançamento do WordPress 5.8 em julho.
Agradecimentos a @joen e @ mkaz para obter assistência para escrever e revisar esta postagem.