Box Shadow Effect
I try to make a shadow effect into a box but failed to gain full success.
Can anyone please suggest any idea to how to make box shadow effect as
like attach image:
I want shadow effect like this-
Need to applying this on-
My css code-
.class_box_shadow{
min-width: 200px;
min-height: 130px;
margin: 17px 0;
background: #FFF;
border:1px solid #c2c2c2;
position:relative;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
.sh_top:after{
content: "";
position:absolute;
right: 0; top:0;
width:150px; height: 80px;
z-index: -1;
background: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 58px -11px 5px rgba(0, 0, 0, 0.20);
-webkit-box-shadow: 58px -11px 5px rgba(0, 0, 0, 0.20);
box-shadow: 58px -11px 5px rgba(0, 0, 0, 0.2);
-moz-transform:skew(-15deg,-10deg) translate(-48px,30px);
-webkit-transform:skew(-15deg,-10deg) translate(-48px,30px);
transform:skew(-15deg,-10deg) translate(-48px,30px);
}
.sh_top:before{
content: "";
position: absolute;
left: 0; top:0;
width:150px; height: 80px;
z-index: -1;
background: rgba(0, 0, 0, 0.5px);
box-shadow: -56px -10px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -56px -10px 5px rgba(0, 0, 0, 0.20);
-webkit-box-shadow: -56px -10px 5px rgba(0, 0, 0, 0.20);
-webkit-transform:skew(15deg,10deg) translate(48px,30px);
transform:skew(15deg,10deg) translate(48px,30px);
-moz-transform:skew(15deg,10deg) translate(48px,30px);
}
.sh_bottom{
width: 100%; height: 45%;
position:absolute;
z-index: -2;
bottom: 0; right: 0;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.20);
-moz-box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.20);
box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.20);
}
.sh_bottom:after{
content: "";
position:absolute;
right: 0; bottom:0;
width:150px; height: 100px;
z-index: -1;
background: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 52px 7px 5px rgba(0, 0, 0, 0.20);
-webkit-box-shadow: 52px 7px 5px rgba(0, 0, 0, 0.20);
box-shadow: 52px 7px 5px rgba(0, 0, 0, 0.20);
-moz-transform:skew(13deg,7deg) translate(-48px,-15px);
-webkit-transform:skew(13deg,7deg) translate(-48px,-15px);
transform:skew(13deg,7deg) translate(-48px,-15px);
}
.sh_bottom:before{
content: "";
position:absolute;
left: 0; bottom:0;
width:150px; height: 100px;
z-index: -1;
background: rgba(0, 0, 0, 0.2);
-moz-box-shadow: -50px 4px 5px rgba(0, 0, 0, 0.20);
-webkit-box-shadow: -50px 4px 5px rgba(0, 0, 0, 0.20);
box-shadow: -50px 4px 5px rgba(0, 0, 0, 0.20);
-webkit-transform:skew(-13deg,-7deg) translate(48px,-15px);
-moz-transform:skew(-13deg,-7deg) translate(48px,-15px);
transform:skew(-13deg,-7deg) translate(48px,-15px);
}
No comments:
Post a Comment