CSS gradient effect

Very dazzling CSS gradient effect

 

 

Code
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< Html Xmlns = "Http://www.w3.org/1999/xhtml" >
< Head >
< Meta HTTP-equiv = "Content-Type" Content = "Text/html; charset = gb2312"   />
< Title > CSS gradient effect </ Title >
</ Head >

< Body >
< Div Style = "Filter: alpha (opacity = 30 finishopacity = 0 style = 1) progid: DXImageTransform. microsoft. gradient (startcolorstr = red, endcolorstr = blue, gradienttype = 1); Vertical-align: middle; border-left: # f3f3f3 1px solid; width: 300px; padding-top: 4px; border-bottom: # f3f3f3 1px solid; Height: 100px" Align = "Center" > </ Div >
<! --
Parameter description
Gradienttype = 1 indicates a horizontal gradient, and gradienttype = 0 indicates a vertical gradient.
Gradient effect implementation: filter: progid: DXImageTransform. Microsoft. gradient (startcolorstr = # ff0000, endcolorstr = # ffcc66, gradienttype = 1)
Startcolorstr = "color" indicates the color starting with the gradient.
Endcolorstr = "color" indicates the color at the end of the gradient.

Opacity transparency. The default range is from 0 to 100. They are actually percentages. That is to say, 0 indicates completely transparent, and 100 indicates completely opaque.
Finishopacity is an optional parameter. If you want to set the transparency of the gradient, you can use them to specify the transparency at the end. The range is also 0 to 100.
Style specifies the shape features of the transparent area:
0 represents a unified shape
1 represents linear
2 represents radiation
3 represents a rectangle
X coordinate at the beginning of the startx gradient transparency effect.
Y coordinate at the beginning of the starty gradient transparency effect.
The X coordinate at the end of the finishx gradient transparency effect.
The Y coordinate at the end of the finishy gradient transparency effect.
The specific effects are applied as follows:

CSS Filter Implementation Code Effect screens
Normal Image
Width = "180" Height = "120">
Transparency: 60
Style = "filter: alpha (opacity = 60 )"
Width = "180" Height = "120">
Region transparency settings, from (0, 5) to (90, 60)
Style = "filter: alpha (
Opacity = 0, finishopacity = 100,
Style = 1,
Startx = 0, starty = 5,
Finishx = 90, finishy = 60"
Width = "180" Height = "120">

Margin: 0px;
Filter: progid: DXImageTransform. Microsoft. gradient (startcolorstr = '# ff45c8ff', endcolorstr = '# ffffff', gradienttype = '0 ');
}

PS: only the filter part is written in the style. Add it as needed. Hey, I'm lazy.

Explain the things in this CSS:
Startcolorstr = '# ffeeeeee'

Startcolorstr is the starting color of the gradient, and FF is the hexadecimal transparency.

Endcolorstr = '# ffeeeeee'

Endcolorstr indicates the gradient end color, and FF indicates the hexadecimal transparency.

Gradienttype = '0'

Gradienttype gradient direction. '0' indicates the vertical direction, and '1' indicates the horizontal direction (default value: '1 ')

-->
</Body>
</Html>

 

It's amazing. Unfortunately, only IE is supported. I don't know where to find the browser-compatible gradient CSS.

 

Simple monochrome gradient example

 

The above is a bit complicated. Let's look at a simple monochrome gradient. The effect is as follows (the effect can only appear in IE)

 

 

< Div Style = "Display: block; filter: alpha (opacity = 30 finishopacity = 80 style = 2); background-color: #295983; Height: 200px ;" > </ Div >