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
.
