Generated Content - Beginning CSS3 - page 355

5. Save the page, and test it in a browser. It now looks like a ribbon wrapped around

the <div> , as shown in Figure 15-14 .

Figure 15-14. The absolutely positioned pseudo-elements create a 3D feel

This exercise demonstrates the basic technique of adding visual effects with the ::before and ::after
pseudo-elements. The content property is set to an empty string, creating an empty element that can be
styled as a shape and then moved into position using absolute positioning. In this example, the shapes are
20px high, so they are accurately positioned below the heading by setting a negative bottom offset of the
same amount.

Ti ■ You can create more sophisticated ribbon effects using the ribbon builder, a free visual tool at
http://livetools.uiparade.com/ribbon-builder.html . The tool generates all the HTML and CSS ready
for you to download. It involves the use of some nonsemantic elements, but is an impressive example of what
can be achieved using only CSS and no images.

Creating a Comment Bubble
In the preceding exercise, the ::before and ::after pseudo-elements are used to position triangles at either end
of a heading. As you might imagine, the ::after pseudo-element is created last, so it can be superimposed on
the ::before pseudo-element. That's the technique to create the comment bubble in Figure 15-15 .

Figure 15-15. The two pseudo-elements are superimposed to create the illusion of a continuous border

The effect is created by a class called comment , which sets the position property to relative and draws a
rounded border around some text, as shown in Figure 15-16 .

Figure 15-16. The basic class simply adds the border to the text