Utilizar as ferramentas de CSS e layout do navegador pode permitir visualizações impressionantes do conteúdo da web. O uso de recursos da Web como filtros CSS, WebGL, vídeo HTML5, SVG, canvas e tecnologia do futuro em evolução, como regiões de CSS, formas de CSS e filtros personalizados de CSS, promete um cenário criativo enormemente expandido. A Adobe tem um longo histórico de trabalho com criadores de conteúdo apaixonados por layout e design. Por isso, a Adobe tem estado ativo na aplicação desse conhecimento à Web, contribuindo para muitos padrões da Web em evolução.
Com a ajuda da National Geographic, usamos o conteúdo do recurso intitulado "Forest Giant" para construir um protótipo que mostra como esses recursos podem proporcionar um layout da Web avançado e técnicas responsivas. Este artigo mostra como criamos algumas características particularmente interessantes do site. Para uma visão geral concisa, vale a pena assistir este vídeo abaixo, em que Christian Cantrell explica os vários recursos do site.
Sutilezas de layout
O que constitui um ótimo layout e os recursos por trás dele pode ser sutil, por isso criamos uma "sobreposição do editor", que destaca os recursos mais importantes. Para ativar as marcações do editor, clique na barra na parte inferior do artigo.
Independente de layout
Na Web atual, o layout geralmente é determinado pelo nosso conteúdo com contêineres que se expandem verticalmente para ajustar o texto. Ao criar layouts complexos, mudanças na cópia ou em outro conteúdo podem ter um impacto indesejado no layout geral, fazendo com que seja necessário reformular o conteúdo com base em mudanças inesperadas. Com as regiões, podemos realmente separar nosso conteúdo do layout definindo um elemento como nosso conteúdo e especificando as partes do layout pelas quais queremos que esse conteúdo flua.
No exemplo de "Forest Giant", temos a história contida em um único elemento. Depois, em toda a página, temos nosso scaffolding de layout, que consiste em fotos e áreas de texto. Com CSS, definimos os elementos pelo qual queremos que o conteúdo flua. Quando a cópia chega ao fim de um elemento, ela continua para a próxima na ordem do DOM. Isso nos permite ser realmente criativos com nossas colunas, ajustando-as e adaptando sua altura com base no design, sem nos preocupar se o texto caberá ou excederá a altura do elemento. Eles também permitem a inclusão de elementos no layout, como imagens de largura total, enquanto a história continua a fluir por eles.
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
No CSS acima, estamos criando um fluxo nomeado chamado "story". O conteúdo desse fluxo nomeado é o elemento com o código de "storyContent". Isso flui por todos os elementos com o nome de classe "story". As regiões CSS são uma ótima ferramenta para design responsivo, permitindo recursos como várias colunas e colunas deslocadas para um layout avançado em telas grandes, enquanto se ajusta ao layout de coluna única em telas menores. Com as regiões, você também pode definir o tamanho da sua região com unidades responsivas como vw ou vh. Isso pode ser usado para garantir que as colunas não excedam a altura da janela de visualização no layout sem se preocupar com cortes no conteúdo, já que ele flui naturalmente para o próximo elemento na cadeia de regiões.
Toucas
As exclusões de CSS permitem ajustar o texto ao redor ou em formas irregulares. Isso pode ser útil para detalhes de design, como caixas de depósito. As letras maiúsculas são uma prática de design comum, em que a primeira letra de uma história ou capítulo é ampliada, permitindo que o resto do texto envolva o contorno do personagem. Esse efeito é muito semelhante a como o conteúdo inline envolve os pontos flutuantes. No entanto, com as exclusões, não estamos mais restritos a caixas retangulares. Usando uma forma externa em um ponto flutuante, podemos definir a geometria que permite que o conteúdo se enrole em torno da forma do caractere.
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
Isso cria uma elipse, permitindo que o conteúdo envolva o formato circular. Além disso, como estamos usando unidades relativas para a forma, a alteração do tamanho do elemento será refletida no tamanho da forma.
Formas
Assim como as letras maiúsculas, as exclusões permitem ajustar o texto dentro de formas usando formas. Usamos esse recurso em todo o site, particularmente para legendas de imagens grandes, usando o espaço negativo das fotos para enquadrar o texto. Ela também permite ajustar o texto ao longo dos contornos de outras imagens e gráficos emulando layouts que antes eram muito difíceis de conseguir na Web.
As formas também podem funcionar com layouts responsivos, usando unidades relativas para definir a forma. Dessa forma, podemos fazer formas que se esticam com base no contêiner ou na janela de visualização e até mesmo usar consultas de mídia para alterar completamente a forma ou removê-la, já que tudo é definido no CSS. Veja abaixo um exemplo de uma forma poligonal usada no site com os valores definindo os pontos:
.shape {
shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
Texto equilibrado
O texto equilibrado é um recurso que analisa todo o bloco de texto dentro de um elemento ao ajustar as linhas, em vez de ajustar palavra por palavra. Ele evita situações em que há uma ou duas palavras em uma única linha ao quebrar linhas de texto para conseguir linhas de tamanho uniforme em um elemento. Esse nível de controle nos permite criar facilmente blocos de texto agradáveis, especialmente para execuções curtas como aspas ou legendas.
É exatamente aqui que estamos usando o texto equilibrado no artigo. Como esse recurso é um padrão proposto pela Adobe, usaremos um polyfill criado por Randy Edmunds (em inglês) para alcançar os mesmos resultados. Esse recurso é melhor visto em casos responsivos. Ao redimensionar o navegador, você notará que o bloco continua equilibrando o texto para resultar em linhas com aproximadamente a mesma largura. Usar o polyfill de texto equilibrado é fácil, porque é um plug-in do jQuery. Tudo o que precisamos fazer é aplicar "balanceText()" a um seletor quando o layout mudar para ter um texto bem equilibrado, parecido com o seguinte:
$('.balance').balanceText();
Transições de filtros
As transições são uma maneira importante de direcionar a atenção do usuário e comunicar o estado das coisas no seu site. Com a opacidade, e mais recentemente, as Transformações 3D, vimos que elas são usadas para criar transições e animações agradáveis à medida que os usuários rolam ou interagem com partes do site. Agora temos filtros que podem ser usados para a mesma finalidade.
Em "Forest Giant", usamos filtros para esmaecer da escala de cinza à cor à medida que algumas imagens são exibidas. Esses filtros podem ser combinados com a opacidade ou com outros filtros para criar efeitos e transições de imagens complexos. Podemos usar o poder dos filtros personalizados para adicionar efeitos ainda mais dramáticos.
Filtros personalizados são criados usando GLSL, a mesma linguagem de sombreamento que WebGL. Eles permitem aplicar esses sombreadores a elementos DOM por meio de CSS, permitindo efeitos de combinação complexos e distorção 3D. Na parte inferior do site, ao clicar em ‘Explore the President Tree’, você verá a página se enrolar para revelar outra seção abaixo. Esse é apenas um exemplo de como filtros personalizados podem permitir transições avançadas entre conteúdos. A animação pode ser feita usando transições CSS. No entanto, se você quiser usar animações ou interações mais robustas do que as transições permitem, transmita valores ao sombreador definindo o estilo com JavaScript, como pode ser visto abaixo. Isso permite que você tenha um controle mais granular sobre o easing ou até mesmo permita que métodos de entrada do usuário manipulem o sombreador.
function applyCurl(value) {
$("#map").css("webkitFilter",
"custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
+ " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
+ " rotateY(0deg) rotateZ(0deg), curlPosition "
+ value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}
Nosso filtro faz uma varredura do conteúdo como uma textura na GPU para aplicar o efeito. Por isso, precisamos remover esse conteúdo quando o processo for concluído. Caso contrário, nosso conteúdo poderá ficar desfocado.
$("#map").css("webkitFilter", "none");
Os filtros personalizados de CSS oferecem efeitos interessantes, como a quebra de página que parece uma página sendo virada em um livro real. Eles permitem que um desenvolvedor da Web programe efeitos complexos em uma linguagem chamada GLSL e aplique-a ao conteúdo da Web. Para mais informações sobre os detalhes dos filtros personalizados, todos esses parâmetros e como usá-los, confira este ótimo tutorial.
Texturas de pré-renderização no WebGL
O tesouro desse artigo foi a primeira imagem completa do "O presidente", que se acredita ser a segunda maior árvore do mundo em volume. Essa imagem foi criada com o agrupamento de centenas de fotos da árvore para criar uma imagem completa. Queríamos simular esse processo dividindo a imagem em várias pequenas fotos que voam para o lugar para criar a imagem completa. Isso foi possível usando o WebGL, especificamente com a biblioteca three.js, que é um wrapper de API de nível superior relacionado ao WebGL.
Renderizar um grande número de texturas pode causar rapidamente problemas de desempenho sempre que uma nova textura tentar desenhar na tela, sem falar nas solicitações extras de rede. Para reduzir isso, tornamos nossas texturas o maior possível e as deslocamos para cada bloco. Essa técnica é muitas vezes chamada de mapeamento de sprite e é comum no desenvolvimento de jogos. Isso resultou em três texturas grandes para toda a árvore. Para se livrar do impacto de desempenho cada vez que uma das texturas fica visível pela primeira vez na tela, renderizamos quadrados de 1 px com cada uma das texturas antes do início da animação, movendo o hit de desempenho para o início. Isso nos permite voar e animar toda a altura da árvore suavemente, mesmo em um tablet.
Para deslocar as texturas, estamos alterando os UVs, que mapeiam a textura na geometria. No three.js, a aparência é semelhante a esta:
geometry.faceVertexUvs[0][0] = [
new THREE.Vector2(xOffset, yOffset + 1),
new THREE.Vector2(xOffset, yOffset),
new THREE.Vector2(xOffset + 1, yOffset),
new THREE.Vector2(xOffset + 1, yOffset + 1)
];
Observe que estamos usando uma variável para o deslocamento X e Y da textura. O mesmo efeito pode ser alcançado com um material de sombreador GLSL personalizado que desloca as coordenadas desenhadas na geometria.
Recursos experimentais
Como alguns dos recursos usados pela demonstração ainda são experimentais, acesse o artigo no Chrome Canary e ative todas as sinalizações mencionadas para o Chrome Canary neste site (em inglês).
Depois de instalar e configurar o Chrome Canary, confira a demonstração. Observe que todo o projeto é de código aberto e está disponível no GitHub.
Conclusão
Também temos explorado como esses recursos podem ser usados no contexto de aplicativos para dispositivos móveis, mais na linha de um e-book. É possível conferir o protótipo em andamento e como estamos usando os diferentes paradigmas de interação e toque para mostrar esses recursos em um tablet.
Com o layout do navegador da Web em constante evolução, temos o desejo de manter o valor de produção e a qualidade do layout com que nos acostumamos no passado com o conteúdo de leitura legado. Com recursos como regiões CSS, exclusões, texto equilibrado, filtros personalizados e WebGL, os criadores de conteúdo não vão mais precisar escolher entre alcance e qualidade do design. "A floresta gigante" é um sinal claro de que a web do futuro permitirá ambos.