design3
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
90<br />
The Principles of Beautiful Web Design<br />
You could use a circle or an oval as your background image, then center all your text—inserting<br />
line breaks where necessary—to create the illusion that you have a circular block of text in your<br />
layout. Figure 3.7 shows an example of this approach. The problem is that if your text extends<br />
beyond the bottom of the oval, or if you forget to insert a line break somewhere, the oval won’t expand<br />
to fit the text.<br />
Figure 3.7. Text inside an oval<br />
Okay, so if we forget to format our text to fit the background image, this approach can be problematic.<br />
Another reason why this technique is impractical is that most web browsers give users the<br />
ability to resize the text, which would also break this fragile, if fanciful, layout technique. In reality,<br />
the best we can do is distract viewers from the fact that a layout is rectangular.<br />
Designing in CSS<br />
Some designers have created amazing artwork without images using pure CSS, such as the robot<br />
shown in Figure 3.8 below. The example shows you just a hint of the actual complex CSS that went<br />
into making this. You can see the full example on CodePen 2 . Other examples of pure CSS artwork<br />
include Nicolas Gallagher's pure CSS GUI icons 3 .<br />
Figure 3.8. A robot image created in pure CSS<br />
2 http://codepen.io/m-kafiyan/pen/yhvgF<br />
3 http://nicolasgallagher.com/pure-css-gui-icons/demo/