El uso de las herramientas del CSS y el diseño del navegador puede permitir visualizaciones impresionantes para el contenido web. El uso de funciones web, como filtros CSS, WebGL, video HTML5, SVG, lienzo y tecnologías futuras en evolución, como regiones CSS, formas CSS y filtros personalizados CSS, promete un panorama creativo enormemente expandido. Adobe tiene una larga trayectoria de trabajo con creadores de contenido apasionados por el diseño y el diseño, por lo que ha sido activo en la aplicación de este conocimiento a la Web con contribuciones a muchos estándares web en evolución.
Con la ayuda de National Geographic, usamos contenido de su función titulada "Forest Giant" para crear un prototipo que muestra cómo estas funciones pueden habilitar un diseño web enriquecido y técnicas responsivas. En este artículo, se mostrará cómo creamos algunas características particularmente interesantes del sitio. Para obtener una descripción general concisa, te recomendamos que mires este video en el que Christian Cantrell te explica las diversas funciones del sitio.
Sutilezas del diseño
Lo que constituye un buen diseño y las características que lo respaldan pueden ser sutiles, por lo que creamos una "superposición del editor" que destaca las características más notables. Para habilitar las marcas del editor, haz clic en la barra que se encuentra en la parte inferior del artículo.

Independiente del diseño
En la actualidad, en la Web, el diseño suele estar dictado por nuestro contenido, con contenedores que se amplían verticalmente para adaptarse al texto. Cuando se crean diseños complejos, los cambios en el texto o en otro contenido pueden tener un impacto no deseado en el diseño general, lo que hace que sea necesario rediseñar el contenido en función de cambios inesperados. Con las regiones, podemos separar realmente nuestro contenido del diseño definiendo un elemento como nuestro contenido y, luego, especificando las partes del diseño por las que queremos que fluya ese contenido.
En el ejemplo de "Forest Giant", la historia se encuentra contenida en un solo elemento. Luego, en toda la página, tenemos nuestro andamiaje de diseño, que consta de fotos y áreas de texto. Con CSS, definimos los elementos por los que queremos que fluya el contenido. Cuando la copia llega al final de un elemento, continúa con el siguiente en el orden del DOM. Esto nos permite ser muy creativos con nuestras columnas, compensarlas y adaptar su altura según el diseño, sin preocuparnos de si el texto cabrá o superará la altura del elemento. También nos permite tener elementos dentro de nuestro diseño, como imágenes de ancho completo, mientras la historia sigue fluyendo a través de él.
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
En el CSS anterior, creamos un flujo llamado "story". El contenido de este flujo nombrado es el elemento con el ID "storyContent". Luego, esto fluye a través de todos los elementos con el nombre de clase "story". Las regiones de CSS son una gran herramienta para el diseño responsivo, ya que permiten funciones como columnas múltiples y columnas desplazadas para obtener un diseño enriquecido en pantallas grandes y, al mismo tiempo, adaptarse al diseño de una sola columna en pantallas más pequeñas. Con las regiones, también puedes establecer el tamaño de tu región con unidades responsivas, como vw o vh. Esto se puede usar para garantizar que las columnas no superen la altura de la vista en tu diseño, sin preocuparte de que se corte el contenido, ya que fluirá de forma natural al siguiente elemento de la cadena de regiones.
Mayúsculas iniciales
Las exclusiones de CSS nos permiten unir el texto alrededor de formas irregulares o dentro de ellas. Esto puede ser útil para los elementos decorativos de diseño, como las letras iniciales. Las mayúsculas iniciales son una práctica de diseño común, en la que se agranda la primera letra de una historia o un capítulo, lo que permite que el resto del texto se ajuste al contorno del carácter. Este efecto es muy similar a la forma en que el contenido intercalado une los números de punto flotante. Sin embargo, con las exclusiones, ya no estamos limitados a los cuadros rectangulares. Con shape-outside en un elemento flotante, podemos definir la geometría que permite que nuestro contenido se ajuste perfectamente a la forma de nuestro carácter.
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
Esto creará una elipse que permitirá que el contenido se ajuste a la forma circular. Además, como usamos unidades relativas para la forma, el cambio en el tamaño del elemento se reflejará en el tamaño de la forma.

Formas
Junto con las letras iniciales, las exclusiones permiten unir el texto dentro de las formas con shape-inside. Usamos esta función en todo el sitio, en particular con subtítulos de imágenes grandes, y aprovechamos el espacio negativo de las fotos para enmarcar el texto. También nos permite unir el texto a lo largo del contorno de otras imágenes y gráficos que emulan diseños que antes eran muy difíciles de lograr en la Web.
Las formas también pueden funcionar con diseños responsivos mediante el uso de unidades relativas para definirlas. De esta manera, podemos crear formas que se estiren según el contenedor o el viewport, y hasta usar consultas de medios para cambiar por completo la forma o quitarla, ya que todo está definido en CSS. A continuación, se muestra un ejemplo de una forma de polígono que se usa dentro del sitio con los valores que definen los puntos:
.shape {
shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}

Texto equilibrado
El texto equilibrado es una función que analiza todo el bloque de texto dentro de un elemento cuando une líneas, en lugar de unir palabras por palabra. Evita situaciones en las que tenemos una o dos palabras en una sola línea, ya que divide las líneas de texto para lograr líneas de tamaño uniforme dentro de un elemento. Este nivel de control nos permite crear fácilmente bloques de texto estéticamente agradables, especialmente para ediciones cortas, como citas destacadas o subtítulos.
Aquí es exactamente donde usamos el texto equilibrado en el artículo. Dado que esta función es un estándar que propone Adobe, usamos un polyfill creado por Randy Edmunds para lograr los mismos resultados. Esta función se ve mejor en casos responsivos. Cuando cambies el tamaño del navegador, notarás que el bloque sigue equilibrando el texto para que las líneas tengan aproximadamente el mismo ancho. Usar el polyfill de texto equilibrado es fácil, ya que es un complemento de jQuery. Todo lo que tenemos que hacer es aplicar "balanceText()" a un selector cuando cambie el diseño y obtendremos un texto bien equilibrado, que se ve de la siguiente manera:
$('.balance').balanceText();

Cómo filtrar transiciones
Las transiciones son una forma importante de dirigir la atención del usuario y comunicar el estado de las cosas en tu sitio. Con la opacidad y, más recientemente, las Transformaciones 3D, hemos visto que se usan para crear transiciones y animaciones elegantes a medida que los usuarios se desplazan o interactúan con partes de tu sitio. Ahora tenemos filtros que se pueden usar para el mismo propósito.
En “Forest Giant”, usamos filtros para pasar de la escala de grises al color a medida que aparecen algunas imágenes. Estos filtros se pueden combinar con la opacidad o con otros filtros para crear efectos y transiciones de imágenes complejas. Podemos usar la potencia de los filtros personalizados para agregar efectos aún más dramáticos.
Los filtros personalizados se escriben con GLSL, el mismo lenguaje de sombreado que WebGL. Te permiten aplicar estos sombreadores a elementos DOM a través de CSS, lo que habilita efectos de combinación complejos y distorsión en 3D. En la parte inferior del sitio, cuando hagas clic en "Explorar el árbol de presidentes", verás que la página se pliega para revelar otra sección debajo. Este es solo un ejemplo de cómo los filtros personalizados pueden permitir transiciones enriquecidas entre el contenido. La animación se puede lograr con transiciones de CSS. Sin embargo, si deseas usar animaciones o interacciones más sólidas que las que permiten las transiciones, puedes pasar valores a tu sombreador configurando el estilo con JavaScript, como se puede ver a continuación. Esto puede permitirte tener un control más detallado sobre la suavización o incluso permitir que los métodos de entrada del usuario manipulen el 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)");
}
Nuestro filtro rasteriza el contenido como una textura en la GPU para aplicar el efecto. Por este motivo, debemos asegurarnos de quitarlo cuando termine, de lo contrario, nuestro contenido podría aparecer desenfocado.
$("#map").css("webkitFilter", "none");
Los filtros personalizados de CSS permiten efectos interesantes, como el ajuste de página que parece que se está pasando una página en un libro real. Permiten que un desarrollador web programe efectos complejos en un lenguaje llamado GLSL y los aplique al contenido web. Para obtener más información sobre los detalles de los filtros personalizados, todos esos parámetros y cómo usarlos, consulta este excelente instructivo.

Texturas renderizadas previamente en WebGL
La joya de este artículo fue la primera imagen completa de "El Presidente", que se cree que es el segundo árbol más grande del mundo en volumen. Esta imagen se creó uniendo cientos de fotos del árbol para crear una imagen completa. Queríamos simular este proceso dividiendo la imagen en muchas fotos pequeñas que se mueven para crear la imagen completa. Esto se logró con WebGL, específicamente con la biblioteca Three.js, que es un wrapper de API de nivel superior alrededor de WebGL.

La renderización de una gran cantidad de texturas puede causar problemas de rendimiento rápidamente cada vez que una textura nueva intenta dibujarse en la pantalla, sin mencionar las solicitudes de red adicionales. Para reducir esto, hicimos que nuestras texturas fueran lo más grandes posible y las compensamos para cada tarjeta. Esta técnica se conoce a menudo como asignación de sprites y es común en el desarrollo de juegos. Esto generó tres texturas grandes para todo el árbol. Para eliminar el impacto en el rendimiento cada vez que una de las texturas se hace visible en la pantalla, renderizamos cuadrados de 1 px con cada una de las texturas antes de que comience la animación, lo que mueve el impacto en el rendimiento al principio. Esto nos permite volar y animar toda la altura del árbol sin problemas, incluso en una tablet.
Para compensar las texturas, alteramos las UV que asignan la textura a la geometría. En Three.js, se ve de la siguiente manera:
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)
];
Aquí puedes ver que usamos una variable para el desplazamiento en x e y de la textura. Se podría lograr el mismo efecto con un material de sombreador GLSL personalizado que desplace las coordenadas dibujadas en la geometría.
Funciones experimentales
Debido a que algunas de las funciones que usa la demostración aún son experimentales, el artículo se debe ver en Chrome Canary y habilitar todas las marcas mencionadas para Chrome Canary en este sitio web.
Una vez que tengas Chrome Canary instalado y configurado correctamente, consulta la demostración. (Ten en cuenta que todo el proyecto es de código abierto y está disponible en GitHub).
Conclusión
También hemos estado explorando cómo se podrían usar estas funciones en el contexto de las aplicaciones para dispositivos móviles, más en la línea de un libro electrónico. Puedes ver este prototipo en curso y cómo usamos los diferentes paradigmas de interacción y táctiles para mostrar estas funciones en una tablet.
Dado que el diseño del navegador web evoluciona constantemente, vemos el deseo de continuar con el valor de producción y la calidad del diseño a los que nos acostumbramos en el pasado con el contenido de lectura heredado. Con funciones como regiones CSS, exclusiones, texto equilibrado, filtros personalizados y WebGL, los creadores de contenido ya no tendrán que elegir entre el alcance y la calidad del diseño. "Forest Giant" es una clara señal de que la Web del futuro permitirá ambas cosas.