CSS Effects Collection

Other effects: http://www.cnblogs.com/hnyei/

1, transparent Processing:

Outer div background Translucent, inner element div opaque handled:

#outDiv {

<!--transparent Handling--
z-index:20;
Filter:alpha (opacity=50, style=0); Set transparency
}
#outDiv Div {
position:relative;
z-index:30;
}

2, Background image adaptive:

When the CSS background image stretching this problem arises, CSS3 is just floating clouds .... For IE, the common way is to use CSS filters, but then Firefox is small, Chrome is not yet born, ie dominate the world .... But now, with three or four lines of short code, we can implement a full browser-compatible approach:

.bg{
Background:url (http:// wyz.67ge.com/wp-content/uploads/qzlogo.jpg);
filter: "Progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingmethod= ' Scale ') ";
-moz-background-size:100% 100%;
  background-size:100% 100%;

3, background color gradient:

. linear{
　　width:100%;

height:600px;

FILTER:progid:DXImageTransform.Microsoft.Gradient (gradienttype=0,startcolorstr= #b8c4cb, endcolorstr= #f6f6f8); /*ie*/

Background:-moz-linear-gradient (Top, #b8c4cb, #f6f6f8); */* Firefox */

Background:-webkit-gradient (linear, 0% 0, 0% 100%,from (#b8c4cb), to (#f6f6f8));/* Google */
}

CSS Effects Collection