مشکل استفاده از box shadow برای قسمت contents
سلام
من قصد دارم از یک باکس شدو برای قسمت contents بگذارم ولی متاسفانه اعمال نمی شه باکس شدو که من تعریف کردم
کد:
#contents {
background:none repeat scroll 0 0 #FFFFFF
width:495px;
height:auto;
margin:0 auto;
border-radius:1px;
float:left;
margin-left:5px;
overflow:hidden;
padding-left:2.3px;
border-radius: 5px 5px 5px 5px;
/*overflow: hidden;*/
position: relative;
}
#contents:before {
transform: skew(0deg, 4deg);
-moz-transform: skew(0deg, 4deg);
-webkit-transform: skew(0deg, 4deg);
box-shadow: 5px 5px 5px #000000;
-moz-box-shadow: 5px 5px 5px #000000;
-webkit-box-shadow: 5px 5px 5px #000000;
background-color: black;
bottom: 0px;
content: "";
height: auto;
position: absolute;
right: 9px;
width: 477px;
z-index: -1;
}
#contents:after {
transform: skew(0deg,-4deg);
-moz-transform: skew(0deg,-4deg);
-webkit-transform: skew(0deg,-4deg);
box-shadow: -5px 5px 5px #000000;
-moz-box-shadow: -5px 5px 5px #000000;
-webkit-box-shadow: -5px 5px 5px #000000;
background-color: black;
bottom: 0;
position: absolute;
content: "";
width: 477px;
height: auto;
left: 9px;
z-index: -1;
}
می خواهم یک چیزی شبیح این عکس بشه البته من برای قسمت راست چپ از این کد توانستم استفاده کنم و برای contents نشد
[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
دمو
persian-learn.ir/demo
