HTML and CSS Reference
In-Depth Information
Notes
• Under IE 8 this property should be written as
-ms-filter
to show it is an
extension. You may have to use compatibility mode manually or via a header to
make filters and transitions work otherwise.
• When using the
filter
property for Internet Explorer, make sure that the object
has layout in the page which is usually accomplished by setting its size or position.
• A common use of filters that seems to be an acceptable hack to many Web developers
is the use of the
alpha()
filter to emulate the
opacity
property in Internet Explorer:
.opacity {opacity: 0.7; filter: alpha(opacity=70); zoom: 1;}
gradient
This function creates a CSS gradient image that can be used anywhere an image URL is
required, including
background-image
,
border-image
, and
list-style
properties.
Syntax
Linear Syntax:
gradient: linear,
start_point
,
end_point
,
stop1
[...
stopN
]
Radial Syntax:
gradient: radial,
inner_center
,
inner_radius
,
outer_center
,
outer_radius
,
stop1
[...
stopN
]
The syntax shows the type can be
linear
or
radial
and will take slightly different values
in each case. When
start_point
,
end_point
,
inner_center
, and
outer_center
are
used, they will be a pair of values that can be a number, percentage, or the keywords
top
,
bottom
,
left
, and
right
. The values
inner_radius
and
outer_radius
are numbers that
can be specified only if the type is
radial
. The values
stop1
(to
N
) are placeholders for the
color-stop()
function that indicates what the color should be at a given point in the
gradient. The function
color-stop()
takes two arguments, the first of which is a number
between 0 and 1.0 or a percentage indicating the location of the stop. The second argument
is the color at that stop as a standard CSS color value. The functions
from(
color-value
)
and
to(
color-value
)
are shorthand for
color-stop(0,
color-value
)
and
color-
stop(1,
color-value
)
, respectively, and can be used instead.
Examples
<div style="height: 300px; width: 200px; padding: 20px;
border: 5px solid black;
background: -webkit-gradient(linear, left top, left bottom,
from(#f00), to(rgba(0,255,0,0)), color-stop(.5, #00f));" ></div>
<div style="height: 300px; width: 200px; padding: 20px;
border: 5px solid black;
background: -webkit-gradient(radial, 100 100, 20, 200 200, 50,
from(#ff0), to(rgba(255,0,255,0)), color-stop(25%, #f00));" ></div>
