HTML and CSS Reference
In-Depth Information
FIGURE 4-15
The layout of two paragraphs with margins enlarged
You can see in Figure 4-15 that not only did the margin create space between the two
paragraph elements, but it also created space between the top of the window and the top of
the first paragraph element.
There are a variety of options in applying graphic effects to a box to provide a unique display
to end users. This section demonstrates setting transparency, opacity, a background image,
gradients, shadows, and clipping.
Applying transparency/opacity
Setting the opacity (also known as transparency) of an element in CSS provides the ability
to make the element effectively see through. The value used in setting the opacity is a ratio
from 0 to 1.0. A setting of 0 indicates that the element is fully transparent, essentially invisible.
A value of 1.0 indicates that the element is fully opaque, the default when no opacity value is
specified. The following code sets an opacity level of 0.4 to a text element:
p {
opacity: 0.4;
}
Figure 4-16 demonstrates the output of applying this effect to the text element. The
output without the opacity specified is also provided for a comparison.
Search WWH ::
Custom Search