In this chapter, we'll learn how to create a simple ZUI. This acronym stands for a zooming user interface; a graphical environment where users can change the scale of the viewed area in order to see more or less detail. For this project, we'll create a ZUI to let users move and explore an infographic, which is a visual graphic representation of data, information, or knowledge. The project we are going to build combines many CSS3 features, such as transitions, transformations, and Flexible Box Layout. It also introduces SVG and the various methods we can use to embed them in an HTML page. Additionally, as an extra challenge, we will also enable our page to perform on older browsers and will explore clever ways to accomplish this task.
The following is a preview of the topics discussed in this chapter:
Infographics
Flexible Box Layout
Polyfills
Embedding SVG
Modernizr
The
:target
pseudo-selectorCSS3 transforms
Targeting SVG with CSS
Graceful degradation