Direção de arte para a Web usando formas CSS

Publicados: 2022-03-10

Resumo rápido ↬ Designer e autor de “Art Direction for the Web”, Andy Clarke, nunca teve medo de ultrapassar limites ao usar CSS para criar novos designs interessantes. Neste tutorial, ele vai além das formas básicas de CSS e mostra como você pode usá-las para criar cinco tipos de layouts distintos e envolventes para seus designs direcionados à arte.

No ano passado, Rachel Andrew escreveu um artigo que deu uma nova olhada em CSS Shapes, no qual ela reintroduziu os leitores no básico do uso de CSS Shapes. Para qualquer pessoa interessada em entender como usar propriedades como shape-outside , shape-margin e shape-image-threshold , Rachel's é o primer ideal.

Eu vi muitos exemplos de uso das propriedades, mas muito poucos vão além das Formas Básicas, incluindo circle() , ellipse() , inset() . Mesmo exemplos usando formas polygon() raramente vão muito além deles. Considerando as oportunidades criativas que o CSS Shapes oferece, isso é decepcionante. Mas, tenho certeza que com um pouco de inspiração e imaginação, podemos fazer designs mais diferenciados e envolventes. Então, vou mostrar como usar CSS Shapes para criar os cinco tipos diferentes de layout a seguir:

Formas em V
padrões Z
Formas curvas
Formas diagonais
Formas giradas

Um pouco de inspiração

Infelizmente, você não encontrará muitos exemplos inspiradores de sites que usam CSS Shapes. Isso não significa que a inspiração não está lá fora - você só precisa olhar um pouco mais longe em publicidade, revista e design de pôsteres. No entanto, seria tolice meramente imitar o trabalho de uma era e meio anteriores.

Você pode encontrar inspiração em lugares surpreendentes, como esses anúncios vintage.

Nos últimos anos, enchi as pastas do Dropbox com inspiração e realmente deveria mover esses exemplos para o Pinterest. Felizmente, Kristopher Van Sant tem sido mais diligente do que eu na compilação de um quadro do Pinterest cheio de exemplos inspiradores de 'Formas de texto'.

As formas adicionam energia ao design e esse movimento atrai as pessoas. Elas ajudam a conectar o público com sua história e fazem conexões mais estreitas entre seu conteúdo visual e escrito.

Quando você precisar que o conteúdo flua em torno de uma forma, use a propriedade shape-outside . Você deve flutuar um elemento para a esquerda ou para a direita para que shape-outside tenha algum efeito.

  img { float: <values>; shape-outside: <values>; }
img { float: <values>; shape-outside: <values>; }

NB: Quando você fluir conteúdo em torno de formas, tome cuidado para não permitir que nenhuma linha de texto fique muito estreita e caiba apenas uma ou duas palavras.

Muitas vezes, precisa surpreendentemente pouca marcação para desenvolver layouts dinâmicos e originais. Meu HTML para esta série de cinco designs consiste apenas em um cabeçalho e elementos principais, figuras e imagens, e geralmente não é mais complicado do que isso:

  <header role="banner"> <h1>Mini Cooper</h1> </header> <figure> <img src="mini.png" alt="Mini Cooper"> </figure> <main> … </main>
<header role="banner"> <h1>Mini Cooper</h1> </header> <figure> <img src="mini.png" alt="Mini Cooper"> </figure> <main> … </main>

1. Formas em V

Para mim, um dos aspectos mais incríveis do CSS moderno é que posso criar uma forma a partir do canal alfa de uma imagem parcialmente transparente sem a necessidade de desenhar um caminho de polígono. Eu só preciso criar uma imagem, e então um navegador cuidará do resto.

Acho que esta é uma das adições mais interessantes ao CSS e torna o desenvolvimento de direção de arte para a web mais simples, especialmente se você trabalha com um sistema de gerenciamento de conteúdo e conteúdo gerado dinamicamente.

Esquerda: Sem CSS Shapes, este design parece monótono e sem vida. Direita: A criação de formas em V torna este design mais distinto e envolvente.

Para desenvolver formas a partir de imagens, elas devem ter um canal alfa que seja total ou parcialmente transparente. Não preciso desenhar um polígono para permitir que o conteúdo flua entre as formas triangulares de cada lado do meu conteúdo neste primeiro design; em vez disso, preciso apenas especificar o URL de um arquivo de imagem como o valor shape-outside :

  [src*="shape-left"], [src*="shape-right"] { width: 50%; height: 100%; } [src*="shape-left"] { float: left; shape-outside: url('alpha-left.png'); } [src*="shape-right"] { float: right; shape-outside: url('alpha-right.png'); }
[src*="shape-left"], [src*="shape-right"] { width: 50%; height: 100%; } [src*="shape-left"] { float: left; shape-outside: url('alpha-left.png'); } [src*="shape-right"] { float: right; shape-outside: url('alpha-right.png'); }

Exemplo de forma CSS — Cuidado com CORS (compartilhamento de recursos de origem cruzada) ao usar imagens para desenvolver suas formas. Você deve hospedar imagens no mesmo domínio que seu produto ou site. Se você usar uma CDN, certifique-se de que ela envie os cabeçalhos corretos para habilitar as formas. Também vale a pena notar que a única maneira de testar formas localmente é usar um servidor web. O protocolo `file://` simplesmente não funcionará.

Conteúdo gerado

Como Rachel explicou em seu artigo:

“Você também pode usar uma imagem como o caminho da forma para criar um efeito de texto curvo sem incluir a imagem na página. No entanto, você ainda precisa de algo para flutuar e, para isso, podemos usar o Conteúdo Gerado. ”

Como alternativa ao canal alfa, posso usar o Conteúdo Gerado — aplicado a dois pseudo-elementos — um para um triângulo poligonal à esquerda e outro à direita. Meu texto em execução agora fluirá entre as duas formas geradas:

  main::before { content: ""; display: block; float: left; width: 50%; height: 100%; shape-outside: polygon(0 0, 0 100%, 100% 100%); } main p:first-child::before { content: ""; display: block; float: right; width: 50%; height: 100%; shape-outside: polygon(100% 0, 0 100%, 100% 100%); }
main::before { content: ""; display: block; float: left; width: 50%; height: 100%; shape-outside: polygon(0 0, 0 100%, 100% 100%); } main p:first-child::before { content: ""; display: block; float: right; width: 50%; height: 100%; shape-outside: polygon(100% 0, 0 100%, 100% 100%); }

NB: O criador de caminhos de clipes CSS de Bennett Feely é uma ferramenta fabulosa para trabalhar valores de coordenadas para uso com formas CSS.

Ajustar a largura das imagens alfa em vários pontos de interrupção permite que a forma desse texto em execução se adeque melhor à sua janela de visualização.

2. Padrões Z

Um padrão Z é um caminho familiar que nossos olhos seguem ao ler o conteúdo da esquerda para a direita, de cima para baixo. Ao colocar o conteúdo ao longo das linhas ocultas que formam um Z, esses padrões ajudam a guiar o leitor por esse caminho, de onde gostaríamos que ele começasse a ler em direção a um destino, como um call-to-action. Os padrões Z podem ser discretos – implícitos por pontos focais ou elementos com maior peso visual – ou tornados óbvios usando CSS Shapes.

O padrão z criado ao dirigir uma coluna estreita de texto corrido entre duas formas sugere velocidade e a diversão que as pessoas terão ao dirigir este pequeno carro icônico.

Neste próximo projeto, um padrão z discreto é formado como:

A imagem grande abrange toda a largura da página, o ponto final enfatizado com um título alinhado à direita.
Um bloco de texto corrido é formado por duas formas CSS.
A borda superior grossa em uma figura que atua como rodapé completa o Z.

Não há necessidade de marcação complicada para implementar esse design e meu HTML simples inclui apenas três elementos:

  <header role="banner"> <h1>Mini Cooper:icon of the '60s</h1> <img src="banner.png" alt="Mini Cooper"> </header> <main> <img src="placeholder-left.png" alt="" aria-hidden="true"> <img src="placeholder-right.png" alt="" aria-hidden="true"> … </main> <figure role="contentinfo"> … </figure>
<header role="banner"> <h1>Mini Cooper:icon of the '60s</h1> <img src="banner.png" alt="Mini Cooper"> </header> <main> <img src="placeholder-left.png" alt="" aria-hidden="true"> <img src="placeholder-right.png" alt="" aria-hidden="true"> … </main> <figure role="contentinfo"> … </figure>

Meu cabeçalho e figura de largura de página não precisam de explicação, mas o texto corrido entre duas formas triangulares é um pouco mais complicado. Para implementar esse design de padrão z, escolho incluir duas pequenas imagens de espaço reservado de 1 × 1px nas quais aplico duas imagens maiores de formação de forma usando shape-outside . Ao anexar um atributo aria-hidden a essas imagens, um leitor de tela não as descreverá.

Depois de dar às duas imagens de forma as mesmas dimensões, flutuo uma imagem para a esquerda e a outra para a direita, o que permite que meu texto em execução seja executado entre elas:

  [src*="placeholder-left"], [src*="placeholder-right"] { display: block; width: 240px; height: 100%; } [src*="placeholder-left"] { float: left; shape-outside: url('shape-right.png'); } [src*="placeholder-right"] { float: right; shape-outside: url('shape-right.png'); }
[src*="placeholder-left"], [src*="placeholder-right"] { display: block; width: 240px; height: 100%; } [src*="placeholder-left"] { float: left; shape-outside: url('shape-right.png'); } [src*="placeholder-right"] { float: right; shape-outside: url('shape-right.png'); }

Esquerda: Um design apresentável, mas previsível, sem energia. Direita: CSS Shapes sugere diversão e velocidade.

O icônico Mini Cooper era rápido e divertido de dirigir. Enquanto meu design seria perfeitamente apresentável sem um padrão z formado por CSS Shapes, esse layout parece previsível e carece de energia. O padrão z criado ao dirigir uma coluna estreita de texto corrido entre duas formas sugere velocidade e a diversão que as pessoas terão ao dirigir este pequeno carro icônico.

3. Formas Curvas

Um dos aspectos mais fascinantes do CSS Shapes é como posso criar formas elegantes usando o canal alfa a partir de uma imagem parcialmente transparente. Esta forma pode ser qualquer coisa que eu imaginar. Eu só preciso criar a imagem e um navegador fluirá o conteúdo ao redor dela.

Embora o confinamento de conteúdo dentro de uma forma tenha sido proposto na especificação CSS Shapes Module Level 2, atualmente não há como saber se e quando isso pode ser implementado em navegadores. Mas enquanto shape-inside não está disponível ( ainda! ), isso não significa que eu não possa criar resultados semelhantes usando shape-outside .

Esquerda: Outro design apresentável, mas previsível. Direita: Uma aparência mais distinta criada usando CSS Shapes.

Ao confinar meu conteúdo em uma imagem curvada flutuando para a direita, posso facilmente adicionar uma aparência distinta a este próximo design. Para criar a forma, uso novamente a propriedade shape-outside , desta vez com o valor sendo o mesmo URL da minha imagem visível:

 [src*="curve"] { float: right; width: 400px; height: 100vh; shape-outside: url('curve.png'); }

Para colocar alguma distância entre minha forma e o conteúdo que flui ao redor dela, a propriedade shape-margin desenha uma outra forma fora dos contornos da primeira. Posso usar qualquer unidade de comprimento absoluto CSS — milímetros, centímetros, polegadas, picas, pixels e pontos — ou unidades relativas ( ch , em , ex , rem , vh e vw ):

 [src*="curve"] { shape-margin: 3rem; }

Mais margens

Adicionar movimento a este design curvo depende de mais do que CSS Shapes. Usando unidades de largura da janela de visualização, dou ao meu título, imagem e texto corrido uma margem esquerda diferente, cada uma proporcional à largura da janela de visualização. Isso cria uma diagonal da parte de trás do meu título até a frente do carro:

  h1 { margin-left: 5vw; } img { margin-left: 10vw; } p { margin-left: 20vw; }
h1 { margin-left: 5vw; } img { margin-left: 10vw; } p { margin-left: 20vw; }

4. Formas Diagonais

Os ângulos podem ajudar a tornar os layouts menos estruturados e mais orgânicos. A ausência de estrutura clara encoraja o olho a vagar livremente em torno de uma composição. Esse movimento também faz com que um arranjo pareça enérgico.

Todos os dias vejo designs em torno de eixos horizontais e verticais, mas raramente algo baseado em uma diagonal. De vez em quando, localizo um elemento em ângulo – talvez um banner gráfico com a parte inferior inclinada – mas raramente é essencial para um design.

É comum ver conteúdo fluindo em torno de formas no design de impressão, mas isso era impossível de conseguir na web antes do CSS Shapes.

Mesmo que CSS Grid envolva a configuração de colunas e linhas, não há razão para que ele não possa ser usado para criar diagonais dinâmicas. Este próximo design precisa apenas de um cabeçalho e elemento principal:

  <header role="banner"> <h1>Mini Cooper</h1> <img src="banner.png" alt="Mini Cooper"> </header> <main> <img src="shape.png" alt=""> … </main>
<header role="banner"> <h1>Mini Cooper</h1> <img src="banner.png" alt="Mini Cooper"> </header> <main> <img src="shape.png" alt=""> … </main>

Para criar o detalhe diagonal neste design, novamente fluo o conteúdo em torno de uma imagem de forma que flutua para a esquerda. Novamente, uso a propriedade shape-outside com o mesmo valor de URL que minha imagem visível e uma shape-margin para colocar distância entre minha forma e o conteúdo que flui ao redor dela:

  [src*="shape"] { float: left; shape-outside: url('shape.png'); shape-margin: 3rem; }
[src*="shape"] { float: left; shape-outside: url('shape.png'); shape-margin: 3rem; }

Dado que a capacidade de resposta é uma das propriedades intrínsecas da web, raramente podemos prever como o conteúdo fluirá, mas evitamos designs como este. Quando há muito pouco espaço para todo o meu texto em execução caber acima da forma, o fato de cada forma flutuar significa que o conteúdo fluirá para o espaço abaixo da forma.

5. Formas Giradas

Por que se contentar em usar apenas CSS Grid and Shapes quando adicionar Transforms ao mix pode permitir layouts que eram inimagináveis apenas alguns anos atrás? Neste exemplo final, o texto fluindo ao redor dos carros nesta imagem, enquanto ao mesmo tempo girava toda a composição, precisava de uma combinação de todas essas propriedades.

Como a imagem desses carros não tem canal alfa transparente, o texto flui em torno das formas, ele contém uma segunda imagem que inclui apenas informações do canal alfa.

A implementação desse design requer duas imagens; um visível, o outro comprovando as informações do canal alfa.

Desta vez, flutuo a imagem visível para a direita e aplico a propriedade shape-outside com um valor de URL que corresponde à minha imagem do canal alfa:

  [src*="shape"] { float: right; width: 50%; shape-outside: url('alpha.png'); shape-margin: 1rem; }
[src*="shape"] { float: right; width: 50%; shape-outside: url('alpha.png'); shape-margin: 1rem; }

Você deve ter notado que ambas as minhas imagens contêm elementos que eu girei no sentido horário em dez graus. Com essas imagens no lugar, posso girar todo o layout dez graus na direção oposta para dar a ilusão de que minhas imagens estão na vertical:

  body { transform: rotate(-10deg); }
body { transform: rotate(-10deg); }

Eu giro esse layout apenas o suficiente para tornar o design mais atraente, sem sacrificar a legibilidade.

Exemplo de bônus: formas de polígono esculpir colunas

Um extrato de 'Direção de Arte para a Web' disponível a partir de 26 de março de 2019.

Você pode criar formas fortes e estruturais com nada mais do que tipo. Combinando formas polygon() e pseudo-elementos, você pode esculpir formas a partir de blocos sólidos de texto corrido, no estilo de Alexey Brodovitch e seu influente trabalho para a Harper's Bazaar.

Esquerda: Esses belos numerais são quase lindos demais para serem escondidos. Eles também são perfeitos para esculpir essas colunas. Direita: Quando eu uso pseudo-elementos invisíveis sem fundo ou bordas para desenvolver formas de polígonos, o resultado são duas colunas com formas incomuns.

Eu formei essas colunas a partir de dois elementos de artigo, ou seja, com uma calha entre eles e uma largura máxima, que ajudam a manter uma medida confortável:

  body { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2vw; max-width: 48em; }
body { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2vw; max-width: 48em; }

Como há dois elementos de artigo e também especifiquei duas colunas para minha grade, não há necessidade de especificar a posição desses artigos. Eu posso deixar um navegador colocá-los para mim, e tudo o que resta para mim é aplicar shape-outside para um pseudo-elemento gerado em cada coluna:

  article:nth-of-type(1) p:nth-of-type(1)::before { content: ""; float: left; width: 160px; height: 320px; shape-outside: polygon(0px 0px, 90px 0px, [...]); } article:nth-of-type(2) p:nth-of-type(2)::before { content: ""; float: right; width: 160px; height: 320px; shape-outside: polygon(20px 220px, 120px 0px, [...]); }
article:nth-of-type(1) p:nth-of-type(1)::before { content: ""; float: left; width: 160px; height: 320px; shape-outside: polygon(0px 0px, 90px 0px, [...]); } article:nth-of-type(2) p:nth-of-type(2)::before { content: ""; float: right; width: 160px; height: 320px; shape-outside: polygon(20px 220px, 120px 0px, [...]); }

O Pagamento

Agora que o Firefox lançou uma versão que suporta CSS Shapes e lançou um Shape Path Editor dentro de suas Ferramentas de Desenvolvedor, agora existe apenas o Edge sem suporte para Shapes. Esta situação mudará em breve agora que a Microsoft anunciou uma mudança de seu próprio mecanismo de renderização EdgeHTML para o Blink do Chromium, o mesmo mecanismo do Chrome e do Opera.

Ferramentas como CSS Shapes agora nos dão inúmeras oportunidades de usar a direção de arte para capturar a atenção dos leitores e mantê-los engajados. Espero que agora você esteja tão empolgado com eles quanto eu!

Nota Editorial : O novo livro de Andy, Direção de Arte para a Web (encomende sua cópia hoje), explora 100 anos de direção de arte e como podemos usar esse conhecimento e as mais novas tecnologias da Web para criar melhores produtos digitais. Leia um trecho do capítulo para ter uma ideia do que o livro tem a oferecer.

Recursos adicionais

“Direção de Arte para a Web”, Andy Clarke
“Dê uma nova olhada nas formas CSS”, Rachel Andrew
“CSS Shapes”, documentos da web MDN, Mozilla
“Editar caminhos de forma em CSS”, documentos da web MDN, Mozilla
“Direção de arte para a Web: um novo livro sensacional”, Smashing Magazine