HTML and CSS Reference
In-Depth Information
TABLE 4-4 Parameters for the linear-gradient function
Parameter
description
Specify the direction of the gradient as to right or to left . This parameter is optional and
the default when blank is an up/down gradient effect. A diagonal effect can also be
applied by specifying to bottom right or to bottom left . You may also specify an angle, as
in 100deg .
Direction
The second and subsequent parameters is the color to start with followed by the
transitional colors known as the color stops. This tells the browser what color to start with
and transition into with the gradient effect.
Color stop…n
Applying a shadow effect
Shadow effects allow you to apply a shadow to your HTML element's box or to the text.
There are two CSS3 properties to control the shadow effect: box-shadow and text-shadow .
The box-shadow controls the shadow effect surrounding the box of the HTML element. The
text-shadow property controls the shadow of text.
The box-shadow property supports the parameters outlined in Table 4-5. The first two
parameters are required to create the shadow effect. The blur and spread parameters are
optional effects that can be applied to the box-shadow .
TABLE 4-5 Parameters for the box-shadow property
Parameter
Description
Specifies the position of the horizontal shadow. The value can also be a negative number.
h-shadow
Specifies the position of the vertical shadow. The value can also be a negative number.
v-shadow
Specifies the distance of the blur effect. This parameter is optional and defaults to 0.
blur
Specifies the size of the shadow.
spread
Specifies the color of the shadow.
color
Specifies that the shadow should be inside the box instead of outside the box.
inset
In its simplest form, the box-shadow property requires only that h-shadow and v-shadow
are specified. The following code shows a basic shadow applied to a div element:
div{
position: absolute;
left: 50px;top: 50px;
width: 100px;
height: 100px;
border: solid 1px black;
box-shadow: 10px 10px;
}
The div element is rendered with a shadow as shown in Figure 4-19.
 
Search WWH ::




Custom Search