Wielding the tools from CSS and browser layout can enable stunning visualizations for web content. Using web features like CSS filters, WebGL, HTML5 video, SVG, canvas and evolving future tech like CSS Regions, CSS Shapes and CSS Custom Filters promises a hugely expanded creative landscape. Adobe has had a long history of working with content creators who are passionate about layout and design, and so has been active in applying this knowledge to the web with contributions to many evolving web standards.
With the help of National Geographic, we used content from their feature titled ‘Forest Giant’ to build a prototype showcasing how these features can enable rich web layout and responsive techniques. This article will show how we built some particularly interesting characteristics of the site. For a concise overview it’s worth watching this video below where Christian Cantrell walks you through the various features of the site.