Chapter 7. Adding graphics in the browser with CSS
This chapter covers
- Using CSS as a design tool
- Maintaining proportions in a responsive site
- Adding responsive media
- Using icon fonts in your design
- Using SVG in modern sites
It was tempting to title this chapter “Designing in the Browser” because we’re now at what might commonly be referred to as a “detail design” phase. We’ve already designed the site, and we’ve discussed the user interface, content, visual brand, and identity; everything is ready for us to start crafting a more detailed presentation layer.
In chapter 2 we used Photoshop to create a presentation layer for our site (figure 2.8). This showed designers how to take their typical workflow and apply it to mobile design. In this chapter, we’re going to execute a lot of those ideas, but with one huge variation: we’re not going to use Photoshop; we’ll use Cascading Style Sheets (CSS). With CSS3 you can add gradients, round corners, drop shadows (on text as well as on elements), color models for both RGB colors and alpha transparency, and opacity. In addition to features that enable beautiful design, CSS lets you animate between states, and because it renders natively in the browser, it also looks sharp and vibrant in high-resolution screens, such as Retina displays. This enables you to avoid the messy business of detecting high-resolution displays and serving alternative files to those browsers.