HTML and CSS Reference
In-Depth Information
• 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;}
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.
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.
<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>
Search WWH ::

Custom Search