در این آموزش قصد داریم نحوه ایجاد سایه سه بعدی با استفاده از css بروی اجسام را مورد بررسی قرار دهیم.
این کار با استفاده از خصوصیت transform در css3 انجام میشود.
[box type=”success” align=”alignleft” class=”” width=”100%”]
<body>
<div class=”para1″>
<div></div>
</div>
</body>
[/box]
قسمت کد css:
[box type=”success” align=”alignleft” class=”” width=”100%”]
<style>
.para1{
width: 800px;
height: 300px;
/* border: 1px solid red;*/
margin: 100px auto;
}
body{
background:#d4d4d4;
}
.para1>div{
width: 100%;
height: 270px;
background: white;
}
.para1>div:after, .para1>div:before{
content: ”;
display: block;
width: 40%;
height: 0;
box-shadow: 0 0 35px 10px black;
position: relative;
z-index: -2;
}
.para1>div:before{
transform: translate(15px, 250px) rotate(-10deg);
}
.para1>div:after{
transform: translate(455px, 251px) rotate(10deg);
}
</style>
[/box]
هرجای کد را متوجه نشدید و یا سوالی داشتید میتوانید در قسمت نظرات بیان کنید.
دانلود یکجای کد : کلیک کنید
من، پارسا قربانیان موسس مدرسه اینترنتی پرنیان و برگزارکننده اولین دوره های آموزشی تضمین استخدام در ایران هستم. هدف من ایجاد یک معادله برد، برد هست. میخواهیم آرزوهایمان را با هم بسازیم♥
