Usar as ferramentas do CSS e do layout do navegador pode permitir visualizações incríveis para conteúdo da Web. O uso de recursos da Web, como filtros CSS, WebGL, vídeo HTML5, SVG, canvas e tecnologias futuras em evolução, como regiões CSS, formas CSS e filtros personalizados CSS, promete uma enorme expansão do cenário criativo. A Adobe tem uma longa história de trabalho com criadores de conteúdo apaixonados por layout e design. Por isso, tem se mantido ativa na aplicação desse conhecimento na Web, com contribuições para muitos padrões da Web em evolução.
Com a ajuda da National Geographic, usamos o conteúdo do recurso "Giant da floresta" para criar um protótipo que mostra como esses recursos podem permitir layouts da Web ricos e técnicas responsivas. Neste artigo, vamos mostrar como criamos algumas características interessantes do site. Para uma visão geral concisa, assista este vídeo abaixo, em que Christian Cantrell explica os vários recursos do site.
Sutilezas do layout
O que constitui um layout excelente e os recursos por trás dele podem ser sutis. Por isso, criamos uma "sobreposição do editor" que destaca os recursos mais importantes. Para ativar as marcas do editor, clique na barra na parte de baixo do artigo.

Independente do layout
Na Web, o layout é frequentemente determinado pelo conteúdo, com contêineres que aumentam verticalmente para caber o texto. Ao criar layouts complexos, as mudanças na cópia ou em outro conteúdo podem ter um impacto indesejado no layout geral, exigindo que o conteúdo seja reformulado com base em mudanças inesperadas. Com as regiões, podemos separar o conteúdo do layout definindo um elemento como nosso conteúdo e especificando as partes do layout por onde queremos que esse conteúdo flua.
No exemplo de "Giant da floresta", a história está contida em um único elemento. Em seguida, ao longo da página, temos o scaffolding do layout, que consiste em fotos e áreas de texto. Com o CSS, definimos os elementos que queremos que o conteúdo flua. Quando a cópia chega ao fim de um elemento, ela continua para o próximo na ordem do DOM. Isso nos permite sermos criativos com nossas colunas, compensando-as e adaptando a altura com base no design, sem se preocupar se o texto vai caber ou exceder a altura do elemento. Ele também permite que tenhamos elementos no layout, como imagens em tela cheia, enquanto a história continua fluindo.
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
No CSS acima, estamos criando um fluxo chamado "story". O conteúdo desse fluxo nomeado é o elemento com o ID "storyContent". Isso flui por todos os elementos com o nome da classe "story". As regiões CSS são uma ótima ferramenta para design responsivo, permitindo recursos como várias colunas e colunas deslocadas para layouts avançados em telas grandes, enquanto se ajustam ao layout de coluna única em telas menores. Com as regiões, você também pode definir o tamanho dela com unidades responsivas, como vw ou vh. Isso pode ser usado para garantir que as colunas não excedam a altura da viewport no layout, sem se preocupar com o corte do conteúdo, já que ele flui naturalmente para o próximo elemento na cadeia de regiões.
Letras iniciais maiúsculas
As exclusões do CSS permitem que o texto seja ajustado ao redor ou dentro de formas irregulares. Isso pode ser útil para criar efeitos de design, como letras capitulares. As letras capitulares são uma prática comum de design, em que a primeira letra de uma história ou capítulo é ampliada, permitindo que o restante do texto contorne o contorno do caractere. Esse efeito é muito semelhante à forma como o conteúdo inline envolve os elementos flutuantes, mas com exclusões, não estamos mais restritos a caixas retangulares. Usando shape-outside em um float, podemos definir a geometria que permite que o conteúdo se ajuste à forma do personagem.
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
Isso vai criar uma elipse que permite que o conteúdo seja enrolado em torno da forma circular. Além disso, como estamos usando unidades relativas para a forma, a mudança no tamanho do elemento será refletida no tamanho da forma.

Formas
Além das letras capitulares, as exclusões permitem que você quebre o texto dentro de formas usando shape-inside. Usamos esse recurso em todo o site, principalmente com legendas de imagens grandes, usando o espaço negativo das fotos para enquadrar o texto. Ele também permite que o texto seja ajustado ao contorno de outras imagens e elementos gráficos, emulando layouts que antes eram muito difíceis de alcançar na Web.
As formas também podem funcionar com layouts responsivos usando unidades relativas para definir a forma. Dessa forma, podemos criar formas que se estendem com base no contêiner ou na janela de visualização e até usar consultas de mídia para mudar completamente a forma ou removê-la, já que tudo é definido no CSS. Confira abaixo um exemplo de uma forma poligonal usada no site com os valores que definem os pontos:
.shape {
shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}

Texto equilibrado
O texto balanceado é um recurso que analisa todo o bloco de texto em um elemento ao ajustar linhas, em vez de ajustar palavra por palavra. Ele evita situações em que temos uma ou duas palavras em uma única linha, dividindo linhas de texto para conseguir linhas de tamanho uniforme em um elemento. Esse nível de controle nos permite criar blocos de texto esteticamente agradáveis com facilidade, especialmente para execuções curtas, como citações ou legendas.
É exatamente aqui que estamos usando o texto equilibrado no artigo. Como esse recurso é um padrão que a Adobe está propondo, estamos usando um polyfill criado por Randy Edmunds para alcançar os mesmos resultados. Esse recurso é melhor visto em casos responsivos. Ao redimensionar o navegador, você vai notar que o bloco continua equilibrando o texto para resultar em linhas com aproximadamente a mesma largura. Usar o polyfill de texto balanceado é fácil, porque é um plug-in do jQuery. Tudo o que precisamos fazer é aplicar "balanceText()" a um seletor quando o layout mudar, e vamos ter um texto bem equilibrado, que será parecido com este:
$('.balance').balanceText();

Filtrar transições
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, observamos que esses recursos são usados para criar transições e animações elegantes enquanto os usuários rolam a página ou interagem com partes do site. Agora temos filtros que podem ser usados para a mesma finalidade.
Em "Gigante da floresta", usamos filtros para passar de tons de cinza para cores à medida que algumas imagens aparecem. Esses filtros podem ser combinados com opacidade ou outros filtros para criar efeitos e transições de imagem complexos. Podemos usar o poder dos filtros personalizados para adicionar efeitos ainda mais dramáticos.
Os filtros personalizados são escritos usando GLSL, a mesma linguagem de sombreamento do WebGL. Eles permitem que você aplique esses shaders a elementos DOM pelo CSS, ativando efeitos de mesclagem complexos e distorção 3D. Na parte de baixo do site, quando você clica em "Explorar a árvore do presidente", a página se enrola para revelar outra seção abaixo. Esse é apenas um exemplo de como os filtros personalizados podem permitir transições ricas entre conteúdos. A animação pode ser alcançada usando transições CSS. No entanto, se você quiser usar animações ou interações mais robustas do que as transições permitem, é possível transmitir valores para o shader definindo o estilo com JavaScript, como mostrado abaixo. Isso permite que você tenha um controle mais granular sobre a transição 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 rasteriza o conteúdo como uma textura na GPU para aplicar o efeito. Por isso, precisamos removê-lo quando terminar, caso contrário, nosso conteúdo pode ficar desfocado.
$("#map").css("webkitFilter", "none");
Os filtros personalizados do CSS permitem efeitos interessantes, como o ajuste 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 os aplique ao conteúdo da Web. Para mais informações sobre os detalhes dos filtros personalizados, todos os parâmetros e como usá-los, consulte este tutorial.

Texturas de pré-renderização no WebGL
A joia deste artigo foi a primeira imagem completa de "The President", que é considerada a segunda maior árvore do mundo em volume. Essa imagem foi criada juntando centenas de fotos da árvore para criar uma imagem completa. Para simular esse processo, dividimos a imagem em várias fotos pequenas que se movem para criar a imagem completa. Isso foi feito usando o WebGL, especificamente com a biblioteca Three.js, que é um wrapper de API de nível mais alto para o WebGL.

Renderizar um grande número de texturas pode causar rapidamente problemas de desempenho sempre que uma nova textura tenta ser renderizada na tela, sem mencionar as solicitações de rede extras. Para reduzir isso, fizemos nossas texturas o maior possível e as compensamos para cada bloco. Essa técnica é frequentemente chamada de mapeamento de sprites e é comum no desenvolvimento de jogos. Isso resultou em três texturas grandes para a árvore inteira. Para eliminar o impacto na performance sempre que uma das texturas fica visível na tela, renderizamos quadrados de 1 pixel com cada uma das texturas antes do início da animação, movendo o impacto na performance para o início. Isso nos permite percorrer e animar toda a altura da árvore sem problemas, mesmo em um tablet.
Para compensar as texturas, estamos alterando os UVs que mapeiam a textura para a geometria. No Three.js, fica assim:
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)
];
Aqui, você pode ver 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 compensa as coordenadas desenhadas na geometria.
Recursos experimentais
Como alguns dos recursos usados na demonstração ainda são experimentais, o artigo precisa ser lido no Chrome Canary e todas as flags mencionadas para o Chrome Canary precisam ser ativadas neste site.
Depois de instalar e configurar o Chrome Canary, confira a demonstração. Todo o projeto é de código aberto e está disponível no GitHub.
Conclusão
Também estamos estudando como esses recursos podem ser usados no contexto de aplicativos para dispositivos móveis, mais ou menos como em um e-book. Você pode conferir esse 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, estamos percebendo o desejo de continuar o valor de produção e a qualidade do layout a que nos acostumamos no passado com o conteúdo de leitura legado. Com recursos como regiões CSS, exclusões, texto balanceado, filtros personalizados e WebGL, os criadores de conteúdo não precisam mais escolher entre alcance e qualidade do design. "Giant Forest" é um sinal claro de que a Web do futuro vai permitir as duas coisas.