HTML and CSS Reference
In-Depth Information
Figure 15-18. Using other shapes brightens up plain text
In this example, border-radius on the main text background has been set to 50% , producing an ellipse.
Instead of setting the width and height of the pseudo-elements to 0 , they're made into small empty squares that
are then converted to circles with border-radius .
The styles for the pseudo-elements in thought_bubble.html look like this:
#thought::before, #thought::after {
content: '';
border: #963 solid 10px;
border-radius: 50%;
position: absolute;
#thought::before {
height: 10px;
width: 10px;
bottom: -40px;
left: 60px;
#thought::after {
height: 5px;
width: 5px;
bottom: -55px;
left: 20px;
Creating a Speech Bubble
A slightly more complex example of this technique creates the speech bubble shown in Figure 15-21 . The tail is
formed by styling both pseudo-elements as circles and using a negative z-index to tuck them behind the parent
element. The ::after pseudo-element also masks part of the ::before pseudo-element.
As in the preceding example, the text background is converted to an ellipse by setting border-radius to 50% .
The ::before pseudo element is an empty 70px square of the same background color, converted to a circle using
border-radius . It has a bottom offset of -30px , and a z-index of -1 so that it goes behind the ellipse with only the
bottom part of the circle protruding, as shown in Figure 15-19 .
Search WWH ::

Custom Search