收集整理一些css3的图片阴影效果

主要利用gradient,transform,配合after以及before伪元素来实现各种图片阴影,卷角效果。

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>一些css3的图片阴影效果</title>

<style type="text/css">

.box {

width: 300px;

min-height: 300px;

margin: 30px;

display: inline-block;

background: #fff;

border: 1px solid #ccc;

position:relative;

text-align:center;

}

.box p {

margin: 30px;

outline: none;

font-size:60px;

font-weight:bold;

color:rgb(41, 180, 240);

text-shadow: 0 1px 0 rgba(0,0,0,0.3);

}

/*=========Box1===========*/

.box1{

background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));

background: -webkit-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);

background: -moz-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);

background: -o-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);

/*设置Box的阴影效果*/

box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;

/*制作右下脚折边效果*/

border-radius: 0 0 6px 0 / 0 0 50px 0;

}

/*使用:before来制作底部阴影,并对阴影进行旋转的扭曲和位移设置*/

.box1:before{

content: '';

width: 50px;

height: 100px;

position:absolute;

bottom:0; right:0;

box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);

z-index:-1;

-webkit-transform: translate(-35px,-40px) skew(0deg,30deg) rotate(-25deg);

-moz-transform: translate(-35px,-40px) skew(0deg,32deg) rotate(-25deg);

-o-transform: translate(-35px,-40px) skew(0deg,32deg) rotate(-25deg);

transform: translate(-35px,-40px) skew(0deg,32deg) rotate(-25deg);

}

/*使用:after来制作顶部的阴影,并对阴影进行旋转的扭曲和位移设置*/

.box1:after{

content: '';

width: 100px;

height: 100px;

top:0; left:0;

position:absolute;

display: inline-block;

z-index:-1;

box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);

-moz-transform: rotate(7deg) translate(20px,25px) skew(20deg);

-o-transform: rotate(7deg) translate(20px,25px) skew(20deg);

transform: rotate(7deg) translate(20px,25px) skew(20deg);

}

/*==========Box2============*/

.box2{

padding: 0 0 1px 0;

background: #f3f3f3;

background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));

background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

border-top: 1px solid #ccc;

border-right: 1px solid #ccc;

border-radius: 0 0 60px 0 / 0 0 60px 0;

box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);

}

.box2:before{

content:'';

width: 25px;

height: 20px;

position: absolute;

bottom:0;

right:0;

border-radius: 0 0 30px 0;

box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.3);

-webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

-moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

-o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

}

/*这里,我们做出的褶皱阴影*/

.box2:after{

content: '';

z-index: -1;

width: 100px;

height: 100px;

position:absolute;

bottom:0;

right:0;

background: rgba(0, 0, 0, 0.2);

display: inline-block;

box-shadow: 20px 20px 8px rgba()0,0,0,0.2;

-webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

-moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

-o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

}

/*==========Box3=========*/

.box3{

padding: 5px 0 ;

background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));

background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

border-radius:60px / 5px;

box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;

}

.box3:before{

content: '';

width: 50px;

height: 50px;

top:0; right:0;

position:absolute;

display: inline-block;

z-index:-1;

box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

-moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

-o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

}

.box3:after{

content: '';

width: 100px;

height: 100px;

top:0; left:0;

position:absolute;

z-index:-1;

display: inline-block;

box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);

-moz-transform: rotate(2deg) translate(20px,25px) skew(20deg);

-o-transform: rotate(2deg) translate(20px,25px) skew(20deg);

transform: rotate(2deg) translate(20px,25px) skew(20deg);

}

/*============Box4==============*/

.box4{

padding: 5px 0 ;

background: #fff;

background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.2, #f2f2f2));

background: -webkit-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff );

background: -moz-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff );

background: -o-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff );

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);

}

.box4:before{

content: '';

width: 50px;

height: 50px;

top:0; right:0;

position:absolute;

z-index: -1;

box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

-moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

-o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

}

.box4:after{

content: '';

width: 50px;

height: 50px;

top:0; left:0;

position:absolute;

z-index:-1;

display: inline-block;

box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(2deg) translate(12px,25px) skew(20deg);

-moz-transform: rotate(2deg) translate(12px,25px) skew(20deg);

-o-transform: rotate(2deg) translate(12px,25px) skew(20deg);

transform: rotate(2deg) translate(12px,25px) skew(20deg);

}

/*盒子右下角阴影效果*/

.box4 .shBr{

width: 100px;

height: 100px;

bottom:0; right:0;

position:absolute;

z-index: -1;

box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(0deg) translate(-20px,-15px) skew(20deg);

-moz-transform: rotate(0deg) translate(-20px,-15px) skew(20deg);

-o-transform: rotate(0deg) translate(-20px,-15px) skew(20deg);

transform: rotate(0deg) translate(-20px,-15px) skew(20deg);

}

/*盒子左下角阴影效果*/

.box4 .shBl{

width: 100px;

height: 100px;

bottom:0; left:0;

position:absolute;

z-index: -1;

box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(0deg) translate(20px,-15px) skew(-20deg);

-moz-transform: rotate(0deg) translate(20px,-15px) skew(-20deg);

-o-transform: rotate(0deg) translate(20px,-15px) skew(-20deg);

transform: rotate(0deg) translate(20px,-15px) skew(-20deg);

}

/*==========Box5==========*/

.box5{

padding: 0 0 1px 0;

background: #f3f3f3;

background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));

background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

border-top: 1px solid #ccc;

border-right: 1px solid #ccc;

border-radius: 0 0 60px 60px / 0 0 60px 60px;

box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);

}

/*右折效果*/

.box5:before{

content:'';

width: 25px;

height: 20px;

background: white;

position: absolute;

bottom:0; right:0;

background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));

background: -webkit-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee);

background: -moz-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee);

background: -o-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee);

border-radius: 0 0 30px 0;

box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);

-webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

-moz-transform: rotate(-20deg) skew(-40deg,-3deg)translate(-13px,-13px);

-o-transform: rotate(-20deg)skew(-40deg,-3deg) translate(-13px,-13px);

transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

}

/*右折的阴影*/

.box5:after{

content: '';

z-index: -10;

width: 100px;

height: 100px;

position:absolute;

bottom:0;

right:0;

background: rgba(0, 0, 0, 0.2);

display: inline-block;

box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

-moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

-o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

}

/*左下角折角*/

.box5 .shBlFlod{

z-index: -10;

width: 50px;

height: 50px;

position:absolute;

bottom:0; left:0;

box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(0deg) translate(40px,-20px) skew(-20deg);

-moz-transform: rotate(0deg) translate(40px,-20px) skew(-20deg);

-o-transform: rotate(0deg) translate(40px,-20px) skew(-20deg);

transform: rotate(0deg) translate(40px,-20px) skew(-20deg);

}

/*左下角阴影*/

.box5 .shBl{

content:'';

width: 25px;

height: 20px;

background: white;

position: absolute;

bottom:0; left:0;

background: #fff;

background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));

background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee);

background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);

background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee);

border-border-radius:0 0 30px 0;

box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);

-webkit-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);

-moz-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);

-o-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);

transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);

}

/*=========Box6========*/

.box6{

padding: 0 0 1px 0;

background:#fff;

background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));

background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);

background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);

background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);

border-top: 1px solid #ccc;

border-right: 1px solid #ccc;

border-left: 1px solid #ccc;

border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;

box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;

}

.box6:before{

content:'';

width: 25px;

height: 20px;

position: absolute;

bottom:0;

right:0;

border-radius: 0 0 30px 0;

box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);

-webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

-moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

-o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

}

.box6:after{

content: '';

z-index: -10;

width: 100px;

height: 100px;

position:absolute;

bottom:0;

right:0;

background: rgba(0, 0, 0, 0.2);

display: inline-block;

box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

-moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

-o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

}

.box6 .cornerLf{

width: 100px;

height: 100px;

top:0; left:0;

position:absolute;

z-index:-6;

display: inline-block;

box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);

-moz-transform: rotate(2deg) translate(20px,20px) skew(20deg);

-o-transform: rotate(2deg) translate(20px,20px) skew(20deg);

transform: rotate(2deg) translate(20px,20px) skew(20deg);

}

.box6 .cornerRt{

content: '';

width: 50px;

height: 50px;

top:0; right:0;

position:absolute;

display: inline-block;

z-index:-6;

box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

-moz-transform: rotate(2deg) translate(-14px,15px) skew(-20deg);

-o-transform: rotate(2deg) translate(-14px,15px) skew(-20deg);

transform: rotate(2deg) translate(-14px,15px) skew(-20deg);

}

/*==========Box7=========*/

.box7{

padding: 0 0 1px 0;

background: #fff;

background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));

background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);

background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);

background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);

border-top: 1px solid #ccc;

border-right: 1px solid #ccc;

border-left: 1px solid #ccc;

box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);

}

.box7:before{

content: '';

position:absolute;

width: 130px;

height: 30px;

border-left: 1px dashed rgba(0, 0, 0, 0.1);

border-right: 1px dashed rgba(0, 0, 0, 0.1);

background: rgba(0, 0, 0, 0.1);

background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));

background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);

-webkit-transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg);

-moz-transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg);

-o-transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg);

transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg);

}

.box7:after{

content: '';

position:absolute;

right:0;

bottom:0;

width: 130px;

height: 30px;

background: rgba(0, 0, 0, 0.1);

background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));

background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

border-left: 1px dashed rgba(0, 0, 0, 0.1);

border-right: 1px dashed rgba(0, 0, 0, 0.1);

box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);

-webkit-transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg);

-moz-transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg);

-o-transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg);

transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg)

}

/*==========Box8=========*/

.box8{

border: 2px solid #ccc;

background: rgba(0, 0, 0, 0.5);

box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);

}

.box8:before{

content: '';

width: 110%;

left: 0;

height: 110%;

z-index:-1;

position:absolute;

border: 1px solid #ccc;

background: #f3f3f3;

background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));

background: -webkit-linear-gradient(0 0 90deg, #f3f3f3, #f3f3f3 10%, #fff);

background: -o-linear-gradient(0 0 90deg, #f3f3f3, #f3f3f3 10%, #fff);

background: -moz-linear-gradient(0 0 90deg, #f3f3f3, #f3f3f3 10%, #fff);

box-shadow: 0px 0px 12px rgba(0,0,0,0.1);

-webkit-transform: translate(-5%,-5%);

-moz-transform: translate(-5%, -5%);

-o-transform: translate(-5%, -5%);

transform: translate(-5%, -5%);

}

.box8:after{

content: '';

width: 100%;

left: 0;

height: 55%;

z-index:-2;

background: none;

position:absolute;

border-radius: 20px;

box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);

-webkit-transform: translate(0,0);

-moz-transform: translate(0,0);

-o-transform: translate(0,0);

transform: translate(0,0);

}

/*=========Box9=======*/

.box9{

border: 1px solid rgba(0,0,0,0.1);

border-radius:20px;

background: white;

box-shadow:0px 0px 5px rgba(0,0,0,0.3);

}

/*底部的透明框效果*/

.box9:before{

content: '';

width: 110%;

left: 0;

height: 111%;

z-index:-1;

position:absolute;

border-radius:20px;

border: 1px solid rgba(0,0,0, 0.1);

background: rgba(0, 0, 0, 0.0);

box-shadow: 0px 0px 5px rgba(0,0,0,0.2);

-webkit-transform: translate(-5%,-5%);

-moz-transform: translate(-5%, -5%);

-o-transform: translate(-5%, -5%);

transform: translate(-5%, -5%);

}

/*这是框的顶部部分的粘带效果*/

.box9:after{

content: '';

position:absolute;

top:-25px; left: 30%;

width: 130px;

height: 40px;

background: rgba(0, 0, 0, 0.1);

background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));

background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

border-left: 1px dashed rgba(0, 0, 0, 0.1);

border-right: 1px dashed rgba(0, 0, 0, 0.1);

box-shadow: 0px 0px 12px rgba(0,0,0,0.2);

}

/*=========Box10=====*/

.box10{

padding: 0 0 1px 0;

background: #fff;

background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));

background: -webkit-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);

background: -o-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);

background: -moz-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);

border: 1px solid #ccc;

box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);

border-radius: 0 0 60px 0 / 0 0 5px 0;

}

.box10:before{

content: '';

width: 98%;

z-index:-1;

height: 100%;

padding: 0 0 1px 0;

position: absolute;

bottom:0; right:0;

background: #fff;

background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));

background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);

background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);

background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);

border: 1px solid #ccc;

box-shadow: 1px 1px 8px rgba(0,0,0,0.1);

border-radius: 0 0 60px 0 / 0 0 5px 0;

-webkit-transform: skew(2deg,2deg) translate(3px,8px);

-moz-transform: skew(2deg,2deg) translate(3px,8px);

-o-transform: skew(2deg,2deg) translate(3px,8px);

transform: skew(2deg,2deg) translate(3px,8px);

}

.box10:after{

content: '';

width: 98%;

z-index:-1;

height: 98%;

padding: 0 0 1px 0;

position: absolute;

bottom:0; right:0;

background: #fff;

background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));

background: -webkit-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6);

background: -o-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6);

background: -moz-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6);

border: 1px solid #ccc;

box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);

-webkit-transform: skew(2deg,2deg) translate(-1px,2px);

-moz-transform: skew(2deg,2deg) translate(-1px,2px) ;

-o-transform: skew(2deg,2deg) translate(-1px,2px) ;

transform: skew(2deg,2deg) translate(-1px,2px) ;

}

/*==========Box11========*/

.box11{

padding: 0 0 1px 0;

background: #f3f3f3;

background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));

background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

border-top: 1px solid white;

border-right: 1px solid #ccc;

border-radius: 0 0 60px 0;

box-shadow: -1px 2px 2px rgba(0,0,0,0.2);

}

.box11:before{

content:'';

width: 25px;

height: 20px;

background: white;

position: absolute;

bottom:0; right:0;

background:#fff;

background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));

background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee);

background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee);

background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);

border-radius: 0 0 30px 0;

box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);

-webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

-moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

-o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

}

.box11:after{

content: '';

z-index: -1;

width: 100px;

height: 100px;

position:absolute;

bottom:0;

right:0;

background: rgba(0, 0, 0, 0.2);

display: inline-block;

box-shadow: 20px 20px 17px rgba(0,0,0,0.2);

-webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

-moz-transform: rotate(0deg) translate(-40px,-17px) skew(20deg);

-o-transform: rotate(0deg) translate(-40px,-17px) skew(20deg);

transform: rotate(0deg) translate(-40px,-17px) skew(20deg);

}

.box11 .ribbon{

position:absolute;

top:-25px; left: 30%;

width: 130px;

height: 40px;

background:#ccc;

background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));

background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

border-left: 1px dashed rgba(0, 0, 0, 0.1);

border-right: 1px dashed rgba(0, 0, 0, 0.1);

box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);

}

/*========Box 12========*/

.box12{

padding: 0 0 1px 0;

background:#f3f3f3;

background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));

background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

border-top: 1px solid #ccc;

border-right: 1px solid #ccc;

border-radius: 0 0 60px 60px;

box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);

}

.box12:before{

content:'';

width: 25px;

height: 20px;

background: white;

position: absolute;

bottom:0; right:0;

background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));

background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee);

background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee);

background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);

border-radius: 0 0 30px 0;

box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);

-webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

-moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

-o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

}

.box12:after{

content: '';

z-index: -10;

width: 100px;

height: 100px;

position:absolute;

bottom:0;

right:0;

background: rgba(0, 0, 0, 0.2);

display: inline-block;

box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

-moz-transform: rotate(0deg) translate(-40px,-17px) skew(20deg);

-o-transform: rotate(0deg) translate(-40px,-17px) skew(20deg);

transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

}

.box12 .shBlFlod{

z-index: -10;

width: 50px;

height: 50px;

position:absolute;

bottom:0; left:0;

box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(0deg) translate(40px,-20px) skew(-20deg);

-moz-transform: rotate(0deg) translate(40px,-17px) skew(-20deg);

-o-transform: rotate(0deg) translate(40px,-17px) skew(-20deg);

transform: rotate(0deg) translate(40px,-20px) skew(-20deg);

}

.box12 .shBl{

width: 25px;

height: 20px;

z-index:20;

background: white;

position: absolute;

bottom:0; left:0;

background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));

background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee);

background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee);

background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);

border-radius: 0 0 30px 0;

box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);

-webkit-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);

-moz-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);

-o-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);

transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);

}

.box12 .ribbon{

content: '';

position:absolute;

top:-25px; left: 30%;

width: 130px;

height: 40px;

background: #ccc;

background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));

background: -webkit-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

background: -o-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

border-left: 1px dashed rgba(0, 0, 0, 0.1);

border-right: 1px dashed rgba(0, 0, 0, 0.1);

box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);

}

/*=======Box 13=====*/

.box13{

padding: 0 0 1px 0;

background:#fff;

background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));

background: -webkit-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);

background: -o-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);

background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);

border-top: 1px solid #ccc;

border-right: 1px solid #ccc;

border-left: 1px solid #ccc;

border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;

box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;

}

.box13:before{

content:'';

width: 25px;

height: 20px;

position: absolute;

bottom:0;

right:0;

border-radius: 0 0 30px 0;

box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);

-webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

-moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

-o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

}

.box13:after{

content: '';

z-index: -10;

width: 100px;

height: 100px;

position:absolute;

bottom:0;

right:0;

background: rgba(0, 0, 0, 0.2);

display: inline-block;

box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

-moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

-o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

}

.box13 .cornerLf{

width: 100px;

height: 100px;

top:0; left:0;

position:absolute;

z-index:-6;

display: inline-block;

box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);

-moz-transform: rotate(2deg) translate(20px,25px) skew(20deg);

-o-transform: rotate(2deg) translate(20px,25px) skew(20deg);

transform: rotate(2deg) translate(20px,25px) skew(20deg);

}

.box13 .cornerRt{

content: '';

width: 50px;

height: 50px;

top:0; right:0;

position:absolute;

display: inline-block;

z-index:-6;

box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

-moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

-o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

}

.box13 .ribbon:before{

content: '';

position:absolute;

top:0; left: 0;

width: 130px;

height: 40px;

background:rgba(0,0,0,0.2);

background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));

background: -webkit-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

background: -o-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

border-left: 1px dashed rgba(0, 0, 0, 0.1);

border-right: 1px dashed rgba(0, 0, 0, 0.1);

box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(90deg) skew(0,0) translate(100px,65px);

-moz-transform: rotate(90deg) skew(0,0) translate(100px,65px);

-o-transform: rotate(90deg) skew(0,0) translate(100px,65px);

transform: rotate(90deg) skew(0,0) translate(100px,65px);

}

.box13 .ribbon:after{

content: '';

position:absolute;

top:0; right: 0;

width: 130px;

height: 40px;

background:rgba(0, 0, 0, 0.1);

background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));

background: -webkit-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

background: -o-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

border-left: 1px dashed rgba(0, 0, 0, 0.1);

border-right: 1px dashed rgba(0, 0, 0, 0.1);

box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(90deg) skew(0,0) translate(100px,-65px);

-moz-transform: rotate(90deg) skew(0,0) translate(100px,-65px);

-o-transform: rotate(90deg) skew(0,0) translate(100px,-65px);

transform: rotate(90deg) skew(0,0) translate(100px,-65px);

}

/*==========Box14=========*/

.box14{

padding: 5px 0 ;

background:#fff;

background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));

background: -wbkit-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);

background: -o-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);

background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);

border: 1px solid #ccc;

border-radius: 60px/5px;

box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;

}

.box14:before{

content: '';

width: 50px;

height: 50px;

top:0; right:0;

position:absolute;

display: inline-block;

z-index:-1;

box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

-moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

-o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

}

.box14:after{

content: '';

width: 100px;

height: 100px;

top:0; left:0;

position:absolute;

z-index:-1;

display: inline-block;

box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);

-webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);

-moz-transform: rotate(2deg) translate(20px,25px) skew(20deg);

-o-transform: rotate(2deg) translate(20px,25px) skew(20deg);

transform: rotate(2deg) translate(20px,25px) skew(20deg);

}

.box14 .ribbon{

position:absolute;

top:0; right: 0;

width: 130px;

height: 40px;

background: rgba(0, 0, 0, 0.1);

background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));

background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

border-left: 1px dashed rgba(0, 0, 0, 0.1);

border-right: 1px dashed rgba(0, 0, 0, 0.1);

box-shadow: 0px 0px 12px rgba(0,0,0,0.2);

-webkit-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);

-moz-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);

-o-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);

transform: rotate(6deg) skew(0,0) translate(-60%,-5px);

}

/*=========BOX15======*/

.box15{

padding: 0 0 1px 0;

background:#fff;

background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));

background: -webkit-linear-gradient(100% 50% 90deg, #fff, #fff 10%, #f3f3f3);

background: -o-linear-gradient(100% 50% 90deg, #fff, #fff 10%, #f3f3f3);

background: -moz-linear-gradient(100% 50% 90deg, #fff, #fff 10%, #f3f3f3);

border: 1px solid #ccc;

box-shadow: 1px 1px 4px rgba(0,0,0,0.1);

border-radius: 0 0 60px 0 / 0 0 5px 0;

}

.box15:before{

content: '';

width: 98%;

z-index:-1;

height: 100%;

padding: 0 0 1px 0;

position: absolute;

bottom:0; right:0;

background: #fff;

background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));

background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);

background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);

background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);

border: 1px solid #ccc;

box-shadow: 1px 1px 8px rgba(0,0,0,0.1);

border-radius: 0 0 60px 0 / 0 0 5px 0;

-webkit-transform: skew(2deg,2deg) translate(3px,8px);

-moz-transform: skew(2deg,2deg) translate(3px,8px);

-o-transform: skew(2deg,2deg) translate(3px,8px);

transform: skew(2deg,2deg) translate(3px,8px);

}

.box15:after{

content: '';

width: 98%;

z-index:-1;

height: 98%;

padding: 0 0 1px 0;

position: absolute;

bottom:0; right:0;

background: #f3f3f3;

background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));

background: -webkit-linear-gradient(0% 0% 360deg, #f3f3f3, #fff, #f6f6f6);

background: -o-linear-gradient(0% 0% 360deg, #f3f3f3, #fff, #f6f6f6);

background: -moz-linear-gradient(0% 0% 360deg, #f3f3f3, #fff, #f6f6f6);

border: 1px solid #ccc;

box-shadow: 0px 0px 8px rgba(0,0,0,0.1);

-webkit-transform: skew(2deg,2deg) translate(-1px,2px);

-moz-transform: skew(2deg,2deg) translate(-1px,2px);

-o-transform: skew(2deg,2deg) translate(-1px,2px);

transform: skew(2deg,2deg) translate(-1px,2px);

}

.box15 .ribbon{

position:absolute;

top:0; left: 0;

width: 130px;

height: 40px;

background:rgba(0, 0, 0, 0.1);

background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));

background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

border-left: 1px dashed rgba(0, 0, 0, 0.1);

border-right: 1px dashed rgba(0, 0, 0, 0.1);

box-shadow: 0px 0px 12px rgba(0,0,0,0.2);

-webkit-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);

-moz-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);

-o-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);

transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);

}

/*============box16==========*/

.box16{

box-shadow: 0 10px 6px -6px #777;

}

/*========box17================*/

.box17:before,

.box17:after{

z-index: -1;

position: absolute;

content: "";

bottom: 15px;

left: 10px;

width: 50%;

top: 80%;

max-width:300px;

background: #777;

box-shadow: 0 15px 10px #777;

-webkit-transform: rotate(-3deg);

-moz-transform: rotate(-3deg);

-o-transform: rotate(-3deg);

-ms-transform: rotate(-3deg);

transform: rotate(-3deg);

}

.box17:afte

{

-webkit-transform: rotate(3deg);

-moz-transform: rotate(3deg);

-o-transform: rotate(3deg);

-ms-transform: rotate(3deg);

transform: rotate(3deg);

right: 10px;

left: auto;

}

/*==========box18=======================*/

.box18:before{

z-index: -1;

position: absolute;

content: "";

bottom: 15px;

left: 10px;

width: 50%;

top: 80%;

max-width:300px;

background: #777;

-webkit-box-shadow: 0 15px 10px #777;

-moz-box-shadow: 0 15px 10px #777;

box-shadow: 0 15px 10px #777;

-webkit-transform: rotate(-3deg);

-moz-transform: rotate(-3deg);

-o-transform: rotate(-3deg);

-ms-transform: rotate(-3deg);

transform: rotate(-3deg);

}

/*========box19===================*/

.box19:after{

z-index: -1;

position: absolute;

content: "";

bottom: 15px;

right: 10px;

left: auto;

width: 50%;

top: 80%;

max-width:300px;

background: #777;

box-shadow: 0 15px 10px #777;

-webkit-transform: rotate(3deg);

-moz-transform: rotate(3deg);

-o-transform: rotate(3deg);

-ms-transform: rotate(3deg);

transform: rotate(3deg);

}

/*=============box20=====================*/

.box20:before,

.box20:after{

z-index: -1;

position: absolute;

content: "";

bottom: 25px;

left: 10px;

width: 50%;

top: 80%;

max-width:300px;

background: #777;

box-shadow: 0 35px 20px #777;

-webkit-transform: rotate(-8deg);

-moz-transform: rotate(-8deg);

-o-transform: rotate(-8deg);

-ms-transform: rotate(-8deg);

transform: rotate(-8deg);

}

.box20:after{

-webkit-transform: rotate(8deg);

-moz-transform: rotate(8deg);

-o-transform: rotate(8deg);

-ms-transform: rotate(8deg);

transform: rotate(8deg);

right: 10px;

left: auto;

}

/*=============box21===============*/

.box21{

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

.box21:before,

.box21:after{

content:"";

position:absolute;

z-index:-1;

box-shadow:0 0 20px rgba(0,0,0,0.8);

top:50%;

bottom:0;

left:10px;

right:10px;

border-radius:100px / 10px;

}

.box21:after{

right:10px;

left:auto;

-webkit-transform:skew(8deg) rotate(3deg);

-moz-transform:skew(8deg) rotate(3deg);

-ms-transform:skew(8deg) rotate(3deg);

-o-transform:skew(8deg) rotate(3deg);

transform:skew(8deg) rotate(3deg);

}

/*=============box22===================*/

.box22{

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

.box22:before,

.box22:after{

content:"";

position:absolute;

z-index:-1;

box-shadow:0 0 20px rgba(0,0,0,0.8);

top:0;

bottom:0;

left:10px;

right:10px;

border-radius:100px / 10px;

}

.box22:after{

right:10px;

left:auto;

-webkit-transform:skew(8deg) rotate(3deg);

-moz-transform:skew(8deg) rotate(3deg);

-ms-transform:skew(8deg) rotate(3deg);

-o-transform:skew(8deg) rotate(3deg);

transform:skew(8deg) rotate(3deg);

}

/*===============box23=================*/

.box23{

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

.box23:before,

.box23:after{

content:"";

position:absolute;

z-index:-1;

box-shadow:0 0 20px rgba(0,0,0,0.8);

top:10px;

bottom:10px;

left:0;

right:0;

border-radius:100px / 10px;

}

.box23:after{

right:10px;

left:auto;

-webkit-transform:skew(8deg) rotate(3deg);

-moz-transform:skew(8deg) rotate(3deg);

-ms-transform:skew(8deg) rotate(3deg);

-o-transform:skew(8deg) rotate(3deg);

transform:skew(8deg) rotate(3deg);

}

</style>

</head>

<body>

<div class="page">

<section class="demo">

<div class="box box1"><p>Effect 1</p></div>

<div class="box box2"><p>Effect 2</p></div>

<div class="box box3"><p>Effect 3</p></div>

<div class="box box4"><p>Effect 4</p><div class="shBl"></div><div class="shBr"></div></div>

<div class="box box5"><p>Effect 5</p><div class="shBl"></div><div class="shBlFlod"></div></div>

<div class="box box6"><p>Effect 6</p><div class="cornerLf"></div><div class="cornerRt"></div></div>

<div class="box box7"><p>Effect 7</p></div>

<div class="box box8"><p>Effect 8</p></div>

<div class="box box9"><p>Effect 9</p></div>

<div class="box box10"><p>Effect 10</p></div>

<div class="box box11"><p>Effect 11</p><div class="ribbon"></div></div>

<div class="box box12"><p>Effect 12</p><div class="shBl"></div><div class="shBlFlod"></div><div class="ribbon"></div></div>

<div class="box box13"><p>Effect 13</p><div class="cornerLf"></div><div class="cornerRt"></div><div class="ribbon"></div></div>

<div class="box box14"><p>Effect 14</p><div class="ribbon"></div></div>

<div class="box box15"><p>Effect 15</p><div class="ribbon"></div></div>

<div class="box box16"><p>Effect 16</p></div>

<div class="box box17"><p>Effect 17</p></div>

<div class="box box18"><p>Effect 18</p></div>

<div class="box box19"><p>Effect 19</p></div>

<div class="box box20"><p>Effect 20</p></div>

<div class="box box21"><p>Effect 21</p></div>

<div class="box box22"><p>Effect 22</p></div>

<div class="box box23"><p>Effect 23</p></div>

</section>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端

JavaScript之DOM的理解学习归纳

DOM是一个针对HTML和XML文档的一个API,主要描绘了一个层次化的节点树 1、Node类型。JavaScript中所有的节点类型都继承自Node类型,因此...

1785
来自专栏数据小魔方

excel数据排序的常用方式

今天跟大家分享几种常用的数据排序方式! ▼ 在excel中整理数据、作图或者其他数据汇总操作,常会遇到对某一列数据排序的需求。当然用肉眼观察手动排序肯定是不现实...

40211
来自专栏青青天空树

趣味问题:到底买不买

描述:小红想买些珠子做一串自己喜欢的珠串。卖珠子的摊主有很多串五颜六色的珠串,但是不肯把任何一串拆散了卖。于是小红要你帮忙判断一下,某串珠子里是否包含了全部自己...

452
来自专栏IMWeb前端团队

jQuery中的remove和empty区别

说道dom中移出节点,这两个都可以完成。但也有写差别: empty()是只移除了 指定元素中的所有子节点,拿$(“div”).empty()来说,他只是把 移...

1875
来自专栏HTML5学堂

JQuery选择器(中)

HTML5学堂:在学习JQuery开发的时候,选择器有多种,而我们将接着介绍选择器的其他类型,希望对大家有帮助! 5.临近选择器: $("mix+mix"),选...

3499
来自专栏Unity Shader

Shader初学笔记:vertex/fragment渲染过程

#pragma vertex vert //对应下面的vert函数,得到转换坐标系后的顶点信息

5914
来自专栏james大数据架构

简单的jquery拖曵原理js特效实例

<!DOCTYPE html> <html> <title>简单拖曵原理实例</title> <script language="javascript" src...

1847
来自专栏进击的君君的前端之路

firstElementChild、firstChild 、childNodes和children方法

952
来自专栏极客编程

用Vue.js递归组件构建一个可折叠的树形菜单

递归组件常用于在blog上显示注释、嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同。例如:

571
来自专栏前端架构

JavaScript操作DOM的那些坑

所有浏览器的focus/blur事件都不冒泡,万幸的是大部分浏览器支持focusin/focusout事件,不过可恶的firefox连这个都不支持。

1015

扫码关注云+社区