ul .box { |
position : relative ; |
z-index : 1 ; /* prevent shadows falling behind containers with backgrounds */ |
overflow : hidden ; |
list-style : none ; |
margin : 0 ; |
padding : 0 ; |
} |
ul .box li { |
position : relative ; |
float : left ; |
width : 250px ; |
height : 150px ; |
padding : 0 ; |
border : 1px solid #efefef ; |
margin : 0 30px 30px 0 ; |
background : #fff ; |
-webkit-box-shadow: 0 1px 4px rgba( 0 , 0 , 0 , 0.27 ), 0 0 40px rgba( 0 , 0 , 0 , 0.06 ) inset ; |
-moz-box-shadow: 0 1px 4px rgba( 0 , 0 , 0 , 0.27 ), 0 0 40px rgba( 0 , 0 , 0 , 0.06 ) inset ; |
box-shadow: 0 1px 4px rgba( 0 , 0 , 0 , 0.27 ), 0 0 40px rgba( 0 , 0 , 0 , 0.06 ) inset ; |
} |
ul .box li:before, ul.box li:after { |
content : '' ; |
z-index : -1 ; |
position : absolute ; |
left : 10px ; |
bottom : 10px ; |
width : 70% ; |
max-width : 300px ; /* avoid rotation causing ugly appearance at large container widths */ |
max-height : 100px ; |
height : 55% ; |
-webkit-box-shadow: 0 8px 16px rgba( 0 , 0 , 0 , 0.3 ); |
-moz-box-shadow: 0 8px 16px rgba( 0 , 0 , 0 , 0.3 ); |
box-shadow: 0 8px 16px rgba( 0 , 0 , 0 , 0.3 ); |
-webkit-transform: skew( -15 deg) rotate( -6 deg); |
-moz-transform: skew( -15 deg) rotate( -6 deg); |
-ms-transform: skew( -15 deg) rotate( -6 deg); |
-o-transform: skew( -15 deg) rotate( -6 deg); |
transform: skew( -15 deg) rotate( -6 deg); |
} |
ul .box li:after { |
left : auto ; |
right : 10px ; |
-webkit-transform: skew( 15 deg) rotate( 6 deg); |
-moz-transform: skew( 15 deg) rotate( 6 deg); |
-ms-transform: skew( 15 deg) rotate( 6 deg); |
-o-transform: skew( 15 deg) rotate( 6 deg); |
transform: skew( 15 deg) rotate( 6 deg); |
} |
初级程序员
by: 正仔 发表于:2013-04-02 11:56:51 顶(0) | 踩(0) 回复
喜欢这个效果,正在使用O(∩_∩)O~~
回复评论