تریک ایجاد سایه سه بعدی با css بروی اجسام

تریک ایجاد سایه سه بعدی با css بروی اجسام

در این آموزش قصد داریم نحوه ایجاد سایه سه بعدی با استفاده از 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]

در این آموزش قصد داریم نحوه ایجاد سایه سه بعدی با استفاده از css بروی اجسام را مورد بررسی قرار دهیم.

هرجای کد را متوجه نشدید و یا سوالی داشتید میتوانید در قسمت نظرات بیان کنید.

دانلود یکجای کد :  کلیک کنید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

یک ستارهدو ستارهسه ستارهچهار ستارهپنج ستاره (No Ratings Yet)
Loading...